8000 fix(tabs): tab bar not visible when nested in layout (#7544) · NativeScript/NativeScript@f00b370 · GitHub
[go: up one dir, main page]

Skip to content

Commit f00b370

Browse files
authored
fix(tabs): tab bar not visible when nested in layout (#7544)
1 parent 9fd5ddc commit f00b370

File tree

5 files changed

+84
-140
lines changed

5 files changed

+84
-140
lines changed

e2e/ui-tests-app/app/tabs/main-page.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export function loadExamples() {
2727
examples.set("tabs-position", "tabs/tabs-position-page");
2828
examples.set("tabs-binding", "tabs/tabs-binding-page");
2929
examples.set("font-icons", "tabs/font-icons-page");
30+
examples.set("nested-layout", "tabs/nested-layout-page");
31+
examples.set("nested-bottom-navigation", "tabs/nested-bottom-navigation-page");
3032

3133
return examples;
3234
}
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<Page class="page">
2+
3+
<ActionBar title="Tabs nested in Layout" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<BottomNavigation>
7+
<TabStrip>
8+
<TabStripItem title="First"></TabStripItem>
9+
<TabStripItem title="Second"></TabStripItem>
10+
</TabStrip>
11+
12+
<TabContentItem>
13+
<Tabs>
14+
<TabStrip backgroundColor="palevioletred">
15+
<TabStripItem title="First"></TabStripItem>
16+
<TabStripItem title="Second"></TabStripItem>
17+
</TabStrip>
18+
19+
<TabContentItem>
20+
<GridLayout backgroundColor="skyblue">
21+
<Label text="First View"/>
22+
</GridLayout>
23+
</TabContentItem>
24+
25+
<TabContentItem>
26+
<GridLayout backgroundColor="gold">
27+
<Label text="Second View" />
28+
</GridLayout>
29+
</TabContentItem>
30+
</Tabs>
31+
</TabContentItem>
32+
33+
<TabContentItem>
34+
<GridLayout>
35+
<Label text="Second View" />
36+
</GridLayout>
37+
</TabContentItem>
38+
</BottomNavigation>
39+
</Page>
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<Page class="page">
2+
3+
<ActionBar title="Tabs nested in Layout" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<GridLayout>
7+
<Tabs>
8+
<TabStrip backgroundColor="palevioletred">
9+
<TabStripItem title="First"></TabStripItem>
10+
<TabStripItem title="Second"></TabStripItem>
11+
</TabStrip>
12+
13+
<TabContentItem>
14+
<GridLayout backgroundColor="skyblue">
15+
<Label text="First View" />
16+
</GridLayout>
17+
</TabContentItem>
18+
19+
<TabContentItem>
20+
<GridLayout backgroundColor="gold">
21+
<Label text="Second View" />
22+
</GridLayout>
23+
</TabContentItem>
24+
</Tabs>
25+
</GridLayout>
26+
</Page>

e2e/ui-tests-app/app/tabs/tabs-page.xml

Lines changed: 5 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,87 +3,34 @@
33
<ActionBar title="Tabs" icon="" class="action-bar">
44
</ActionBar>
55

6-
<!-- w/o TabStrip -->
7-
<!-- <BottomNavigation>
8-
<TabContentItem>
9-
<GridLayout>
10-
<Label text="First View"/>
11-
</GridLayout>
12-
</TabContentItem>< F438 /div>
13-
<TabContentItem>
14-
<GridLayout>
15-
<Label text="Second View"/>
16-
</GridLayout>
17-
</TabContentItem>
18-
</BottomNavigation> -->
19-
20-
<!-- w/ TabStrip -->
21-
<Tabs id="tabsNav" automationText="tabNavigation" >
22-
<TabStrip>
6+
<Tabs id="tabsNav" automationText="tabNavigation">
7+
<TabStrip backgroundColor="palevioletred">
238
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
249
<TabStripItem>
25-
<!-- <Image src="res://icon" /> -->
2610
<Label text="News" />
2711
</TabStripItem>
28-
<!-- <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem> -->
2912
<TabStripItem>
30-
<!-- <Image src="res://icon" /> -->
3113
<Label text="Places" />
3214
</TabStripItem>
33-
<!-- <TabStripItem title="Music" iconSource="res://icon"></TabStripItem> -->
3415
</TabStrip>
3516

3617
<TabContentItem>
37-
<StackLayout backgroundColor="blue">
18+
<StackLayout backgroundColor="skyblue">
3819
<Label text="First View"/>
3920
<Button tap="goToSecond" text="go to second" />
4021
</StackLayout>
4122
</TabContentItem>
4223
<TabContentItem>
43-
<StackLayout backgroundColor="red">
24+
<StackLayout backgroundColor="gold">
4425
<Label text="Second View"/>
4526
<Button tap="goToFirst" text="go to first" />
4627
</StackLayout>
4728
</TabContentItem>
4829
<TabContentItem>
49-
<StackLayout backgroundColor="green">
30+
<StackLayout backgroundColor="olive">
5031
<Label text="First View"/>
5132
<Button tap="goToSecond" text="go to second" />
5233
</StackLayout>
5334
</TabContentItem>
54-
<!-- <TabContentItem>
55-
<StackLayout>
56-
<Label text="Second View"/>
57-
<Button tap="goToFirst" text="go to first" />
58-
</StackLayout>
59-
</TabContentItem>
60-
<TabContentItem>
61-
<StackLayout>
62-
<Label text="First View"/>
63-
<Button tap="goToSecond" text="go to second" />
64-
</StackLayout>
65-
</TabContentItem> -->
6635
</Tabs>
67-
68-
<!-- =============================================================================================== -->
69-
70-
<!-- Bottom Bar with TabStrip -->
71-
<!-- <BottomNavigationBar>
72-
<TabStrip>
73-
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
74-
<TabStripItem>
75-
<Image src="res://icon" />
76-
<Label text="Second Tab" />
77-
</TabStripItem>
78-
</TabStrip>
79-
</BottomNavigationBar> -->
80-
81-
<!-- Bottom Bar w/o TabStrip -->
82-
<!-- <BottomNavigationBar>
83-
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
84-
<TabStripItem>
85-
<Image src="res://icon" />
86-
<Label text="Second Tab" />
87-
</TabStripItem>
88-
</BottomNavigationBar> -->
8936
</Page>

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

Lines changed: 12 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -111,60 +111,31 @@ class UIPageViewControllerImpl extends UIPageViewController {
111111

112112
public viewDidLayoutSubviews(): void {
113113
super.viewDidLayoutSubviews();
114-
115114
const owner = this._owner.get();
115+
if (!owner) {
116+
return;
117+
}
118+
116119
const tabsPosition = owner.tabsPosition;
120+
const parent = owner.parent;
117121

118122
let tabBarTop = this.view.safeAreaInsets.top;
119123
let tabBarHeight = this.tabBar.frame.size.height;
120124
let scrollViewTop = this.tabBar.frame.size.height;
121-
let scrollViewHeight = this.view.bounds.size.height - this.tabBar.frame.size.height + this.view.safeAreaInsets.bottom;
125+
let scrollViewHeight = this.view.bounds.size.height - this.tabBar.frame.size.height;
126+
127+
if (parent) {
128+
// TODO: Figure out a better way to handle ViewController nesting/Safe Area nesting
129+
tabBarTop = Math.max(this.view.safeAreaInsets.top, owner.parent.nativeView.safeAreaInsets.top);
130+
}
122131

123132
if (tabsPosition === "bottom") {
124133
tabBarTop = this.view.frame.size.height - this.tabBar.frame.size.height - this.view.safeAreaInsets.bottom;
125134
scrollViewTop = this.view.frame.origin.y;
126135
scrollViewHeight = this.view.frame.size.height - this.view.safeAreaInsets.bottom;
127136
}
128137

129-
this.tabBar.frame = CGRectMake(this.view.safeAreaInsets.left, tabBarTop, this.tabBar.frame.size.width, tabBarHeight); //this.view.safeAreaLayoutGuide.layoutFrame;
130-
// this.additionalSafeAreaInsets = new UIEdgeInsets({ top: this.tabBar.frame.size.height, left: 0, bottom: 0, right: 0 });
131-
// const tabBar = MDCTabBar.alloc().initWithFrame(this.view.safeAreaLayoutGuide.layoutFrame);
132-
133-
// tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
134-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
135-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
136-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
137-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
138-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
139-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
140-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
141-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
142-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
143-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
144-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
145-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
146-
// ]);
147-
148-
// tabBar.itemAppearance = MDCTabBarItemAppearance.Titles;
149-
// tabBar.tintColor = UIColor.greenColor;
150-
// tabBar.barTintColor = UIColor.yellowColor;
151-
// tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal);
152-
// tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
153-
// tabBar.sizeToFit();
154-
// this.view.addSubview(tabBar);
155-
156-
// this.view.bringSubviewToFront(tabBar);
157-
158-
// const tabBar = MDCTabBar.alloc().initWithFrame(this.view.bounds);
159-
// tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
160-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
161-
// UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0)
162-
// ]);
163-
164-
// tabBar.itemAppearance = MDCTabBarItemAppearance.Titles;
165-
// tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
166-
// tabBar.sizeToFit();
167-
// this.view.addSubview(tabBar);
138+
this.tabBar.frame = CGRectMake(this.view.safeAreaInsets.left, tabBarTop, this.tabBar.frame.size.width, tabBarHeight);
168139

169140
const subViews: NSArray<UIView> = this.view.subviews;
170141
let scrollView: UIScrollView = null;
@@ -192,47 +163,6 @@ class UIPageViewControllerImpl extends UIPageViewController {
192163

193164
scrollView.frame = CGRectMake(this.view.safeAreaInsets.left, scrollViewTop, this.view.bounds.size.width, scrollViewHeight); //this.view.bounds;
194165
}
195-
196-
// if (mdcBar) {
197-
// mdcBar.frame = this.view.bounds;
198-
// }
199-
200-
// const owner = this.owner.get();
201-
// if (owner) {
202-
// if (majorVersion >= 11) {
203-
// // Handle nested UILayoutViewController safe area application.
204-
// // Currently, UILayoutViewController can be nested only in a TabView.
205-
// // The TabView itself is handled by the OS, so we check the TabView's parent (usually a Page, but can be a Layout).
206-
// const tabViewItem = owner.parent;
207-
// const tabView = tabViewItem && tabViewItem.parent;
208-
// let parent = tabView && tabView.parent;
209-
210-
// // Handle Angular scenario where TabView is in a ProxyViewContainer
211-
// // It is possible to wrap components in ProxyViewContainers indefinitely
212-
// // Not using instanceof ProxyViewContainer to avoid circular dependency
213-
// // TODO: Try moving UILayoutViewController out of view module
214-
// while (parent && !parent.nativeViewProtected) {
215-
// parent = parent.parent;
216-
// }
217-
218-
// if (parent) {
219-
// const parentPageInsetsTop = parent.nativeViewProtected.safeAreaInsets.top;
220-
// const currentInsetsTop = this.view.safeAreaInsets.top;
221-
// const additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);
222-
223-
// const parentPageInsetsBottom = parent.nativeViewProtected.safeAreaInsets.bottom;
224-
// const currentInsetsBottom = this.view.safeAreaInsets.bottom;
225-
// const additionalInsetsBottom = Math.max(parentPageInsetsBottom - currentInsetsBottom, 0);
226-
227-
// if (additionalInsetsTop > 0 || additionalInsetsBottom > 0) {
228-
// const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: additionalInsetsBottom, right: 0 });
229-
// this.additionalSafeAreaInsets = additionalInsets;
230-
// }
231-
// }
232-
// }
233-
234-
// layoutView(this, owner);
235-
// }
236166
}
237167
}
238168

0 commit comments

Comments
 (0)
0