diff --git a/apps/app/ui-tests-app/action-bar/flat-layout.xml b/apps/app/ui-tests-app/action-bar/flat-layout.xml
new file mode 100644
index 0000000000..f7f64f9654
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/flat-layout.xml
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/flat-scrollview.xml b/apps/app/ui-tests-app/action-bar/flat-scrollview.xml
index 2a851d7efd..7617e5db96 100644
--- 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 @@
-
+
-
-
+
+
\ No newline at end of file
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
new file mode 100644
index 0000000000..a0b131f61d
--- /dev/null
+++ 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 = 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
new file mode 100644
index 0000000000..8314ca6179
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/flat-tab.xml b/apps/app/ui-tests-app/action-bar/flat-tab.xml
index 02844a4299..fc177b4411 100644
--- 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 @@
-
+
-
+
-
-
+
+
diff --git a/apps/app/ui-tests-app/action-bar/flat.xml b/apps/app/ui-tests-app/action-bar/flat.xml
index fd4dbd18b5..caefbf7af4 100644
--- a/apps/app/ui-tests-app/action-bar/flat.xml
+++ b/apps/app/ui-tests-app/action-bar/flat.xml
@@ -1,9 +1,11 @@
-
-
-
-
-
+
+
+
+
+
+
+
-
+
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/main-page.ts b/apps/app/ui-tests-app/action-bar/main-page.ts
index 374cb35dd3..10cd81d6a6 100644
--- 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
index 60df60ac5f..893eb7919c 100644
--- 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 @@
- >
+
\ No newline at end of file
diff --git a/tests/app/ui/layouts/safe-area-tests.ts b/tests/app/ui/layouts/safe-area-tests.ts
index befc691387..15350f6345 100644
--- 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 {
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 {
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 {
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 {
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 {
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 {
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 {
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
index 9bf65e59e9..0e33c58416 100644
--- 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 {
};
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
index 4be52be1ae..e9c6770065 100644
--- 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 {
};
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
index 694b1d8724..9d10c6a15c 100644
--- 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 {
};
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
index 6f26e8bada..37de67b7b2 100644
--- 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 {
};
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
index 009ffbe707..6186a27ebd 100644
--- 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
index 5be02edcf9..2c288be1d2 100644
--- 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
index 5d2c9cee55..111c13fa61 100644
--- 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) {