Skip to content

Commit bbde3cb

Browse files
vchimevADjenkov
vchimev
authored and
ADjenkov
committed
feat(ios-tabs): tab bar item appearance
Implements #7436 and NativeScript/nativescript-angular#1884.
1 parent 7098a14 commit bbde3cb

1 file changed

Lines changed: 45 additions & 33 deletions

File tree

‎tns-core-modules/ui/tabs/tabs.ios.ts‎

Lines changed: 45 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -81,23 +81,11 @@ class UIPageViewControllerImpl extends UIPageViewController {
8181
tabBar.items = NSArray.arrayWithArray(tabBarItems);
8282
}
8383

84-
// tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
85-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
86-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
87-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
88-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
89-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
90-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
91-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
92-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
93-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
94-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
95-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
96-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
97-
// ]);
98-
9984
tabBar.delegate = this.tabBarDelegate = MDCTabBarDelegateImpl.initWithOwner(new WeakRef(owner));
100-
tabBar.itemAppearance = MDCTabBarItemAppearance.Titles;
85+
// Initially set `itemAppearance` to TitledImages.
86+
// Reassign if needed when items available.
87+
// Other combinations do not work.
88+
tabBar.itemAppearance = MDCTabBarItemAppearance.TitledImages;
10189
tabBar.tintColor = UIColor.blueColor;
10290
tabBar.barTintColor = UIColor.whiteColor;
10391
tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal);
@@ -569,6 +557,8 @@ export class Tabs extends TabsBase {
569557
private _delegate: UIPageViewControllerDelegateImpl;
570558
// private _moreNavigationControllerDelegate: UINavigationControllerDelegateImpl;
571559
private _iconsCache = {};
560+
private _hasImage;
561+
private _hasTitle;
572562

573563
constructor() {
574564
super();
@@ -856,33 +846,20 @@ export class Tabs extends TabsBase {
856846
public setTabStripItems(items: Array<TabStripItem>) {
857847
const tabBarItems = [];
858848

859-
items.forEach((item: TabStripItem, i, arr) => {
860-
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(item.title, null, 0);
849+
items.forEach((item: TabStripItem, i) => {
850+
const tabBarItem = this.createTabItemSpec(item, i);
861851
tabBarItems.push(tabBarItem);
862852
item.setNativeView(tabBarItem);
863853
});
854+
864855
this.tabBarItems = tabBarItems;
865856

866857
if (this.viewController && this.viewController.tabBar) {
858+
this.viewController.tabBar.itemAppearance = this._getTabBarItemAppearance();
867859
this.viewController.tabBar.items = NSArray.arrayWithArray(tabBarItems);
868860
this.tabStrip.setNativeView(this.viewController.tabBar);
869861
}
870862

871-
// tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
872-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
873-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
874-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
875-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
876-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
877-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
878-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
879-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
880-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
881-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
882-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
883-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
884-
// ]);
885-
886863
// const length = items ? items.length : 0;
887864
// if (length === 0) {
888865
// this._tabLayout.setItems(null, null);
@@ -905,6 +882,41 @@ export class Tabs extends TabsBase {
905882
// });
906883
}
907884

885+
private createTabItemSpec(item: TabStripItem, index: number): UITabBarItem {
886+
let image: UIImage;
887+
let title: string;
888+
889+
// Image and Label children of TabStripItem
890+
// take priority over its `iconSource` and `title` properties
891+
image = item.image ? this._getIcon(item.image.src) : this._getIcon(item.iconSource);
892+
title = item.label ? item.label.text : item.title;
893+
894+
if (!this.viewController.tabBar._hasImage) {
895+
this.viewController.tabBar._hasImage = !!image;
896+
}
897+
898+
if (!this.viewController.tabBar._hasTitle) {
899+
this.viewController.tabBar._hasTitle = !!title;
900+
}
901+
902+
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(title, image, index);
903+
904+
return tabBarItem;
905+
}
906+
907+
private _getTabBarItemAppearance(): MDCTabBarItemAppearance {
908+
let itemAppearance;
909+
if (this.viewController.tabBar._hasImage && this.viewController.tabBar._hasTitle) {
910+
itemAppearance = MDCTabBarItemAppearance.TitledImages;
911+
} else if (this.viewController.tabBar._hasImage) {
912+
itemAppearance = MDCTabBarItemAppearance.Images;
913+
} else {
914+
itemAppearance = MDCTabBarItemAppearance.Titles;
915+
}
916+
917+
return itemAppearance;
918+
}
919+
908920
private _getIconRenderingMode(): UIImageRenderingMode {
909921
return UIImageRenderingMode.AlwaysOriginal;
910922
}

0 commit comments

Comments
 (0)