From c9bfec1cbe20c58c7a5925fa62d8908032c5a77f Mon Sep 17 00:00:00 2001 From: Martin Yankov Date: Wed, 23 Oct 2019 13:31:19 +0300 Subject: [PATCH] fix(ios-bot-nav): incorrect layout on orientation change (#7927) --- .../bottom-navigation.android.ts | 6 +-- .../bottom-navigation.ios.ts | 51 ++++++++++++------- .../tab-strip-item/tab-strip-item.d.ts | 6 +++ .../tab-strip-item/tab-strip-item.ts | 3 +- nativescript-core/ui/tabs/tabs.android.ts | 10 ++-- nativescript-core/ui/tabs/tabs.ios.ts | 8 +-- 6 files changed, 54 insertions(+), 30 deletions(-) diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts index 6601ecded..ba8f96ff7 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts @@ -547,8 +547,8 @@ export class BottomNavigation extends TabNavigationBase { } const tabItems = new Array(); - items.forEach((item, i, arr) => { - (item).index = i; + items.forEach((tabStripItem, i, arr) => { + tabStripItem._index = i; if (items[i]) { const tabItemSpec = this.createTabItemSpec(items[i]); tabItems.push(tabItemSpec); @@ -699,7 +699,7 @@ export class BottomNavigation extends TabNavigationBase { } public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void { - const index = (tabStripItem).index; + const index = tabStripItem._index; const tabBarItem = this._bottomNavigationBar.getViewForItemAt(index); const imgView = tabBarItem.getChildAt(0); const drawable = this.getIcon(tabStripItem); diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts index 2e77299d2..b5e06d67a 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts @@ -72,12 +72,19 @@ class UITabBarControllerImpl extends UITabBarController { public viewWillTransitionToSizeWithTransitionCoordinator(size: CGSize, coordinator: UIViewControllerTransitionCoordinator): void { super.viewWillTransitionToSizeWithTransitionCoordinator(size, coordinator); UIViewControllerTransitionCoordinator.prototype.animateAlongsideTransitionCompletion - .call(coordinator, null, () => { + .call(coordinator, () => { const owner = this._owner.get(); - if (owner && owner.items) { - // owner.items.forEach(tabItem => tabItem._updateTitleAndIconPositions()); TODO: + if (owner && owner.tabStrip && owner.tabStrip.items) { + const tabStrip = owner.tabStrip; + tabStrip.items.forEach(tabStripItem => { + updateBackgroundPositions(tabStrip, tabStripItem); + + const index = tabStripItem._index; + const tabBarItemController = this.viewControllers[index]; + updateTitleAndIconPositions(tabStripItem, tabBarItemController.tabBarItem, tabBarItemController); + }); } - }); + }, null); } // Mind implementation for other controllers @@ -213,6 +220,26 @@ class UINavigationControllerDelegateImpl extends NSObject implements UINavigatio } } +function updateBackgroundPositions(tabStrip: TabStrip, tabStripItem: TabStripItem) { + let bgView = (tabStripItem).bgView; + if (!bgView) { + const index = tabStripItem._index; + const width = tabStrip.nativeView.frame.size.width / tabStrip.items.length; + const frame = CGRectMake(width * index, 0, width, tabStrip.nativeView.frame.size.width); + bgView = UIView.alloc().initWithFrame(frame); + tabStrip.nativeView.insertSubviewAtIndex(bgView, 0); + (tabStripItem).bgView = bgView; + } else { + const index = tabStripItem._index; + const width = tabStrip.nativeView.frame.size.width / tabStrip.items.length; + const frame = CGRectMake(width * index, 0, width, tabStrip.nativeView.frame.size.width); + bgView.frame = frame; + } + + const backgroundColor = tabStripItem.style.backgroundColor; + bgView.backgroundColor = backgroundColor instanceof Color ? backgroundColor.ios : backgroundColor; +} + function updateTitleAndIconPositions(tabStripItem: TabStripItem, tabBarItem: UITabBarItem, controller: UIViewController) { if (!tabStripItem || !tabBarItem) { return; @@ -345,21 +372,11 @@ export class BottomNavigation extends TabNavigationBase { } public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: UIColor | Color): void { - if (!this.tabStrip) { + if (!this.tabStrip || !tabStripItem) { return; } - 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; + updateBackgroundPositions(this.tabStrip, tabStripItem); } public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void { @@ -509,7 +526,7 @@ export class BottomNavigation extends TabNavigationBase { applyStatesToItem(tabBarItem, states); controller.tabBarItem = tabBarItem; - (tabStripItem).index = i; + tabStripItem._index = i; tabStripItem.setNativeView(tabBarItem); } diff --git a/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.d.ts b/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.d.ts index c25b7d85f..b9b8d0721 100644 --- a/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.d.ts +++ b/nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.d.ts @@ -37,6 +37,12 @@ export class TabStripItem extends View { public static tapEvent: string; //@private + + /** + * @private + */ + _index: number; + /** * @private */ 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 913d11179..09ea676e7 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 @@ -26,6 +26,7 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi public image: Image; public label: Label; + public _index: number; private _title: string; private _iconSource: string; @@ -211,7 +212,7 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi const parent = this.parent; const tabStripParent = parent && parent.parent; - if ((this).index === tabStripParent.selectedIndex && + if (this._index === tabStripParent.selectedIndex && !(isIOS && tabStripParent instanceof Tabs)) { this._goToVisualState("highlighted"); } diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts index 18d1745a0..f2ee8e65b 100644 --- a/nativescript-core/ui/tabs/tabs.android.ts +++ b/nativescript-core/ui/tabs/tabs.android.ts @@ -617,10 +617,10 @@ export class Tabs extends TabsBase { } const tabItems = new Array(); - items.forEach((item: TabStripItem, i, arr) => { - (item).index = i; - const tabItemSpec = this.createTabItemSpec(item); - (item).tabItemSpec = tabItemSpec; + items.forEach((tabStripItem: TabStripItem, i, arr) => { + tabStripItem._index = i; + const tabItemSpec = this.createTabItemSpec(tabStripItem); + (tabStripItem).tabItemSpec = tabItemSpec; tabItems.push(tabItemSpec); }); @@ -808,7 +808,7 @@ export class Tabs extends TabsBase { } public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void { - const index = (tabStripItem).index; + const index = tabStripItem._index; const tabBarItem = this._tabsBar.getViewForItemAt(index); const imgView = tabBarItem.getChildAt(0); const drawable = this.getIcon(tabStripItem); diff --git a/nativescript-core/ui/tabs/tabs.ios.ts b/nativescript-core/ui/tabs/tabs.ios.ts index 274b203fd..d7d622371 100644 --- a/nativescript-core/ui/tabs/tabs.ios.ts +++ b/nativescript-core/ui/tabs/tabs.ios.ts @@ -848,11 +848,11 @@ export class Tabs extends TabsBase { const tabBarItems = []; - items.forEach((item: TabStripItem, i) => { - (item).index = i; - const tabBarItem = this.createTabBarItem(item, i); + items.forEach((tabStripItem: TabStripItem, i) => { + tabStripItem._index = i; + const tabBarItem = this.createTabBarItem(tabStripItem, i); tabBarItems.push(tabBarItem); - item.setNativeView(tabBarItem); + tabStripItem.setNativeView(tabBarItem); }); this.tabBarItems = tabBarItems;