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

fix(ios): opaque bars break ui layout (#6929)

Browse Source 
* fix(ios): opaque bars break ui layout

* test(): change flat action bar tests

* test(): revert test flat change test
This commit is contained in:
Martin Yankov
2019-02-20 18:46:14 +02:00
committed by GitHub
parent 46ce8666d2
commit 09fa0856b8
16 changed files with 71 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/app/ui-tests-app/action-bar/flat-layout.xml Normal file
View File

@ -0,0 +1,10 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">
<ActionBar flat="true" backgroundColor="blue">
<Label text="flat action bar"></Label>
</ActionBar>
<StackLayout backgroundColor="red">
<Label text="lorem ipsum" backgroundColor="green"></Label>
</StackLayout>
</Page>

6
apps/app/ui-tests-app/action-bar/flat-scrollview.xml
View File

@ -1,10 +1,10 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">
<ActionBar flat="true" backgroundColor="blue">
<Label text="flat action bar"></Label>
</ActionBar>
<ScrollView backgroundColor="green">
<Label text="lorem ipsum" backgroundColor="red"></Label>
<ScrollView backgroundColor="red">
<Label text="lorem ipsum" backgroundColor="green"></Label>
</ScrollView>
</Page>

7
apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.ts Normal file
View File

@ -0,0 +1,7 @@
import { EventData } from "tns-core-modules/data/observable";
import { TabView } from "tns-core-modules/ui/tab-view";
export function onLoaded(args: EventData) {
const tabView = <TabView>args.object;
tabView.ios.tabBar.translucent = false;
}

13
apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.xml Normal file
View File

@ -0,0 +1,13 @@
<Page backgroundColor="yellow">
<ActionBar flat="true" backgroundColor="blue">
<Label text="flat action bar"></Label>
</ActionBar>
<TabView androidTabsPosition="bottom" loaded="onLoaded">
<TabViewItem title="First">
<StackLayout backgroundColor="red">
<Label text="First View" backgroundColor="green"/>
</StackLayout>
</TabViewItem>
</TabView>
</Page>

8
apps/app/ui-tests-app/action-bar/flat-tab.xml
View File

@ -1,13 +1,13 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">
<ActionBar flat="true">
<ActionBar flat="true" backgroundColor="blue">
<Label text="flat action bar"></Label>
</ActionBar>
<TabView selectedTabTextColor="green">
<TabViewItem title="First">
<GridLayout backgroundColor="red">
<Button text="test" backgroundColor="yellow"></Button>
<GridLayout backgroundColor="green">
<Button text="test" backgroundColor="red"></Button>
</GridLayout>
</TabViewItem>
</TabView>

14
apps/app/ui-tests-app/action-bar/flat.xml
View File

@ -1,9 +1,11 @@
<Page navigatedTo="onNavigateTo" >
<Page.actionBar>
<ActionBar title="Flat property"/>
</Page.actionBar>
<StackLayout>
<Page navigatedTo="onNavigateTo" backgroundColor="yellow">
<ActionBar backgroundColor="blue">
<Label text="flat action bar"></Label>
</ActionBar>
<StackLayout backgroundColor="red">
<Button margin="30" text="change flat property" tap="changeFlatPropertyValue"/>
<Label id="flatPropertyValue" />
<Label id="flatPropertyValue" backgroundColor="green" />
</StackLayout>
</Page>

2
apps/app/ui-tests-app/action-bar/main-page.ts
View File

@ -23,6 +23,8 @@ export function loadExamples() {
examples.set("modalShownActBar", "action-bar/modal-test-with-action-bar");
examples.set("flat", "action-bar/flat");
examples.set("flat-tab", "action-bar/flat-tab");
examples.set("flat-tab-opaque-bar", "action-bar/flat-tab-opaque-bar");
examples.set("flat-layout", "action-bar/flat-layout");
examples.set("flat-scrollview", "action-bar/flat-scrollview");
return examples;

2
apps/app/ui-tests-app/nested-frames/mid-screen-y-n-flat.xml
View File

@ -7,6 +7,6 @@
<GridLayout rows="200, *" backgroundColor="blue">
<GridLayout row="1">
<Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
</GridLayout>>
</GridLayout>
</GridLayout>
</Page>

28
tests/app/ui/layouts/safe-area-tests.ts
View File

@ -93,27 +93,13 @@ export class SafeAreaTests extends testModule.UITest<any> {
equal(insets.top, topInset, `${layout}.topInset - actual:${insets.top}; expected: ${topInset}`)
}
private layout_insets_top_action_bar_flat_test(layout: view.View) {
const insets = layout.getSafeAreaInsets();
equal(insets.top, 0, `${layout}.topInset - actual:${insets.top}; expected: ${0}`)
}
private layout_in_full_screen_test(layout: view.View, pageOptions?: helper.PageOptions) {
let expectedTop = 0;
if (pageOptions && (pageOptions.actionBarFlat)) {
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
const actionBarHeight = round(dipToDp(layout.page.actionBar.nativeViewProtected.frame.size.height));
expectedTop = statusBarHeight + actionBarHeight;
}
const l = left(layout);
const t = top(layout);
const r = right(layout);
const b = bottom(layout);
equal(l, 0, `${layout}.left - actual:${l}; expected: ${0}`);
equal(t, expectedTop, `${layout}.top - actual:${t}; expected: ${expectedTop}`);
equal(t, 0, `${layout}.top - actual:${t}; expected: ${0}`);
equal(r, platform.screen.mainScreen.widthPixels, `${layout}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
equal(b, platform.screen.mainScreen.heightPixels, `${layout}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
}
@ -193,7 +179,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
this.layout_insets_top_action_bar_test(root);
},
{ actionBarFlat: true }
);
@ -391,7 +377,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
this.layout_insets_top_action_bar_test(root);
},
{ actionBarFlat: true }
);
@ -609,7 +595,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
this.layout_insets_top_action_bar_test(root);
},
{ actionBarFlat: true }
);
@ -903,7 +889,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
this.layout_insets_top_action_bar_test(root);
},
{ actionBarFlat: true }
);
@ -1140,7 +1126,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
this.layout_insets_top_action_bar_test(root);
},
{ actionBarFlat: true }
);
@ -1354,7 +1340,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
this.layout_insets_top_action_bar_test(root);
},
{ actionBarFlat: true }
);

