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

* fix(ios): opaque bars break ui layout * test(): change flat action bar tests * test(): revert test flat change test
NativeScript · Feb 20, 2019 · 09fa085 · 09fa085
1 parent 46ce866
commit 09fa085
Show file tree

Hide file tree

Showing 16 changed files with 71 additions and 85 deletions.
diff --git a/apps/app/ui-tests-app/action-bar/flat-layout.xml b/apps/app/ui-tests-app/action-bar/flat-layout.xml
@@ -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>
diff --git a/apps/app/ui-tests-app/action-bar/flat-scrollview.xml b/apps/app/ui-tests-app/action-bar/flat-scrollview.xml
@@ -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>
diff --git a/apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.ts b/apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.ts
@@ -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;
+}
diff --git a/apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.xml b/apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.xml
@@ -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>
diff --git a/apps/app/ui-tests-app/action-bar/flat-tab.xml b/apps/app/ui-tests-app/action-bar/flat-tab.xml
@@ -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>

diff --git a/apps/app/ui-tests-app/action-bar/flat.xml b/apps/app/ui-tests-app/action-bar/flat.xml
@@ -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>
diff --git a/apps/app/ui-tests-app/action-bar/main-page.ts b/apps/app/ui-tests-app/action-bar/main-page.ts
@@ -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;

diff --git a/apps/app/ui-tests-app/nested-frames/mid-screen-y-n-flat.xml b/apps/app/ui-tests-app/nested-frames/mid-screen-y-n-flat.xml
@@ -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>
diff --git a/tests/app/ui/layouts/safe-area-tests.ts b/tests/app/ui/layouts/safe-area-tests.ts
@@ -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 }
         );

diff --git a/tests/app/ui/list-view/list-view-safe-area-tests.ts b/tests/app/ui/list-view/list-view-safe-area-tests.ts
@@ -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}`);
     }

diff --git a/tests/app/ui/repeater/repeater-safe-area-tests.ts b/tests/app/ui/repeater/repeater-safe-area-tests.ts
@@ -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}`);
     }

diff --git a/tests/app/ui/scroll-view/scroll-view-safe-area-tests.ts b/tests/app/ui/scroll-view/scroll-view-safe-area-tests.ts
@@ -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}`);
     }

diff --git a/tests/app/ui/web-view/web-view-safe-area-tests.ts b/tests/app/ui/web-view/web-view-safe-area-tests.ts
@@ -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}`);
     }

diff --git a/tns-core-modules/ui/core/view/view.ios.ts b/tns-core-modules/ui/core/view/view.ios.ts
@@ -946,6 +946,9 @@ export namespace ios {
                 return;
             }
 
+            // Unify translucent and opaque bars layout
+            this.extendedLayoutIncludesOpaqueBars = true;
+
             updateAutoAdjustScrollInsets(this, owner);
 
             if (!owner.parent) {

diff --git a/tns-core-modules/ui/page/page.ios.ts b/tns-core-modules/ui/page/page.ios.ts
@@ -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);
     }
 

diff --git a/tns-core-modules/ui/tab-view/tab-view.ios.ts b/tns-core-modules/ui/tab-view/tab-view.ios.ts
@@ -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) {