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 safe area calculations with flat action bar

Browse Source
This commit is contained in:
Martin Yankov
2018-09-20 10:51:58 +03:00
parent c3ee667015
commit 2d2144f02e
3 changed files with 26 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,13 +57,22 @@ export class SafeAreaTests extends testModule.UITest<any> {
};
};
private layout_in_full_screen_test(layout: view.View) {
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));
const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication);
const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height));
expectedTop = actionBarHeight + statusBarHeight;
}
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, 0, `${layout}.top - actual:${t}; expected: ${0}`);
equal(t, expectedTop, `${layout}.top - actual:${t}; expected: ${expectedTop}`);
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}`);
}
@@ -78,7 +87,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_in_full_screen_test(root);
this.layout_in_full_screen_test(root, pageOptions);
},
pageOptions
);
@@ -130,10 +139,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.absolute_children_components_in_safe_area({ actionBarHidden: true });
}
public test_absolute_children_components_in_safe_area_action_bar_flat() {
this.absolute_children_components_in_safe_area({ actionBarFlat: true });
}
public test_absolute_children_components_in_safe_area_tab_bar() {
this.absolute_children_components_in_safe_area({ tabBar: true });
}
@@ -175,10 +180,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.absolute_nested_layouts_beyond_safe_area({ actionBarHidden: true });
}
public test_absolute_nested_layouts_beyond_safe_area_action_bar_flat() {
this.absolute_nested_layouts_beyond_safe_area({ actionBarFlat: true });
}
public test_absolute_nested_layouts_beyond_safe_area_tab_bar() {
this.absolute_nested_layouts_beyond_safe_area({ tabBar: true });
}
@@ -205,7 +206,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getDockViews(snippet),
this.noop,
({ root }) => {
this.layout_in_full_screen_test(root);
this.layout_in_full_screen_test(root, pageOptions);
},
pageOptions
);
@@ -272,10 +273,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.dock_children_components_in_safe_area({ actionBarHidden: true });
}
public test_dock_children_components_in_safe_area_action_bar_flat() {
this.dock_children_components_in_safe_area({ actionBarFlat: true });
}
public test_dock_children_components_in_safe_area_tab_bar() {
this.dock_children_components_in_safe_area({ tabBar: true });
}
@@ -334,10 +331,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.dock_nested_layouts_beyond_safe_area({ actionBarHidden: true });
}
public test_dock_nested_layouts_beyond_safe_area_action_bar_flat() {
this.dock_nested_layouts_beyond_safe_area({ actionBarFlat: true });
}
public test_dock_nested_layouts_beyond_safe_area_tab_bar() {
this.dock_nested_layouts_beyond_safe_area({ tabBar: true });
}
@@ -352,7 +345,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_in_full_screen_test(root);
this.layout_in_full_screen_test(root, pageOptions);
},
pageOptions
);
@@ -409,10 +402,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.flex_column_children_components_in_safe_area({ actionBarHidden: true });
}
public test_flex_column_children_components_in_safe_area_action_bar_flat() {
this.flex_column_children_components_in_safe_area({ actionBarFlat: true });
}
public test_flex_column_children_components_in_safe_area_tab_bar() {
this.flex_column_children_components_in_safe_area({ tabBar: true });
}
@@ -452,10 +441,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.flex_row_children_components_in_safe_area({ actionBarHidden: true });
}
public test_flex_row_children_components_in_safe_area_action_bar_flat() {
this.flex_row_children_components_in_safe_area({ actionBarFlat: true });
}
public test_flex_row_children_components_in_safe_area_tab_bar() {
this.flex_row_children_components_in_safe_area({ tabBar: true });
}
@@ -502,10 +487,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.flex_column_nested_layouts_beyond_safe_area({ actionBarHidden: true });
}
public test_flex_column_nested_layouts_beyond_safe_area_action_bar_flat() {
this.flex_column_nested_layouts_beyond_safe_area({ actionBarFlat: true });
}
public test_flex_column_nested_layouts_beyond_safe_area_tab_bar() {
this.flex_column_nested_layouts_beyond_safe_area({ tabBar: true });
}
@@ -552,10 +533,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.flex_row_nested_layouts_beyond_safe_area({ actionBarHidden: true });
}
public test_flex_row_nested_layouts_beyond_safe_area_action_bar_flat() {
this.flex_row_nested_layouts_beyond_safe_area({ actionBarFlat: true });
}
public test_flex_row_nested_layouts_beyond_safe_area_tab_bar() {
this.flex_row_nested_layouts_beyond_safe_area({ tabBar: true });
}
@@ -583,7 +560,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getGridViews(snippet),
this.noop,
({ root }) => {
this.layout_in_full_screen_test(root);
this.layout_in_full_screen_test(root, pageOptions);
},
pageOptions
);
@@ -664,10 +641,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.grid_component_cells_layout_in_safe_area({ actionBarHidden: true });
}
public test_grid_component_cells_layout_in_safe_area_action_bar_flat() {
this.grid_component_cells_layout_in_safe_area({ actionBarFlat: true });
}
public test_grid_component_cells_layout_in_safe_area_tab_bar() {
this.grid_component_cells_layout_in_safe_area({ tabBar: true });
}
@@ -729,10 +702,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.grid_nested_grid_cells_layout_beyond_safe_area({ actionBarHidden: true });
}
public test_grid_nested_grid_cells_layout_beyond_safe_area_action_bar_flat() {
this.grid_nested_grid_cells_layout_beyond_safe_area({ actionBarFlat: true });
}
public test_grid_nested_grid_cells_layout_beyond_safe_area_tab_bar() {
this.grid_nested_grid_cells_layout_beyond_safe_area({ tabBar: true });
}
@@ -747,7 +716,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_in_full_screen_test(root);
this.layout_in_full_screen_test(root, pageOptions);
},
pageOptions
);
@@ -799,10 +768,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.stack_horizontal_children_components_in_safe_area({ actionBarHidden: true });
}
public test_stack_horizontal_children_components_in_safe_area_action_bar_flat() {
this.stack_horizontal_children_components_in_safe_area({ actionBarFlat: true });
}
public test_stack_horizontal_children_components_in_safe_area_tab_bar() {
this.stack_horizontal_children_components_in_safe_area({ tabBar: true });
}
@@ -837,10 +802,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.stack_vertical_children_components_in_safe_area({ actionBarHidden: true });
}
public test_stack_vertical_children_components_in_safe_area_action_bar_flat() {
this.stack_vertical_children_components_in_safe_area({ actionBarFlat: true });
}
public test_stack_vertical_children_components_in_safe_area_tab_bar() {
this.stack_vertical_children_components_in_safe_area({ tabBar: true });
}
@@ -876,10 +837,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.stack_nested_layouts_beyond_safe_area({ actionBarHidden: true });
}
public test_stack_nested_layouts_beyond_safe_area_action_bar_flat() {
this.stack_nested_layouts_beyond_safe_area({ actionBarFlat: true });
}
public test_stack_nested_layouts_beyond_safe_area_tab_bar() {
this.stack_nested_layouts_beyond_safe_area({ tabBar: true });
}
@@ -894,7 +851,7 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.getViews(snippet),
this.noop,
({ root }) => {
this.layout_in_full_screen_test(root);
this.layout_in_full_screen_test(root, pageOptions);
},
pageOptions
);
@@ -948,10 +905,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.wrap_horizontal_children_components_in_safe_area({ actionBarHidden: true });
}
public test_wrap_horizontal_children_components_in_safe_area_action_bar_flat() {
this.wrap_horizontal_children_components_in_safe_area({ actionBarFlat: true });
}
public test_wrap_horizontal_children_components_in_safe_area_tab_bar() {
this.wrap_horizontal_children_components_in_safe_area({ tabBar: true });
}
@@ -988,10 +941,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.wrap_vertical_children_components_in_safe_area({ actionBarHidden: true });
}
public test_wrap_vertical_children_components_in_safe_area_action_bar_flat() {
this.wrap_vertical_children_components_in_safe_area({ actionBarFlat: true });
}
public test_wrap_vertical_children_components_in_safe_area_tab_bar() {
this.wrap_vertical_children_components_in_safe_area({ tabBar: true });
}
@@ -1025,10 +974,6 @@ export class SafeAreaTests extends testModule.UITest<any> {
this.wrap_nested_layouts_beyond_safe_area({ actionBarHidden: true });
}
public test_wrap_nested_layouts_beyond_safe_area_action_bar_flat() {
this.wrap_nested_layouts_beyond_safe_area({ actionBarFlat: true });
}
public test_wrap_nested_layouts_beyond_safe_area_tab_bar() {
this.wrap_nested_layouts_beyond_safe_area({ tabBar: true });
}

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

@@ -780,12 +780,12 @@ export namespace ios {
adjustedPosition.top = fullscreenPosition.top;
}
if (inWindowRight < fullscreenPosition.right && inWindowRight >= safeAreaPosition.right) {
adjustedPosition.right = fullscreenPosition.right;
if (inWindowRight < fullscreenPosition.right && inWindowRight >= safeAreaPosition.right + fullscreenPosition.left) {
adjustedPosition.right = fullscreenPosition.right - fullscreenPosition.left;
}
if (inWindowBottom < fullscreenPosition.bottom && inWindowBottom >= safeAreaPosition.bottom) {
adjustedPosition.bottom = fullscreenPosition.bottom;
if (inWindowBottom < fullscreenPosition.bottom && inWindowBottom >= safeAreaPosition.bottom + fullscreenPosition.top) {
adjustedPosition.bottom = fullscreenPosition.bottom - fullscreenPosition.top;
}
const adjustedFrame = CGRectMake(layout.toDeviceIndependentPixels(adjustedPosition.left), layout.toDeviceIndependentPixels(adjustedPosition.top), layout.toDeviceIndependentPixels(adjustedPosition.right - adjustedPosition.left), layout.toDeviceIndependentPixels(adjustedPosition.bottom - adjustedPosition.top));

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

@@ -311,10 +311,11 @@ export class Page extends PageBase {
View.layoutChild(this, this.actionBar, 0, 0, actionBarWidth, actionBarHeight);
const insets = this.getSafeAreaInsets();
const childLeft = left + insets.left;
const childTop = top + insets.top;
const childRight = right - insets.right;
const childBottom = bottom - insets.bottom;
const childLeft = 0 + insets.left;
const childTop = 0 + insets.top;
const childRight = right - left - insets.right;
const childBottom = bottom - top - insets.bottom;
View.layoutChild(this, this.layoutView, childLeft, childTop, childRight, childBottom);
}