10
tests/app/ui/list-view/list-view-safe-area-tests.ts
View File

@ -47,20 +47,12 @@ export class ListViewSafeAreaTest extends UITest<ListView> {
};
private list_view_in_full_screen(listView: ListView, pageOptions?: helper.PageOptions) {
let expectedTop = 0;
if (pageOptions && pageOptions.actionBarFlat) {
const actionBarHeight = round(dipToDp(listView.page.actionBar.nativeViewProtected.frame.size.height));
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
expectedTop = actionBarHeight + statusBarHeight;
}
const l = left(listView);
const t = top(listView);
const r = right(listView);
const b = bottom(listView);
equal(l, 0, `${listView}.left - actual:${l}; expected: ${0}`);
equal(t, expectedTop, `${listView}.top - actual:${t}; expected: ${expectedTop}`);
equal(t, 0, `${listView}.top - actual:${t}; expected: ${0}`);
equal(r, platform.screen.mainScreen.widthPixels, `${listView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
equal(b, platform.screen.mainScreen.heightPixels, `${listView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
}

10
tests/app/ui/repeater/repeater-safe-area-tests.ts
View File

@ -41,20 +41,12 @@ export class RepeaterSafeAreaTest extends UITest<Repeater> {
};
private repeater_in_full_screen(repeater: Repeater, pageOptions?: helper.PageOptions) {
let expectedTop = 0;
if (pageOptions && pageOptions.actionBarFlat) {
const actionBarHeight = round(dipToDp(repeater.page.actionBar.nativeViewProtected.frame.size.height));
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
expectedTop = actionBarHeight + statusBarHeight;
}
const l = left(repeater);
const t = top(repeater);
const r = right(repeater);
const b = bottom(repeater);
equal(l, 0, `${repeater}.left - actual:${l}; expected: ${0}`);
equal(t, expectedTop, `${repeater}.top - actual:${t}; expected: ${expectedTop}`);
equal(t, 0, `${repeater}.top - actual:${t}; expected: ${0}`);
equal(r, platform.screen.mainScreen.widthPixels, `${repeater}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
equal(b, platform.screen.mainScreen.heightPixels, `${repeater}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
}

10
tests/app/ui/scroll-view/scroll-view-safe-area-tests.ts
View File

@ -51,20 +51,12 @@ class ScrollLayoutSafeAreaTest extends UITest<ScrollView> {
};
private scroll_view_in_full_screen(scrollView: view.View, pageOptions?: helper.PageOptions) {
let expectedTop = 0;
if (pageOptions && pageOptions.actionBarFlat) {
const actionBarHeight = round(dipToDp(scrollView.page.actionBar.nativeViewProtected.frame.size.height));
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
expectedTop = actionBarHeight + statusBarHeight;
}
const l = left(scrollView);
const t = top(scrollView);
const r = right(scrollView);
const b = bottom(scrollView);
equal(l, 0, `${scrollView}.left - actual:${l}; expected: ${0}`);
equal(t, expectedTop, `${scrollView}.top - actual:${t}; expected: ${expectedTop}`);
equal(t, 0, `${scrollView}.top - actual:${t}; expected: ${0}`);
equal(r, platform.screen.mainScreen.widthPixels, `${scrollView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
equal(b, platform.screen.mainScreen.heightPixels, `${scrollView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
}

10
tests/app/ui/web-view/web-view-safe-area-tests.ts
View File

@ -41,20 +41,12 @@ export class WebViewSafeAreaTest extends UITest<WebView> {
};
private webview_in_full_screen(webView: WebView, pageOptions?: helper.PageOptions) {
let expectedTop = 0;
if (pageOptions && pageOptions.actionBarFlat) {
const actionBarHeight = round(dipToDp(webView.page.actionBar.nativeViewProtected.frame.size.height));
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
expectedTop = actionBarHeight + statusBarHeight;
}
const l = left(webView);
const t = top(webView);
const r = right(webView);
const b = bottom(webView);
equal(l, 0, `${webView}.left - actual:${l}; expected: ${0}`);
equal(t, expectedTop, `${webView}.top - actual:${t}; expected: ${expectedTop}`);
equal(t, 0, `${webView}.top - actual:${t}; expected: ${0}`);
equal(r, platform.screen.mainScreen.widthPixels, `${webView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`);
equal(b, platform.screen.mainScreen.heightPixels, `${webView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`);
}

3
tns-core-modules/ui/core/view/view.ios.ts
View File

@ -946,6 +946,9 @@ export namespace ios {
return;
}
// Unify translucent and opaque bars layout
this.extendedLayoutIncludesOpaqueBars = true;
updateAutoAdjustScrollInsets(this, owner);
if (!owner.parent) {

20
tns-core-modules/ui/page/page.ios.ts
View File

@ -100,6 +100,9 @@ class UIViewControllerImpl extends UIViewController {
frame._updateActionBar(owner);
}
// Unify translucent and opaque bars layout
this.extendedLayoutIncludesOpaqueBars = true;
// Set autoAdjustScrollInsets in will appear - as early as possible
iosView.updateAutoAdjustScrollInsets(this, owner);
@ -235,14 +238,9 @@ class UIViewControllerImpl extends UIViewController {
}
if (frameParent) {
let additionalInsetsTop = 0;
// if current page has flat action bar, inherited top insets should be ignored.
if (!owner.actionBar.flat) {
const parentPageInsetsTop = frameParent.nativeViewProtected.safeAreaInsets.top;
const currentInsetsTop = this.view.safeAreaInsets.top;
additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);
}
const parentPageInsetsTop = frameParent.nativeViewProtected.safeAreaInsets.top;
const currentInsetsTop = this.view.safeAreaInsets.top;
const additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);
const parentPageInsetsBottom = frameParent.nativeViewProtected.safeAreaInsets.bottom;
const currentInsetsBottom = this.view.safeAreaInsets.bottom;
@ -367,12 +365,6 @@ export class Page extends PageBase {
const childRight = right - insets.right;
let childBottom = bottom - insets.bottom;
if (majorVersion >= 11 && this.actionBar.flat) {
// on iOS 11 the flat action bar changes the fullscreen size
// the top of the page is the new fullscreen
childBottom -= top;
}
View.layoutChild(this, this.layoutView, childLeft, childTop, childRight, childBottom);
}

3
tns-core-modules/ui/tab-view/tab-view.ios.ts
View File

@ -36,6 +36,9 @@ class UITabBarControllerImpl extends UITabBarController {
return;
}
// Unify translucent and opaque bars layout
this.extendedLayoutIncludesOpaqueBars = true;
iosView.updateAutoAdjustScrollInsets(this, owner);
if (!owner.parent) {