From 32a55d35ae94d6ad17058eb88057ec95ebc7eeb2 Mon Sep 17 00:00:00 2001 From: Vasko Date: Tue, 31 Mar 2020 11:33:46 +0300 Subject: [PATCH] fix(tabs): dynamic styling fixes - iconSource selectedItemColor and unSelectedItemColor --- .../bottom-navigation.android.ts | 15 +++++++---- .../bottom-navigation.ios.ts | 26 +++++++++++++++++++ .../tab-navigation-base.d.ts | 6 +++++ .../tab-strip-item/tab-strip-item.ts | 2 +- nativescript-core/ui/tabs/tabs.android.ts | 15 +++++++---- nativescript-core/ui/tabs/tabs.ios.ts | 15 +++++++++++ 6 files changed, 68 insertions(+), 11 deletions(-) diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts index beef55fa5..c6421989f 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts @@ -752,18 +752,19 @@ export class BottomNavigation extends TabNavigationBase { this.setItemsColors(this.tabStrip.items); } - public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void { + private updateItem(tabStripItem: TabStripItem): void { // TODO: Should figure out a way to do it directly with the the nativeView const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem); const tabItemSpec = this.createTabItemSpec(tabStripItem); this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec); } + public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void { + this.updateItem(tabStripItem); + } + public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void { - // TODO: Should figure out a way to do it directly with the the nativeView - const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem); - const tabItemSpec = this.createTabItemSpec(tabStripItem); - this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec); + this.updateItem(tabStripItem); } public _setItemColor(tabStripItem: TabStripItem) { @@ -813,6 +814,10 @@ export class BottomNavigation extends TabNavigationBase { this.setIconColor(tabStripItem); } + public setTabBarIconSource(tabStripItem: TabStripItem, value: number | Color): void { + this.updateItem(tabStripItem); + } + public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { if (value.fontSize) { tabStripItem.nativeViewProtected.setTextSize(value.fontSize); diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts index 666b4e0ae..da5a095ff 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts @@ -377,6 +377,15 @@ export class BottomNavigation extends TabNavigationBase { this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label); } + private setItemColors(): void { + if (this._selectedItemColor) { + this.viewController.tabBar.selectedImageTintColor = this._selectedItemColor.ios; + } + if (this._unSelectedItemColor) { + this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios; + } + } + public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void { if (!this._unSelectedItemColor && !this._selectedItemColor) { const image = this.getIcon(tabStripItem); @@ -386,6 +395,10 @@ export class BottomNavigation extends TabNavigationBase { } } + public setTabBarIconSource(tabStripItem: TabStripItem, value: UIColor | Color): void { + this.updateItem(tabStripItem); + } + public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label); } @@ -410,6 +423,7 @@ export class BottomNavigation extends TabNavigationBase { public setTabBarSelectedItemColor(value: Color) { this._selectedItemColor = value; + this.setItemColors(); } public getTabBarUnSelectedItemColor(): Color { @@ -418,6 +432,7 @@ export class BottomNavigation extends TabNavigationBase { public setTabBarUnSelectedItemColor(value: Color) { this._unSelectedItemColor = value; + this.setItemColors(); } public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void { @@ -577,6 +592,17 @@ export class BottomNavigation extends TabNavigationBase { } } + private updateItem(tabStripItem: TabStripItem): void { + const tabBarItem = this.createTabBarItem(tabStripItem, tabStripItem._index); + const tabBarItemController = this._ios.viewControllers[tabStripItem._index]; + updateTitleAndIconPositions(tabStripItem, tabBarItem, tabBarItemController); + + this.setViewAttributes(tabBarItem, tabStripItem.label); + + tabBarItemController.tabBarItem = tabBarItem; + tabStripItem.setNativeView(tabBarItem); + } + private createTabBarItem(item: TabStripItem, index: number): UITabBarItem { let image: UIImage; let title: string; 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 8d623e7d0..54f9ecdf3 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 @@ -210,6 +210,12 @@ export class TabNavigationBase extends View { */ setTabBarIconColor(tabStripItem: TabStripItem, value: any): void + /** + * @private + * Method is intended to be overridden by inheritors and used as "protected" + */ + setTabBarIconSource(tabStripItem: TabStripItem, value: any): void + /** * @private * Method is intended to be overridden by inheritors and used as "protected" diff --git a/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts b/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts index d5d6db68c..40018cc8f 100644 --- a/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts +++ b/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts @@ -162,7 +162,7 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi const parent = this.parent; const tabStripParent = parent && parent.parent; - return tabStripParent && tabStripParent.setTabBarIconColor(this, args.value); + return tabStripParent && tabStripParent.setTabBarIconSource(this, args.value); }); this.image.on("srcChange", this._imageSrcHandler); } diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts index 5dde7d49a..cf9691a08 100644 --- a/nativescript-core/ui/tabs/tabs.android.ts +++ b/nativescript-core/ui/tabs/tabs.android.ts @@ -844,18 +844,19 @@ export class Tabs extends TabsBase { this.setItemsColors(this.tabStrip.items); } - public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void { + private updateItem(tabStripItem: TabStripItem): void { // TODO: Should figure out a way to do it directly with the the nativeView const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem); const tabItemSpec = this.createTabItemSpec(tabStripItem); this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec); } + public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void { + this.updateItem(tabStripItem); + } + public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void { - // TODO: Should figure out a way to do it directly with the the nativeView - const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem); - const tabItemSpec = this.createTabItemSpec(tabStripItem); - this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec); + this.updateItem(tabStripItem); } public _setItemColor(tabStripItem: TabStripItem) { @@ -905,6 +906,10 @@ export class Tabs extends TabsBase { this.setIconColor(tabStripItem); } + public setTabBarIconSource(tabStripItem: TabStripItem, value: number | Color): void { + this.updateItem(tabStripItem); + } + public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { if (value.fontSize) { tabStripItem.nativeViewProtected.setTextSize(value.fontSize); diff --git a/nativescript-core/ui/tabs/tabs.ios.ts b/nativescript-core/ui/tabs/tabs.ios.ts index 43fd51461..778dd1fbd 100644 --- a/nativescript-core/ui/tabs/tabs.ios.ts +++ b/nativescript-core/ui/tabs/tabs.ios.ts @@ -751,6 +751,17 @@ export class Tabs extends TabsBase { } } + private updateItem(tabStripItem: TabStripItem): void { + const tabBarItem = this.createTabBarItem(tabStripItem, tabStripItem._index); + const tabBarItemController = this._ios.viewControllers[tabStripItem._index]; + updateTitleAndIconPositions(tabStripItem, tabBarItem, tabBarItemController); + + this.setViewTextAttributes(tabStripItem.label); + + tabBarItemController.tabBarItem = tabBarItem; + tabStripItem.setNativeView(tabBarItem); + } + private createTabBarItem(item: TabStripItem, index: number): UITabBarItem { let image: UIImage; let title: string; @@ -966,6 +977,10 @@ export class Tabs extends TabsBase { this.setIconColor(tabStripItem, true); } + public setTabBarIconSource(tabStripItem: TabStripItem, value: UIColor | Color): void { + this.updateItem(tabStripItem); + } + public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { this.setViewTextAttributes(tabStripItem.label); }