mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
fix(tabs): tab bar not visible when nested in layout (#7544)
This commit is contained in:
Martin Yankov
@@ -27,6 +27,8 @@ export function loadExamples() {
|
||||
examples.set("tabs-position", "tabs/tabs-position-page");
|
||||
examples.set("tabs-binding", "tabs/tabs-binding-page");
|
||||
examples.set("font-icons", "tabs/font-icons-page");
|
||||
examples.set("nested-layout", "tabs/nested-layout-page");
|
||||
examples.set("nested-bottom-navigation", "tabs/nested-bottom-navigation-page");
|
||||
|
||||
return examples;
|
||||
}
|
||||
|
||||
39
e2e/ui-tests-app/app/tabs/nested-bottom-navigation-page.xml
Normal file
39
e2e/ui-tests-app/app/tabs/nested-bottom-navigation-page.xml
Normal file
@@ -0,0 +1,39 @@
|
||||
<Page class="page">
|
||||
|
||||
<ActionBar title="Tabs nested in Layout" icon="" class="action-bar">
|
||||
</ActionBar>
|
||||
|
||||
<BottomNavigation>
|
||||
<TabStrip>
|
||||
<TabStripItem title="First"></TabStripItem>
|
||||
<TabStripItem title="Second"></TabStripItem>
|
||||
</TabStrip>
|
||||
|
||||
<TabContentItem>
|
||||
<Tabs>
|
||||
<TabStrip backgroundColor="palevioletred">
|
||||
<TabStripItem title="First"></TabStripItem>
|
||||
<TabStripItem title="Second"></TabStripItem>
|
||||
</TabStrip>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout backgroundColor="skyblue">
|
||||
<Label text="First View"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout backgroundColor="gold">
|
||||
<Label text="Second View" />
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
</Tabs>
|
||||
</TabContentItem>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="Second View" />
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
</BottomNavigation>
|
||||
</Page>
|
||||
26
e2e/ui-tests-app/app/tabs/nested-layout-page.xml
Normal file
26
e2e/ui-tests-app/app/tabs/nested-layout-page.xml
Normal file
@@ -0,0 +1,26 @@
|
||||
<Page class="page">
|
||||
|
||||
<ActionBar title="Tabs nested in Layout" icon="" class="action-bar">
|
||||
</ActionBar>
|
||||
|
||||
<GridLayout>
|
||||
<Tabs>
|
||||
<TabStrip backgroundColor="palevioletred">
|
||||
<TabStripItem title="First"></TabStripItem>
|
||||
<TabStripItem title="Second"></TabStripItem>
|
||||
</TabStrip>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout backgroundColor="skyblue">
|
||||
<Label text="First View" />
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
|
||||
<TabContentItem>
|
||||
<GridLayout backgroundColor="gold">
|
||||
<Label text="Second View" />
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
</Tabs>
|
||||
</GridLayout>
|
||||
</Page>
|
||||
@@ -3,87 +3,34 @@
|
||||
<ActionBar title="Tabs" icon="" class="action-bar">
|
||||
</ActionBar>
|
||||
|
||||
<!-- w/o TabStrip -->
|
||||
<!-- <BottomNavigation>
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="First View"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
<TabContentItem>
|
||||
<GridLayout>
|
||||
<Label text="Second View"/>
|
||||
</GridLayout>
|
||||
</TabContentItem>
|
||||
</BottomNavigation> -->
|
||||
|
||||
<!-- w/ TabStrip -->
|
||||
<Tabs id="tabsNav" automationText="tabNavigation" >
|
||||
<TabStrip>
|
||||
<Tabs id="tabsNav" automationText="tabNavigation">
|
||||
<TabStrip backgroundColor="palevioletred">
|
||||
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
|
||||
<TabStripItem>
|
||||
<!-- <Image src="res://icon" /> -->
|
||||
<Label text="News" />
|
||||
</TabStripItem>
|
||||
<!-- <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem> -->
|
||||
<TabStripItem>
|
||||
<!-- <Image src="res://icon" /> -->
|
||||
<Label text="Places" />
|
||||
</TabStripItem>
|
||||
<!-- <TabStripItem title="Music" iconSource="res://icon"></TabStripItem> -->
|
||||
</TabStrip>
|
||||
|
||||
<TabContentItem>
|
||||
<StackLayout backgroundColor="blue">
|
||||
<StackLayout backgroundColor="skyblue">
|
||||
<Label text="First View"/>
|
||||
<Button tap="goToSecond" text="go to second" />
|
||||
</StackLayout>
|
||||
</TabContentItem>
|
||||
<TabContentItem>
|
||||
<StackLayout backgroundColor="red">
|
||||
<StackLayout backgroundColor="gold">
|
||||
<Label text="Second View"/>
|
||||
<Button tap="goToFirst" text="go to first" />
|
||||
</StackLayout>
|
||||
</TabContentItem>
|
||||
<TabContentItem>
|
||||
<StackLayout backgroundColor="green">
|
||||
<StackLayout backgroundColor="olive">
|
||||
<Label text="First View"/>
|
||||
<Button tap="goToSecond" text="go to second" />
|
||||
</StackLayout>
|
||||
</TabContentItem>
|
||||
<!-- <TabContentItem>
|
||||
<StackLayout>
|
||||
<Label text="Second View"/>
|
||||
<Button tap="goToFirst" text="go to first" />
|
||||
</StackLayout>
|
||||
</TabContentItem>
|
||||
<TabContentItem>
|
||||
<StackLayout>
|
||||
<Label text="First View"/>
|
||||
<Button tap="goToSecond" text="go to second" />
|
||||
</StackLayout>
|
||||
</TabContentItem> -->
|
||||
</Tabs>
|
||||
|
||||
<!-- =============================================================================================== -->
|
||||
|
||||
<!-- Bottom Bar with TabStrip -->
|
||||
<!-- <BottomNavigationBar>
|
||||
<TabStrip>
|
||||
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
|
||||
<TabStripItem>
|
||||
<Image src="res://icon" />
|
||||
<Label text="Second Tab" />
|
||||
</TabStripItem>
|
||||
</TabStrip>
|
||||
</BottomNavigationBar> -->
|
||||
|
||||
<!-- Bottom Bar w/o TabStrip -->
|
||||
<!-- <BottomNavigationBar>
|
||||
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
|
||||
<TabStripItem>
|
||||
<Image src="res://icon" />
|
||||
<Label text="Second Tab" />
|
||||
</TabStripItem>
|
||||
</BottomNavigationBar> -->
|
||||
</Page>
|
||||
@@ -111,14 +111,23 @@ class UIPageViewControllerImpl extends UIPageViewController {
|
||||
|
||||
public viewDidLayoutSubviews(): void {
|
||||
super.viewDidLayoutSubviews();
|
||||
|
||||
const owner = this._owner.get();
|
||||
if (!owner) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tabsPosition = owner.tabsPosition;
|
||||
const parent = owner.parent;
|
||||
|
||||
let tabBarTop = this.view.safeAreaInsets.top;
|
||||
let tabBarHeight = this.tabBar.frame.size.height;
|
||||
let scrollViewTop = this.tabBar.frame.size.height;
|
||||
let scrollViewHeight = this.view.bounds.size.height - this.tabBar.frame.size.height + this.view.safeAreaInsets.bottom;
|
||||
let scrollViewHeight = this.view.bounds.size.height - this.tabBar.frame.size.height;
|
||||
|
||||
if (parent) {
|
||||
// TODO: Figure out a better way to handle ViewController nesting/Safe Area nesting
|
||||
tabBarTop = Math.max(this.view.safeAreaInsets.top, owner.parent.nativeView.safeAreaInsets.top);
|
||||
}
|
||||
|
||||
if (tabsPosition === "bottom") {
|
||||
tabBarTop = this.view.frame.size.height - this.tabBar.frame.size.height - this.view.safeAreaInsets.bottom;
|
||||
@@ -126,45 +135,7 @@ class UIPageViewControllerImpl extends UIPageViewController {
|
||||
scrollViewHeight = this.view.frame.size.height - this.view.safeAreaInsets.bottom;
|
||||
}
|
||||
|
||||
this.tabBar.frame = CGRectMake(this.view.safeAreaInsets.left, tabBarTop, this.tabBar.frame.size.width, tabBarHeight); //this.view.safeAreaLayoutGuide.layoutFrame;
|
||||
// this.additionalSafeAreaInsets = new UIEdgeInsets({ top: this.tabBar.frame.size.height, left: 0, bottom: 0, right: 0 });
|
||||
// const tabBar = MDCTabBar.alloc().initWithFrame(this.view.safeAreaLayoutGuide.layoutFrame);
|
||||
|
||||
// tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// ]);
|
||||
|
||||
// tabBar.itemAppearance = MDCTabBarItemAppearance.Titles;
|
||||
// tabBar.tintColor = UIColor.greenColor;
|
||||
// tabBar.barTintColor = UIColor.yellowColor;
|
||||
// tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal);
|
||||
// tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
|
||||
// tabBar.sizeToFit();
|
||||
// this.view.addSubview(tabBar);
|
||||
|
||||
// this.view.bringSubviewToFront(tabBar);
|
||||
|
||||
// const tabBar = MDCTabBar.alloc().initWithFrame(this.view.bounds);
|
||||
// tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
|
||||
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0)
|
||||
// ]);
|
||||
|
||||
// tabBar.itemAppearance = MDCTabBarItemAppearance.Titles;
|
||||
// tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
|
||||
// tabBar.sizeToFit();
|
||||
// this.view.addSubview(tabBar);
|
||||
this.tabBar.frame = CGRectMake(this.view.safeAreaInsets.left, tabBarTop, this.tabBar.frame.size.width, tabBarHeight);
|
||||
|
||||
const subViews: NSArray<UIView> = this.view.subviews;
|
||||
let scrollView: UIScrollView = null;
|
||||
@@ -192,47 +163,6 @@ class UIPageViewControllerImpl extends UIPageViewController {
|
||||
|
||||
scrollView.frame = CGRectMake(this.view.safeAreaInsets.left, scrollViewTop, this.view.bounds.size.width, scrollViewHeight); //this.view.bounds;
|
||||
}
|
||||
|
||||
// if (mdcBar) {
|
||||
// mdcBar.frame = this.view.bounds;
|
||||
// }
|
||||
|
||||
// const owner = this.owner.get();
|
||||
// if (owner) {
|
||||
// if (majorVersion >= 11) {
|
||||
// // Handle nested UILayoutViewController safe area application.
|
||||
// // Currently, UILayoutViewController can be nested only in a TabView.
|
||||
// // The TabView itself is handled by the OS, so we check the TabView's parent (usually a Page, but can be a Layout).
|
||||
// const tabViewItem = owner.parent;
|
||||
// const tabView = tabViewItem && tabViewItem.parent;
|
||||
// let parent = tabView && tabView.parent;
|
||||
|
||||
// // Handle Angular scenario where TabView is in a ProxyViewContainer
|
||||
// // It is possible to wrap components in ProxyViewContainers indefinitely
|
||||
// // Not using instanceof ProxyViewContainer to avoid circular dependency
|
||||
// // TODO: Try moving UILayoutViewController out of view module
|
||||
// while (parent && !parent.nativeViewProtected) {
|
||||
// parent = parent.parent;
|
||||
// }
|
||||
|
||||
// if (parent) {
|
||||
// const parentPageInsetsTop = parent.nativeViewProtected.safeAreaInsets.top;
|
||||
// const currentInsetsTop = this.view.safeAreaInsets.top;
|
||||
// const additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);
|
||||
|
||||
// const parentPageInsetsBottom = parent.nativeViewProtected.safeAreaInsets.bottom;
|
||||
// const currentInsetsBottom = this.view.safeAreaInsets.bottom;
|
||||
// const additionalInsetsBottom = Math.max(parentPageInsetsBottom - currentInsetsBottom, 0);
|
||||
|
||||
// if (additionalInsetsTop > 0 || additionalInsetsBottom > 0) {
|
||||
// const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: additionalInsetsBottom, right: 0 });
|
||||
// this.additionalSafeAreaInsets = additionalInsets;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// layoutView(this, owner);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user