Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit e487825

Browse files
MartoYankovSvetoslavTsenov
MartoYankov
authored and
SvetoslavTsenov
committed
fix-next: handle action bar safe area nesting (NativeScript#6455)
1 parent 4765dd9 commit e487825

19 files changed

+240
-16
lines changed

‎apps/app/ui-tests-app/main-page.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export function pageLoaded(args: EventData) {
3535
examples.set("webview", "web-view/main-page");
3636
examples.set("progress-bar", "progress-bar/main-page");
3737
examples.set("date-picker", "date-picker/date-picker");
38+
examples.set("nested-frames", "nested-frames/main-page");
3839
page.bindingContext = new MainPageViewModel(wrapLayout, examples);
3940

4041
const parent = page.getViewById("parentLayout");

‎apps/app/ui-tests-app/nested-frames/full-screen-n-n.xml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<GridLayout backgroundColor="blue">
8+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
9+
</GridLayout>
10+
</Page>

‎apps/app/ui-tests-app/nested-frames/full-screen-n-y.xml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<GridLayout backgroundColor="blue">
8+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="always"></Frame>
9+
</GridLayout>
10+
</Page>

‎apps/app/ui-tests-app/nested-frames/full-screen-y-n.xml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<GridLayout backgroundColor="blue">
8+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
9+
</GridLayout>
10+
</Page>

‎apps/app/ui-tests-app/nested-frames/full-screen-y-y.xml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<GridLayout backgroundColor="blue">
8+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="always"></Frame>
9+
</GridLayout>
10+
</Page>

‎apps/app/ui-tests-app/nested-frames/main-page.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { EventData } from "tns-core-modules/data/observable";
2+
import { SubMainPageViewModel } from "../sub-main-page-view-model";
3+
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
4+
import { Page } from "tns-core-modules/ui/page";
5+
6+
export function pageLoaded(args: EventData) {
7+
const page = <Page>args.object;
8+
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
9+
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
10+
}
11+
12+
export function loadExamples() {
13+
const examples = new Map<string, string>();
14+
examples.set("full-screen-n-n", "nested-frames/full-screen-n-n");
15+
examples.set("full-screen-n-y", "nested-frames/full-screen-n-y");
16+
examples.set("full-screen-y-n", "nested-frames/full-screen-y-n");
17+
examples.set("full-screen-y-y", "nested-frames/full-screen-y-y");
18+
examples.set("mid-screen-n-n", "nested-frames/mid-screen-n-n");
19+
examples.set("mid-screen-n-y", "nested-frames/mid-screen-n-y");
20+
examples.set("mid-screen-y-n", "nested-frames/mid-screen-y-n");
21+
examples.set("mid-screen-y-y", "nested-frames/mid-screen-y-y");
22+
examples.set("tab-y-y", "nested-frames/tab-y-y");
23+
examples.set("tab-n-y", "nested-frames/tab-n-y");
24+
examples.set("tab-y-n", "nested-frames/tab-y-n");
25+
examples.set("tab-n-n", "nested-frames/tab-n-n");
26+
27+
return examples;
28+
}

‎apps/app/ui-tests-app/nested-frames/main-page.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Page loaded="pageLoaded">
3+
<ScrollView orientation="vertical" row="1">
4+
<WrapLayout id="wrapLayoutWithExamples"/>
5+
</ScrollView>
6+
</Page>

‎apps/app/ui-tests-app/nested-frames/mid-screen-n-n.xml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<GridLayout rows="200, *" backgroundColor="blue">
8+
<GridLayout row="1">
9+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
10+
</GridLayout>>
11+
</GridLayout>
12+
</Page>

‎apps/app/ui-tests-app/nested-frames/mid-screen-n-y.xml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<GridLayout rows="200, *" backgroundColor="blue">
8+
<GridLayout row="1">
9+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="always"></Frame>
10+
</GridLayout>>
11+
</GridLayout>
12+
</Page>

‎apps/app/ui-tests-app/nested-frames/mid-screen-y-n.xml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<GridLayout rows="200, *" backgroundColor="blue">
8+
<GridLayout row="1">
9+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
10+
</GridLayout>>
11+
</GridLayout>
12+
</Page>

‎apps/app/ui-tests-app/nested-frames/mid-screen-y-y.xml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<GridLayout rows="200, *" backgroundColor="blue">
8+
<GridLayout row="1">
9+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="always"></Frame>
10+
</GridLayout>>
11+
</GridLayout>
12+
</Page>

‎apps/app/ui-tests-app/nested-frames/nested-page.xml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar>
4+
<Label text="Nested page"></Label>
5+
</ActionBar>
6+
7+
<GridLayout rows="*, *" columns="*, *" backgroundColor="red">
8+
<Label row="0" col="0" text="test" backgroundColor="gold"></Label>
9+
<Label row="0" col="1" text="test" backgroundColor="green"></Label>
10+
<Label row="1" col="0" text="test" backgroundColor="yellow"></Label>
11+
<Label row="1" col="1" text="test" backgroundColor="purple"></Label>
12+
</GridLayout>
13+
</Page>

‎apps/app/ui-tests-app/nested-frames/tab-n-n.xml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<TabView selectedTabTextColor="green">
8+
<TabViewItem title="First">
9+
<GridLayout>
10+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
11+
</GridLayout>
12+
</TabViewItem>
13+
</TabView>
14+
</Page>

‎apps/app/ui-tests-app/nested-frames/tab-n-y.xml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<TabView selectedTabTextColor="green">
8+
<TabViewItem title="First">
9+
<GridLayout>
10+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="always"></Frame>
11+
</GridLayout>
12+
</TabViewItem>
13+
</TabView>
14+
</Page>

‎apps/app/ui-tests-app/nested-frames/tab-y-n.xml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<TabView selectedTabTextColor="green">
8+
<TabViewItem title="First">
9+
<GridLayout>
10+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
11+
</GridLayout>
12+
</TabViewItem>
13+
</TabView>
14+
</Page>

‎apps/app/ui-tests-app/nested-frames/tab-y-y.xml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<ActionBar>
4+
<Label text="Parent page"></Label>
5+
</ActionBar>
6+
7+
<TabView selectedTabTextColor="green">
8+
<TabViewItem title="First">
9+
<GridLayout>
10+
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="always"></Frame>
11+
</GridLayout>
12+
</TabViewItem>
13+
</TabView>
14+
</Page>

‎tns-core-modules/ui/core/view/view.ios.ts

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -704,21 +704,6 @@ export namespace ios {
704704
}
705705

706706
export function layoutView(controller: UIViewController, owner: View): void {
707-
if (majorVersion >= 11) {
708-
// apply parent page additional top insets if any. The scenario is when there is a parent page with action bar.
709-
const parentPage = getAncestor(owner, "Page");
710-
if (parentPage) {
711-
const parentPageInsetsTop = parentPage.viewController.view.safeAreaInsets.top;
712-
const currentInsetsTop = controller.view.safeAreaInsets.top;
713-
const additionalInsetsTop = parentPageInsetsTop - currentInsetsTop;
714-
715-
if (additionalInsetsTop > 0) {
716-
const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: 0, right: 0 });
717-
controller.additionalSafeAreaInsets = additionalInsets;
718-
}
719-
}
720-
}
721-
722707
let layoutGuide = controller.view.safeAreaLayoutGuide;
723708
if (!layoutGuide) {
724709
traceWrite(`safeAreaLayoutGuide during layout of ${owner}. Creating fallback constraints, but layout might be wrong.`,
@@ -897,6 +882,29 @@ export namespace ios {
897882
super.viewDidLayoutSubviews();
898883
const owner = this.owner.get();
899884
if (owner) {
885+
if (majorVersion >= 11) {
886+
// Handle nested UILayoutViewController safe area application.
887+
// Currently, UILayoutViewController can be nested only in a TabView.
888+
// The TabView itself is handled by the OS, so we check the TabView's parent (usually a Page, but can be a Layout).
889+
const tabViewItem = owner.parent;
890+
const tabView = tabViewItem && tabViewItem.parent;
891+
const parent = tabView && tabView.parent;
892+
if (parent) {
893+
const parentPageInsetsTop = parent.nativeViewProtected.safeAreaInsets.top;
894+
const currentInsetsTop = this.view.safeAreaInsets.top;
895+
const additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);
896+
897+
const parentPageInsetsBottom = parent.nativeViewProtected.safeAreaInsets.bottom;
898+
const currentInsetsBottom = this.view.safeAreaInsets.bottom;
899+
const additionalInsetsBottom = Math.max(parentPageInsetsBottom - currentInsetsBottom, 0);
900+
901+
if (additionalInsetsTop > 0 || additionalInsetsBottom > 0) {
902+
const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: additionalInsetsBottom, right: 0 });
903+
this.additionalSafeAreaInsets = additionalInsets;
904+
}
905+
}
906+
}
907+
900908
layoutView(this, owner);
901909
}
902910
}

