diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts index 9c0f4b703..d19f2b19a 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts @@ -258,6 +258,9 @@ export class BottomNavigation extends TabNavigationBase { private _moreNavigationControllerDelegate: UINavigationControllerDelegateImpl; private _iconsCache = {}; + private _selectedItemColor: Color; + private _unSelectedItemColor: Color; + constructor() { super(); @@ -372,18 +375,20 @@ export class BottomNavigation extends TabNavigationBase { } public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void { - setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label, this.viewController.tabBar); + this.setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label); } public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void { - const image = this.getIcon(tabStripItem); + if (!this._unSelectedItemColor && !this._selectedItemColor) { + const image = this.getIcon(tabStripItem); - tabStripItem.nativeView.image = image; - tabStripItem.nativeView.selectedImage = image; + tabStripItem.nativeView.image = image; + tabStripItem.nativeView.selectedImage = image; + } } public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { - setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label, this.viewController.tabBar); + this.setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label); } public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void { @@ -400,6 +405,22 @@ export class BottomNavigation extends TabNavigationBase { this._ios.tabBar.tintColor = nativeColor; } + public getTabBarSelectedItemColor(): Color { + return this._selectedItemColor; + } + + public setTabBarSelectedItemColor(value: Color) { + this._selectedItemColor = value; + } + + public getTabBarUnSelectedItemColor(): Color { + return this._unSelectedItemColor; + } + + public setTabBarUnSelectedItemColor(value: Color) { + this._unSelectedItemColor = value; + } + public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void { const width = layout.getMeasureSpecSize(widthMeasureSpec); const widthMode = layout.getMeasureSpecMode(widthMeasureSpec); @@ -521,7 +542,7 @@ export class BottomNavigation extends TabNavigationBase { const tabBarItem = this.createTabBarItem(tabStripItem, i); updateTitleAndIconPositions(tabStripItem, tabBarItem, controller); - setViewTextAttributes(tabBarItem, tabStripItem.label, this.viewController.tabBar); + this.setViewTextAttributes(tabBarItem, tabStripItem.label); controller.tabBarItem = tabBarItem; tabStripItem._index = i; @@ -531,6 +552,8 @@ export class BottomNavigation extends TabNavigationBase { controllers.addObject(controller); }); + this._setItemImages(); + this._ios.viewControllers = controllers; this._ios.customizableViewControllers = null; @@ -538,6 +561,23 @@ export class BottomNavigation extends TabNavigationBase { this._ios.moreNavigationController.delegate = this._moreNavigationControllerDelegate; } + private _setItemImages() { + if (this._selectedItemColor || this._unSelectedItemColor) { + if (this.tabStrip && this.tabStrip.items) { + this.tabStrip.items.forEach(item => { + if (this._unSelectedItemColor && item.nativeView) { + item.nativeView.image = this.getIcon(item, this._unSelectedItemColor); + item.nativeView.tintColor = this._unSelectedItemColor; + } + if (this._selectedItemColor && item.nativeView) { + item.nativeView.selectedImage = this.getIcon(item, this._selectedItemColor); + item.nativeView.tintColor = this._selectedItemColor; + } + }); + } + } + } + private createTabBarItem(item: TabStripItem, index: number): UITabBarItem { let image: UIImage; let title: string; @@ -569,7 +609,7 @@ export class BottomNavigation extends TabNavigationBase { } } - private getIcon(tabStripItem: TabStripItem): UIImage { + private getIcon(tabStripItem: TabStripItem, color?: Color): UIImage { // Image and Label children of TabStripItem // take priority over its `iconSource` and `title` properties const iconSource = tabStripItem.image && tabStripItem.image.src; @@ -579,7 +619,9 @@ export class BottomNavigation extends TabNavigationBase { const target = tabStripItem.image; const font = target.style.fontInternal; - const color = target.style.color; + if (!color) { + color = target.style.color; + } const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(";"); let isFontIcon = false; @@ -688,33 +730,39 @@ export class BottomNavigation extends TabNavigationBase { this.setViewControllers(this.items); selectedIndexProperty.coerce(this); } -} -function setViewTextAttributes(item: UITabBarItem, view: View, tabBar: UITabBar): any { - if (!view) { - return null; - } + private setViewTextAttributes(item: UITabBarItem, view: View): any { + if (!view) { + return null; + } - const defaultTabItemFontSize = 10; - 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; - let attributes: any = { [NSFontAttributeName]: font }; - if (textColor) { - attributes[UITextAttributeTextColor] = textColor; - attributes[NSForegroundColorAttributeName] = textColor; - } + const defaultTabItemFontSize = 10; + 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; + let attributes: any = { [NSFontAttributeName]: font }; - item.setTitleTextAttributesForState(attributes, UIControlState.Selected); - item.setTitleTextAttributesForState(attributes, UIControlState.Normal); + if (!this._selectedItemColor && !this._unSelectedItemColor) { + if (textColor) { + attributes[UITextAttributeTextColor] = textColor; + attributes[NSForegroundColorAttributeName] = textColor; + } + } else { + this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor && this._unSelectedItemColor.ios; + this.viewController.tabBar.selectedImageTintColor = this._selectedItemColor && this._selectedItemColor.ios; + } - // there's a bug when setting the item color on ios 13 if there's no background set to the tabstrip - // https://books.google.bg/books?id=99_BDwAAQBAJ&q=tabBar.unselectedItemTintColor - // to fix the above issue we are applying the selected fix only for the case, when there is no background set - // in that case we have the following known issue: - // we will set the color to all unselected items, so you won't be able to set different colors for the different not selected items - if (!tabBar.barTintColor && attributes[UITextAttributeTextColor] && (majorVersion > 9)) { - tabBar.unselectedItemTintColor = attributes[UITextAttributeTextColor]; + item.setTitleTextAttributesForState(attributes, UIControlState.Selected); + item.setTitleTextAttributesForState(attributes, UIControlState.Normal); + + // there's a bug when setting the item color on ios 13 if there's no background set to the tabstrip + // https://books.google.bg/books?id=99_BDwAAQBAJ&q=tabBar.unselectedItemTintColor + // to fix the above issue we are applying the selected fix only for the case, when there is no background set + // in that case we have the following known issue: + // // we will set the color to all unselected items, so you won't be able to set different colors for the different not selected items + if (!this.viewController.tabBar.barTintColor && attributes[UITextAttributeTextColor] && (majorVersion > 9)) { + this.viewController.tabBar.unselectedItemTintColor = attributes[UITextAttributeTextColor]; + } } } \ No newline at end of file diff --git a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts index 7440e23e6..f418caeb8 100644 --- a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts +++ b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts @@ -4,7 +4,7 @@ */ /** */ import { - View, ViewBase, Property, CoercibleProperty, isIOS, AddArrayFromBuilder, AddChildFromBuilder, EventData + View, ViewBase, Property, CoercibleProperty, isIOS, AddArrayFromBuilder, AddChildFromBuilder, EventData, Color } from "../../core/view"; import { TabStrip } from "../tab-strip"; import { TabStripItem } from "../tab-strip-item"; @@ -150,6 +150,30 @@ export class TabNavigationBase extends View { */ setTabBarHighlightColor(value: any) + /** + * @private + * Method is intended to be overridden by inheritors and used as "protected" + */ + getTabBarSelectedItemColor(): any + + /** + * @private + * Method is intended to be overridden by inheritors and used as "protected" + */ + setTabBarSelectedItemColor(value: any) + + /** + * @private + * Method is intended to be overridden by inheritors and used as "protected" + */ + getTabBarUnSelectedItemColor(): any + + /** + * @private + * Method is intended to be overridden by inheritors and used as "protected" + */ + setTabBarUnSelectedItemColor(value: any) + /** * @private * Method is intended to be overridden by inheritors and used as "protected" diff --git a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts index 011d283ef..c053ddc66 100644 --- a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts +++ b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts @@ -150,6 +150,22 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti // overridden by inheritors } + public getTabBarSelectedItemColor(): any { + // overridden by inheritors + } + + public setTabBarSelectedItemColor(value: any) { + // overridden by inheritors + } + + public getTabBarUnSelectedItemColor(): any { + // overridden by inheritors + } + + public setTabBarUnSelectedItemColor(value: any) { + // overridden by inheritors + } + public getTabBarColor(): any { // overridden by inheritors return null; diff --git a/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.d.ts b/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.d.ts index 6df5c81cd..b21d31f97 100644 --- a/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.d.ts +++ b/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.d.ts @@ -32,6 +32,16 @@ export class TabStrip extends View { */ highlightColor: Color; + /** + * Gets or sets the color of the selected item in the tab strip. + */ + selectedItemColor: Color; + + /** + * Gets or sets the color of the non-selected items in the tab strip. + */ + unSelectedItemColor: Color; + /** * @private */ @@ -73,3 +83,5 @@ export interface TabStripItemEventData extends EventData { export const iosIconRenderingModeProperty: Property; export const isIconSizeFixedProperty: Property; +export const selectedItemColorProperty: Property; +export const unSelectedItemColorProperty: Property; \ No newline at end of file diff --git a/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts b/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts index 2b70e5439..5505a71de 100644 --- a/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts +++ b/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts @@ -17,6 +17,8 @@ export const traceCategory = "TabView"; // Place this on top because the webpack ts-loader doesn't work when export // is after reference export const highlightColorProperty = new Property({ name: "highlightColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); +export const selectedItemColorProperty = new Property({ name: "selectedItemColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); +export const unSelectedItemColorProperty = new Property({ name: "unSelectedItemColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); @CSSType("TabStrip") export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder { @@ -25,6 +27,8 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu public isIconSizeFixed: boolean; public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate"; public highlightColor: Color; + public selectedItemColor: Color; + public unSelectedItemColor: Color; public _hasImage: boolean; public _hasTitle: boolean; @@ -127,6 +131,28 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu return parent && parent.setTabBarHighlightColor(value); } + + [selectedItemColorProperty.getDefault](): Color { + const parent = this.parent; + + return parent && parent.getTabBarSelectedItemColor(); + } + [selectedItemColorProperty.setNative](value: Color) { + const parent = this.parent; + + return parent && parent.setTabBarSelectedItemColor(value); + } + + [unSelectedItemColorProperty.getDefault](): Color { + const parent = this.parent; + + return parent && parent.getTabBarUnSelectedItemColor(); + } + [unSelectedItemColorProperty.setNative](value: Color) { + const parent = this.parent; + + return parent && parent.setTabBarUnSelectedItemColor(value); + } } export interface TabStrip { @@ -150,3 +176,5 @@ export const isIconSizeFixedProperty = new Property({ isIconSizeFixedProperty.register(TabStrip); highlightColorProperty.register(TabStrip); +selectedItemColorProperty.register(TabStrip); +unSelectedItemColorProperty.register(TabStrip);