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

fix nested viewcontrollers top insets

Browse Source
This commit is contained in:
Martin Yankov
2018-09-26 18:36:30 +03:00
parent d4483f9ca8
commit f01403a419
2 changed files with 515 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,14 +57,38 @@ export class SafeAreaTests extends testModule.UITest<any> {
};
};
private layout_insets_top_action_bar_test(layout: view.View) {
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));
const topInset = statusBarHeight + actionBarHeight;
const insets = layout.getSafeAreaInsets();
equal(insets.top, topInset, `${layout}.topInset - actual:${insets.top}; expected: ${topInset}`)
}
private layout_insets_top_action_bar_hidden_test(layout: view.View) {
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
const topInset = statusBarHeight;
const insets = layout.getSafeAreaInsets();
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 actionBarHeight = round(dipToDp(layout.page.actionBar.nativeViewProtected.frame.size.height));
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 = actionBarHeight + statusBarHeight;
expectedTop = statusBarHeight + actionBarHeight;
}
const l = left(layout);
@@ -109,6 +133,85 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.absolute_in_full_screen({ tabBar: true });
}
public test_absolute_in_full_screen_tab_bar_action_bar() {
this.absolute_in_full_screen({ actionBar: true, tabBar: true });
}
public test_absolute_insets_top_action_bar() {
const snippet = `
<AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_test(root);
},
{ actionBar: true }
);
}
public test_absolute_insets_top_action_bar_hidden() {
const snippet = `
<AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_hidden_test(root);
},
{ actionBarHidden: true }
);
}
public test_absolute_insets_top_action_bar_flat() {
const snippet = `
<AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
},
{ actionBarFlat: true }
);
}
public test_absolute_insets_top_tab_bar_flat() {
const snippet = `
<AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_hidden_test(root);
},
{ tabBar: true }
);
}
public test_absolute_insets_top_tab_bar_action_bar_flat() {
const snippet = `
<AbsoluteLayout id="abs" backgroundColor="Crimson"></AbsoluteLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_test(root);
},
{ actionBar: true, tabBar: true }
);
}
private absolute_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
const snippet = `
<AbsoluteLayout id="abs">
@@ -228,6 +331,85 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.dock_in_full_screen({ tabBar: true });
}
public test_dock_in_full_screen_tab_bar_action_bar() {
this.dock_in_full_screen({ actionBar: true, tabBar: true });
}
public test_dock_insets_top_action_bar() {
const snippet = `
<DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_test(root);
},
{ actionBar: true }
);
}
public test_dock_insets_top_action_bar_hidden() {
const snippet = `
<DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_hidden_test(root);
},
{ actionBarHidden: true }
);
}
public test_dock_insets_top_action_bar_flat() {
const snippet = `
<DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
},
{ actionBarFlat: true }
);
}
public test_dock_insets_top_tab_bar_flat() {
const snippet = `
<DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_hidden_test(root);
},
{ tabBar: true }
);
}
public test_dock_insets_top_tab_bar_action_bar_flat() {
const snippet = `
<DockLayout id="dock" backgroundColor="Crimson"></DockLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_test(root);
},
{ actionBar: true, tabBar: true }
);
}
private dock_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
const snippet = `
<DockLayout id="dock" stretchLastChild="true">
@@ -367,6 +549,85 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.flexbox_in_full_screen({ tabBar: true });
}
public test_flexbox_in_full_screen_tab_bar_action_bar() {
this.flexbox_in_full_screen({ actionBar: true, tabBar: true });
}
public test_flexbox_insets_top_action_bar() {
const snippet = `
<FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_test(root);
},
{ actionBar: true }
);
}
public test_flexbox_insets_top_action_bar_hidden() {
const snippet = `
<FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_hidden_test(root);
},
{ actionBarHidden: true }
);
}
public test_flexbox_insets_top_action_bar_flat() {
const snippet = `
<FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
},
{ actionBarFlat: true }
);
}
public test_flexbox_insets_top_tab_bar_flat() {
const snippet = `
<FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_hidden_test(root);
},
{ tabBar: true }
);
}
public test_flexbox_insets_top_tab_bar_action_bar_flat() {
const snippet = `
<FlexboxLayout id="flex" backgroundColor="Crimson"></FlexboxLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_test(root);
},
{ actionBar: true, tabBar: true }
);
}
private flex_column_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
const snippet = `
<FlexboxLayout id="flex" flexDirection="column" backgroundColor="Crimson">
@@ -582,6 +843,85 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.grid_layout_in_full_screen({ tabBar: true });
}
public test_grid_layout_in_full_screen_tab_bar_action_bar() {
this.grid_layout_in_full_screen({ actionBar: true, tabBar: true });
}
public test_grid_insets_top_action_bar() {
const snippet = `
<GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_test(root);
},
{ actionBar: true }
);
}
public test_grid_insets_top_action_bar_hidden() {
const snippet = `
<GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_hidden_test(root);
},
{ actionBarHidden: true }
);
}
public test_grid_insets_top_action_bar_flat() {
const snippet = `
<GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
},
{ actionBarFlat: true }
);
}
public test_grid_insets_top_tab_bar_flat() {
const snippet = `
<GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_hidden_test(root);
},
{ tabBar: true }
);
}
public test_grid_insets_top_tab_bar_action_bar_flat() {
const snippet = `
<GridLayout id="grid" backgroundColor="Crimson"></GridLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_test(root);
},
{ actionBar: true, tabBar: true }
);
}
private grid_component_cells_layout_in_safe_area(pageOptions?: helper.PageOptions) {
const snippet = `
<GridLayout id="grid" rows="*, *, *" columns="*, *, *" backgroundColor="Crimson">
@@ -738,6 +1078,85 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.stack_in_full_screen({ tabBar: true });
}
public test_stack_in_full_screen_tab_bar_action_bar() {
this.stack_in_full_screen({ actionBar: true, tabBar: true });
}
public test_stack_insets_top_action_bar() {
const snippet = `
<StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_test(root);
},
{ actionBar: true }
);
}
public test_stack_insets_top_action_bar_hidden() {
const snippet = `
<StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_hidden_test(root);
},
{ actionBarHidden: true }
);
}
public test_stack_insets_top_action_bar_flat() {
const snippet = `
<StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
},
{ actionBarFlat: true }
);
}
public test_stack_insets_top_tab_bar_flat() {
const snippet = `
<StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_hidden_test(root);
},
{ tabBar: true }
);
}
public test_stack_insets_top_tab_bar_action_bar_flat() {
const snippet = `
<StackLayout id="stack" backgroundColor="Crimson"></StackLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_test(root);
},
{ actionBar: true, tabBar: true }
);
}
private stack_horizontal_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
const snippet = `
<StackLayout id="stack" orientation="horizontal" backgroundColor="Crimson">
@@ -873,6 +1292,85 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.wrap_in_full_screen({ tabBar: true });
}
public test_wrap_in_full_screen_tab_bar_action_bar() {
this.wrap_in_full_screen({ actionBar: true, tabBar: true });
}
public test_wrap_insets_top_action_bar() {
const snippet = `
<WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_test(root);
},
{ actionBar: true }
);
}
public test_wrap_insets_top_action_bar_hidden() {
const snippet = `
<WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_hidden_test(root);
},
{ actionBarHidden: true }
);
}
public test_wrap_insets_top_action_bar_flat() {
const snippet = `
<WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_flat_test(root);
},
{ actionBarFlat: true }
);
}
public test_wrap_insets_top_tab_bar_flat() {
const snippet = `
<WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_hidden_test(root);
},
{ tabBar: true }
);
}
public test_wrap_insets_top_tab_bar_action_bar_flat() {
const snippet = `
<WrapLayout id="wrap" backgroundColor="Crimson"></WrapLayout>
`;
this.executeSnippet(
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_insets_top_action_bar_test(root);
},
{ actionBar: true, tabBar: true }
);
}
private wrap_horizontal_children_components_in_safe_area(pageOptions?: helper.PageOptions) {
const snippet = `
<WrapLayout id="wrap" orientation="horizontal">

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

@@ -5,7 +5,7 @@ import { booleanConverter, Property } from "../view";
import {
ViewCommon, layout, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty,
traceEnabled, traceWrite, traceCategories, traceError, traceMessageType
traceEnabled, traceWrite, traceCategories, traceError, traceMessageType, getAncestor
} from "./view-common";
import { ios as iosBackground, Background } from "../../styling/background";
@@ -691,6 +691,19 @@ export namespace ios {
}
export function layoutView(controller: UIViewController, owner: View): void {
// apply parent page additional top insets if any. The scenario is when there is a parent page with action bar.
const parentPage = getAncestor(owner, "Page");
if (parentPage) {
const parentPageInsetsTop = parentPage.viewController.view.safeAreaInsets.top;
const currentInsetsTop = controller.view.safeAreaInsets.top;
const additionalInsetsTop = parentPageInsetsTop - currentInsetsTop;
if (additionalInsetsTop > 0) {
const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: 0, right: 0 });
controller.additionalSafeAreaInsets = additionalInsets;
}
}
let layoutGuide = controller.view.safeAreaLayoutGuide;
if (!layoutGuide) {
traceWrite(`safeAreaLayoutGuide during layout of ${owner}. Creating fallback constraints, but layout might be wrong.`,