‎tns-core-modules/ui/frame/frame.ios.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -602,7 +602,7 @@ class iOSFrame implements iOSFrameDefinition {
602602
}
603603
public set showNavigationBar(value: boolean) {
604604
this._showNavigationBar = value;
605-
this._controller.setNavigationBarHiddenAnimated(!value, true);
605+
this._controller.setNavigationBarHiddenAnimated(!value, !this._disableNavBarAnimation);
606606
}
607607

608608
public get navBarVisibility(): "auto" | "never" | "always" {

‎tns-core-modules/ui/page/page.ios.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,30 @@ class UIViewControllerImpl extends UIViewController {
217217
if (owner) {
218218
// layout(owner.actionBar)
219219
// layout(owner.content)
220+
221+
if (majorVersion >= 11) {
222+
// Handle nested Page safe area insets application.
223+
// A Page is nested if its Frame has a parent.
224+
// If the Page is nested, cross check safe area insets on top and bottom with Frame parent.
225+
const frame = owner.parent;
226+
// There is a legacy scenario where Page is not in a Frame - the root of a Modal View, so it has no parent.
227+
const frameParent = frame && frame.parent;
228+
if (frameParent) {
229+
const parentPageInsetsTop = frameParent.nativeViewProtected.safeAreaInsets.top;
230+
const currentInsetsTop = this.view.safeAreaInsets.top;
231+
const additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);
232+
233+
const parentPageInsetsBottom = frameParent.nativeViewProtected.safeAreaInsets.bottom;
234+
const currentInsetsBottom = this.view.safeAreaInsets.bottom;
235+
const additionalInsetsBottom = Math.max(parentPageInsetsBottom - currentInsetsBottom, 0);
236+
237+
if (additionalInsetsTop > 0 || additionalInsetsBottom > 0) {
238+
const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: additionalInsetsBottom, right: 0 });
239+
this.additionalSafeAreaInsets = additionalInsets;
240+
}
241+
}
242+
}
243+
220244
iosView.layoutView(this, owner);
221245
}
222246
}

0 commit comments

Comments
 (0)