javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 02:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ios-bot-nav): incorrect layout on orientation change (#7927)

Browse Source
This commit is contained in:
Martin Yankov
2019-10-23 13:31:19 +03:00
committed by Manol Donev
parent 7e87fe0018
commit c9bfec1cbe
6 changed files with 54 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
View File

@ -547,8 +547,8 @@ export class BottomNavigation extends TabNavigationBase {
} }
const tabItems = new Array<org.nativescript.widgets.TabItemSpec>(); const tabItems = new Array<org.nativescript.widgets.TabItemSpec>();
items.forEach((item, i, arr) => { items.forEach((tabStripItem, i, arr) => {
(<any>item).index = i; tabStripItem._index = i;
if (items[i]) { if (items[i]) {
const tabItemSpec = this.createTabItemSpec(items[i]); const tabItemSpec = this.createTabItemSpec(items[i]);
tabItems.push(tabItemSpec); tabItems.push(tabItemSpec);
@ -699,7 +699,7 @@ export class BottomNavigation extends TabNavigationBase {
} }
public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void { public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void {
const index = (<any>tabStripItem).index; const index = tabStripItem._index;
const tabBarItem = this._bottomNavigationBar.getViewForItemAt(index); const tabBarItem = this._bottomNavigationBar.getViewForItemAt(index);
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0); const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
const drawable = this.getIcon(tabStripItem); const drawable = this.getIcon(tabStripItem);

51
nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts
View File

@ -72,12 +72,19 @@ class UITabBarControllerImpl extends UITabBarController {
public viewWillTransitionToSizeWithTransitionCoordinator(size: CGSize, coordinator: UIViewControllerTransitionCoordinator): void { public viewWillTransitionToSizeWithTransitionCoordinator(size: CGSize, coordinator: UIViewControllerTransitionCoordinator): void {
super.viewWillTransitionToSizeWithTransitionCoordinator(size, coordinator); super.viewWillTransitionToSizeWithTransitionCoordinator(size, coordinator);
UIViewControllerTransitionCoordinator.prototype.animateAlongsideTransitionCompletion UIViewControllerTransitionCoordinator.prototype.animateAlongsideTransitionCompletion
.call(coordinator, null, () => { .call(coordinator, () => {
const owner = this._owner.get(); const owner = this._owner.get();
if (owner && owner.items) { if (owner && owner.tabStrip && owner.tabStrip.items) {
// owner.items.forEach(tabItem => tabItem._updateTitleAndIconPositions()); TODO: 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 // Mind implementation for other controllers
@ -213,6 +220,26 @@ class UINavigationControllerDelegateImpl extends NSObject implements UINavigatio
} }
} }
function updateBackgroundPositions(tabStrip: TabStrip, tabStripItem: TabStripItem) {
let bgView = (<any>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);
(<any>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) { function updateTitleAndIconPositions(tabStripItem: TabStripItem, tabBarItem: UITabBarItem, controller: UIViewController) {
if (!tabStripItem || !tabBarItem) { if (!tabStripItem || !tabBarItem) {
return; return;
@ -345,21 +372,11 @@ export class BottomNavigation extends TabNavigationBase {
} }
public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: UIColor | Color): void { public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
if (!this.tabStrip) { if (!this.tabStrip || !tabStripItem) {
return; return;
} }
let bgView = (<any>tabStripItem).bgView; updateBackgroundPositions(this.tabStrip, tabStripItem);
if (!bgView) {
const index = (<any>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);
(<any>tabStripItem).bgView = bgView;
}
bgView.backgroundColor = value instanceof Color ? value.ios : value;
} }
public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void { public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
@ -509,7 +526,7 @@ export class BottomNavigation extends TabNavigationBase {
applyStatesToItem(tabBarItem, states); applyStatesToItem(tabBarItem, states);
controller.tabBarItem = tabBarItem; controller.tabBarItem = tabBarItem;
(<any>tabStripItem).index = i; tabStripItem._index = i;
tabStripItem.setNativeView(tabBarItem); tabStripItem.setNativeView(tabBarItem);
} }

6
nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.d.ts vendored
View File

@ -37,6 +37,12 @@ export class TabStripItem extends View {
public static tapEvent: string; public static tapEvent: string;
//@private //@private
/**
* @private
*/
_index: number;
/** /**
* @private * @private
*/ */

3
nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts
View File

@ -26,6 +26,7 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
public image: Image; public image: Image;
public label: Label; public label: Label;
public _index: number;
private _title: string; private _title: string;
private _iconSource: string; private _iconSource: string;
@ -211,7 +212,7 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
const parent = <TabStrip>this.parent; const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent; const tabStripParent = parent && <TabNavigationBase>parent.parent;
if ((<any>this).index === tabStripParent.selectedIndex && if (this._index === tabStripParent.selectedIndex &&
!(isIOS && tabStripParent instanceof Tabs)) { !(isIOS && tabStripParent instanceof Tabs)) {
this._goToVisualState("highlighted"); this._goToVisualState("highlighted");
} }

10
nativescript-core/ui/tabs/tabs.android.ts
View File

@ -617,10 +617,10 @@ export class Tabs extends TabsBase {
} }
const tabItems = new Array<org.nativescript.widgets.TabItemSpec>(); const tabItems = new Array<org.nativescript.widgets.TabItemSpec>();
items.forEach((item: TabStripItem, i, arr) => { items.forEach((tabStripItem: TabStripItem, i, arr) => {
(<any>item).index = i; tabStripItem._index = i;
const tabItemSpec = this.createTabItemSpec(item); const tabItemSpec = this.createTabItemSpec(tabStripItem);
(<any>item).tabItemSpec = tabItemSpec; (<any>tabStripItem).tabItemSpec = tabItemSpec;
tabItems.push(tabItemSpec); tabItems.push(tabItemSpec);
}); });
@ -808,7 +808,7 @@ export class Tabs extends TabsBase {
} }
public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void { public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void {
const index = (<any>tabStripItem).index; const index = tabStripItem._index;
const tabBarItem = this._tabsBar.getViewForItemAt(index); const tabBarItem = this._tabsBar.getViewForItemAt(index);
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0); const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
const drawable = this.getIcon(tabStripItem); const drawable = this.getIcon(tabStripItem);

8
nativescript-core/ui/tabs/tabs.ios.ts
View File

@ -848,11 +848,11 @@ export class Tabs extends TabsBase {
const tabBarItems = []; const tabBarItems = [];
items.forEach((item: TabStripItem, i) => { items.forEach((tabStripItem: TabStripItem, i) => {
(<any>item).index = i; tabStripItem._index = i;
const tabBarItem = this.createTabBarItem(item, i); const tabBarItem = this.createTabBarItem(tabStripItem, i);
tabBarItems.push(tabBarItem); tabBarItems.push(tabBarItem);
item.setNativeView(tabBarItem); tabStripItem.setNativeView(tabBarItem);
}); });
this.tabBarItems = tabBarItems; this.tabBarItems = tabBarItems;