Skip to content

Commit c9bfec1

Browse files
MartoYankovmanoldonev
MartoYankov
authored and
manoldonev
committed
fix(ios-bot-nav): incorrect layout on orientation change (#7927)
1 parent 7e87fe0 commit c9bfec1

6 files changed

Lines changed: 54 additions & 30 deletions

File tree

‎nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -547,8 +547,8 @@ export class BottomNavigation extends TabNavigationBase {
547547
}
548548

549549
const tabItems = new Array<org.nativescript.widgets.TabItemSpec>();
550-
items.forEach((item, i, arr) => {
551-
(<any>item).index = i;
550+
items.forEach((tabStripItem, i, arr) => {
551+
tabStripItem._index = i;
552552
if (items[i]) {
553553
const tabItemSpec = this.createTabItemSpec(items[i]);
554554
tabItems.push(tabItemSpec);
@@ -699,7 +699,7 @@ export class BottomNavigation extends TabNavigationBase {
699699
}
700700

701701
public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void {
702-
const index = (<any>tabStripItem).index;
702+
const index = tabStripItem._index;
703703
const tabBarItem = this._bottomNavigationBar.getViewForItemAt(index);
704704
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
705705
const drawable = this.getIcon(tabStripItem);

‎nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -72,12 +72,19 @@ class UITabBarControllerImpl extends UITabBarController {
7272
public viewWillTransitionToSizeWithTransitionCoordinator(size: CGSize, coordinator: UIViewControllerTransitionCoordinator): void {
7373
super.viewWillTransitionToSizeWithTransitionCoordinator(size, coordinator);
7474
UIViewControllerTransitionCoordinator.prototype.animateAlongsideTransitionCompletion
75-
.call(coordinator, null, () => {
75+
.call(coordinator, () => {
7676
const owner = this._owner.get();
77-
if (owner && owner.items) {
78-
// owner.items.forEach(tabItem => tabItem._updateTitleAndIconPositions()); TODO:
77+
if (owner && owner.tabStrip && owner.tabStrip.items) {
78+
const tabStrip = owner.tabStrip;
79+
tabStrip.items.forEach(tabStripItem => {
80+
updateBackgroundPositions(tabStrip, tabStripItem);
81+
82+
const index = tabStripItem._index;
83+
const tabBarItemController = this.viewControllers[index];
84+
updateTitleAndIconPositions(tabStripItem, tabBarItemController.tabBarItem, tabBarItemController);
85+
});
7986
}
80-
});
87+
}, null);
8188
}
8289

8390
// Mind implementation for other controllers
@@ -213,6 +220,26 @@ class UINavigationControllerDelegateImpl extends NSObject implements UINavigatio
213220
}
214221
}
215222

223+
function updateBackgroundPositions(tabStrip: TabStrip, tabStripItem: TabStripItem) {
224+
let bgView = (<any>tabStripItem).bgView;
225+
if (!bgView) {
226+
const index = tabStripItem._index;
227+
const width = tabStrip.nativeView.frame.size.width / tabStrip.items.length;
228+
const frame = CGRectMake(width * index, 0, width, tabStrip.nativeView.frame.size.width);
229+
bgView = UIView.alloc().initWithFrame(frame);
230+
tabStrip.nativeView.insertSubviewAtIndex(bgView, 0);
231+
(<any>tabStripItem).bgView = bgView;
232+
} else {
233+
const index = tabStripItem._index;
234+
const width = tabStrip.nativeView.frame.size.width / tabStrip.items.length;
235+
const frame = CGRectMake(width * index, 0, width, tabStrip.nativeView.frame.size.width);
236+
bgView.frame = frame;
237+
}
238+
239+
const backgroundColor = tabStripItem.style.backgroundColor;
240+
bgView.backgroundColor = backgroundColor instanceof Color ? backgroundColor.ios : backgroundColor;
241+
}
242+
216243
function updateTitleAndIconPositions(tabStripItem: TabStripItem, tabBarItem: UITabBarItem, controller: UIViewController) {
217244
if (!tabStripItem || !tabBarItem) {
218245
return;
@@ -345,21 +372,11 @@ export class BottomNavigation extends TabNavigationBase {
345372
}
346373

347374
public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
348-
if (!this.tabStrip) {
375+
if (!this.tabStrip || !tabStripItem) {
349376
return;
350377
}
351378

352-
let bgView = (<any>tabStripItem).bgView;
353-
if (!bgView) {
354-
const index = (<any>tabStripItem).index;
355-
const width = this.tabStrip.nativeView.frame.size.width / this.tabStrip.items.length;
356-
const frame = CGRectMake(width * index, 0, width, this.tabStrip.nativeView.frame.size.width);
357-
bgView = UIView.alloc().initWithFrame(frame);
358-
this.tabStrip.nativeView.insertSubviewAtIndex(bgView, 0);
359-
(<any>tabStripItem).bgView = bgView;
360-
}
361-
362-
bgView.backgroundColor = value instanceof Color ? value.ios : value;
379+
updateBackgroundPositions(this.tabStrip, tabStripItem);
363380
}
364381

365382
public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
@@ -509,7 +526,7 @@ export class BottomNavigation extends TabNavigationBase {
509526
applyStatesToItem(tabBarItem, states);
510527

511528
controller.tabBarItem = tabBarItem;
512-
(<any>tabStripItem).index = i;
529+
tabStripItem._index = i;
513530
tabStripItem.setNativeView(tabBarItem);
514531
}
515532

‎nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,12 @@ export class TabStripItem extends View {
3737
public static tapEvent: string;
3838

3939
//@private
40+
41+
/**
42+
* @private
43+
*/
44+
_index: number;
45+
4046
/**
4147
* @private
4248
*/

‎nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
2626

2727
public image: Image;
2828
public label: Label;
29+
public _index: number;
2930

3031
private _title: string;
3132
private _iconSource: string;
@@ -211,7 +212,7 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
211212

212213
const parent = <TabStrip>this.parent;
213214
const tabStripParent = parent && <TabNavigationBase>parent.parent;
214-
if ((<any>this).index === tabStripParent.selectedIndex &&
215+
if (this._index === tabStripParent.selectedIndex &&
215216
!(isIOS && tabStripParent instanceof Tabs)) {
216217
this._goToVisualState("highlighted");
217218
}

‎nativescript-core/ui/tabs/tabs.android.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -617,10 +617,10 @@ export class Tabs extends TabsBase {
617617
}
618618

619619
const tabItems = new Array<org.nativescript.widgets.TabItemSpec>();
620-
items.forEach((item: TabStripItem, i, arr) => {
621-
(<any>item).index = i;
622-
const tabItemSpec = this.createTabItemSpec(item);
623-
(<any>item).tabItemSpec = tabItemSpec;
620+
items.forEach((tabStripItem: TabStripItem, i, arr) => {
621+
tabStripItem._index = i;
622+
const tabItemSpec = this.createTabItemSpec(tabStripItem);
623+
(<any>tabStripItem).tabItemSpec = tabItemSpec;
624624
tabItems.push(tabItemSpec);
625625
});
626626

@@ -808,7 +808,7 @@ export class Tabs extends TabsBase {
808808
}
809809

810810
public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void {
811-
const index = (<any>tabStripItem).index;
811+
const index = tabStripItem._index;
812812
const tabBarItem = this._tabsBar.getViewForItemAt(index);
813813
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
814814
const drawable = this.getIcon(tabStripItem);

‎nativescript-core/ui/tabs/tabs.ios.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -848,11 +848,11 @@ export class Tabs extends TabsBase {
848848

849849
const tabBarItems = [];
850850

851-
items.forEach((item: TabStripItem, i) => {
852-
(<any>item).index = i;
853-
const tabBarItem = this.createTabBarItem(item, i);
851+
items.forEach((tabStripItem: TabStripItem, i) => {
852+
tabStripItem._index = i;
853+
const tabBarItem = this.createTabBarItem(tabStripItem, i);
854854
tabBarItems.push(tabBarItem);
855-
item.setNativeView(tabBarItem);
855+
tabStripItem.setNativeView(tabBarItem);
856856
});
857857

858858
this.tabBarItems = tabBarItems;

0 commit comments

Comments
 (0)