From c9a0b71c37d01095bc37620e648e6ba9f1c3567b Mon Sep 17 00:00:00 2001 From: Martin Yankov Date: Wed, 10 Jul 2019 09:59:04 +0300 Subject: [PATCH] feat: add css for tabstripitem for bottom navigation ios (#7482) --- .../bottom-navigation.ios.ts | 100 ++++++++++++++++-- .../tab-strip-item/tab-strip-item.ts | 8 ++ 2 files changed, 100 insertions(+), 8 deletions(-) diff --git a/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts b/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts index 08913514a..eaaec4729 100644 --- a/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts +++ b/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts @@ -1,9 +1,12 @@ // Types import { TabContentItem } from "../tab-navigation-base/tab-content-item"; import { TabStripItem } from "../tab-navigation-base/tab-strip-item"; +import { TextTransform } from "../text-base"; //Requires import { TabNavigationBase, itemsProperty, selectedIndexProperty } from "../tab-navigation-base/tab-navigation-base"; +import { Font } from "../styling/font"; +import { getTransformedText } from "../text-base"; import { Frame } from "../frame"; import { ios as iosView, View, CSSType } from "../core/view"; import { ios as iosUtils, layout } from "../../utils/utils"; @@ -96,6 +99,15 @@ class UITabBarControllerDelegateImpl extends NSObject implements UITabBarControl // "< More" cannot be visible after clicking on the main tab bar buttons. let backToMoreWillBeVisible = false; owner._handleTwoNavigationBars(backToMoreWillBeVisible); + + if (tabBarController.viewControllers && tabBarController.viewControllers.containsObject(viewController)) { + const position = tabBarController.viewControllers.indexOfObject(viewController); + const tabStripItems = owner.tabStrip && owner.tabStrip.items; + + if (tabStripItems) { + tabStripItems[position]._emit(TabStripItem.tapEvent); + } + } } if ((tabBarController).selectedViewController === viewController) { @@ -115,6 +127,17 @@ class UITabBarControllerDelegateImpl extends NSObject implements UITabBarControl const owner = this._owner.get(); if (owner) { + if (tabBarController.viewControllers && tabBarController.viewControllers.containsObject(viewController)) { + const position = tabBarController.viewControllers.indexOfObject(viewController); + const prevPosition = owner.selectedIndex; + const tabStripItems = owner.tabStrip && owner.tabStrip.items; + + if (tabStripItems) { + tabStripItems[position]._emit(TabStripItem.selectEvent); + tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent); + } + } + owner._onViewControllerShown(viewController); } @@ -285,8 +308,68 @@ export class BottomNavigation extends TabNavigationBase { this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value; } - public setTabBarItemBackgroundColor(item: TabStripItem, value: UIColor | Color): void { - // TODO: implement for UITabBarItem + public getTabBarColor(): UIColor { + return this._ios.tabBar.tintColor; + } + + public setTabBarColor(value: UIColor | Color): void { + this._ios.tabBar.tintColor = value instanceof Color ? value.ios : value; + + const states = getTitleAttributesForStates(this.tabStrip); + + this.tabStrip.items.forEach((tabStripItem) => { + applyStatesToItem(tabStripItem.nativeView, states); + }); + } + + public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: UIColor | Color): void { + let bgView = (tabStripItem).bgView; + + if (!bgView) { + const index = (tabStripItem).index; + const width = this.tabStrip.nativeView.frame.size.width / this.tabStrip.items.length; + const frame = CGRectMake(width * index, 0, width, this.tabStrip.nativeView.frame.size.width); + bgView = UIView.alloc().initWithFrame(frame); + this.tabStrip.nativeView.insertSubviewAtIndex(bgView, 0); + (tabStripItem).bgView = bgView; + } + bgView.backgroundColor = value instanceof Color ? value.ios : value; + } + + public getTabBarItemColor(tabStripItem: TabStripItem): UIColor { + return this._ios.tabBar.tintColor; + } + + public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void { + const states = getTitleAttributesForStates(tabStripItem); + applyStatesToItem(tabStripItem.nativeView, states); + } + + public getTabBarItemFontSize(tabStripItem: TabStripItem): number { + return null; + } + + public setTabBarItemFontSize(tabStripItem: TabStripItem, value: number | { nativeSize: number }): void { + const states = getTitleAttributesForStates(tabStripItem); + applyStatesToItem(tabStripItem.nativeView, states); + } + + public getTabBarItemFontInternal(tabStripItem: TabStripItem): Font { + return null; + } + + public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { + const states = getTitleAttributesForStates(tabStripItem); + applyStatesToItem(tabStripItem.nativeView, states); + } + + public getTabBarItemTextTransform(tabStripItem: TabStripItem): TextTransform { + return null; + } + + public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void { + const title = getTransformedText(tabStripItem.title, value); + tabStripItem.nativeView.title = title; } public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void { @@ -417,6 +500,7 @@ export class BottomNavigation extends TabNavigationBase { applyStatesToItem(tabBarItem, states); controller.tabBarItem = tabBarItem; + (tabStripItem).index = i; tabStripItem.setNativeView(tabBarItem); } @@ -501,21 +585,21 @@ interface TabStates { selectedState?: any; } -function getTitleAttributesForStates(tabView: BottomNavigation): TabStates { +function getTitleAttributesForStates(view: View): TabStates { const result: TabStates = {}; const defaultTabItemFontSize = 10; - const tabItemFontSize = tabView.style.tabTextFontSize || defaultTabItemFontSize; - const font: UIFont = tabView.style.fontInternal.getUIFont(UIFont.systemFontOfSize(tabItemFontSize)); - const tabItemTextColor = tabView.style.tabTextColor; + const tabItemFontSize = view.style.fontSize || defaultTabItemFontSize; + const font: UIFont = view.style.fontInternal.getUIFont(UIFont.systemFontOfSize(tabItemFontSize)); + const tabItemTextColor = view.style.color; const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null; result.normalState = { [NSFontAttributeName]: font }; if (textColor) { result.normalState[UITextAttributeTextColor] = textColor; } - const tabSelectedItemTextColor = tabView.style.selectedTabTextColor; - const selectedTextColor = tabItemTextColor instanceof Color ? tabSelectedItemTextColor.ios : null; + const tabSelectedItemTextColor = view.style.color; + const selectedTextColor = tabSelectedItemTextColor instanceof Color ? tabSelectedItemTextColor.ios : null; result.selectedState = { [NSFontAttributeName]: font }; if (selectedTextColor) { result.selectedState[UITextAttributeTextColor] = selectedTextColor; diff --git a/tns-core-modules/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts b/tns-core-modules/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts index c4e96c2af..a91c54698 100644 --- a/tns-core-modules/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts +++ b/tns-core-modules/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts @@ -47,6 +47,14 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi } } + public requestLayout(): void { + // Default implementation for non View instances (like TabViewItem). + const parent = this.parent; + if (parent) { + parent.requestLayout(); + } + } + @PseudoClassHandler("normal", "highlighted", "pressed", "active") _updateTabStateChangeHandler(subscribe: boolean) { if (subscribe) {