fix safe area for ios 10 and less

This commit is contained in:
Martin Yankov
2018-07-13 15:41:35 +03:00
parent ef4489781e
commit cddc0a682a
2 changed files with 42 additions and 36 deletions

View File

@@ -24,6 +24,8 @@ const PFLAG_FORCE_LAYOUT = 1;
const PFLAG_MEASURED_DIMENSION_SET = 1 << 1; const PFLAG_MEASURED_DIMENSION_SET = 1 << 1;
const PFLAG_LAYOUT_REQUIRED = 1 << 2; const PFLAG_LAYOUT_REQUIRED = 1 << 2;
const majorVersion = iosUtils.MajorVersion;
export class View extends ViewCommon { export class View extends ViewCommon {
nativeViewProtected: UIView; nativeViewProtected: UIView;
viewController: UIViewController; viewController: UIViewController;
@@ -87,14 +89,13 @@ export class View extends ViewCommon {
const { boundsChanged, sizeChanged } = this._setCurrentLayoutBounds(left, top, right, bottom); const { boundsChanged, sizeChanged } = this._setCurrentLayoutBounds(left, top, right, bottom);
let actualPosition = {left, top, right, bottom}; let actualPosition = {left, top, right, bottom};
if (setFrame) { if (setFrame) {
// The actual position of a native view can change in case of safe area violation or expansion
actualPosition = this.layoutNativeView(left, top, right, bottom) || actualPosition; actualPosition = this.layoutNativeView(left, top, right, bottom) || actualPosition;
} }
if (boundsChanged || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED) { if (boundsChanged || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED) {
let insets = { left: 0, top: 0, right: 0, bottom: 0}; let insets = { left: 0, top: 0, right: 0, bottom: 0};
if (this.nativeViewProtected.safeAreaInsets) { if (majorVersion > 10) {
insets.left = layout.toDevicePixels(this.nativeViewProtected.safeAreaInsets.left); insets.left = layout.toDevicePixels(this.nativeViewProtected.safeAreaInsets.left);
insets.top = layout.toDevicePixels(this.nativeViewProtected.safeAreaInsets.top); insets.top = layout.toDevicePixels(this.nativeViewProtected.safeAreaInsets.top);
insets.right = layout.toDevicePixels(this.nativeViewProtected.safeAreaInsets.right); insets.right = layout.toDevicePixels(this.nativeViewProtected.safeAreaInsets.right);
@@ -740,15 +741,15 @@ export namespace ios {
fullscreenSize.height -= (statusBarHeight + navBarHeight); fullscreenSize.height -= (statusBarHeight + navBarHeight);
} }
// left = safeOrigin.x; left = safeOrigin.x;
// width = safeAreaSize.width; width = safeAreaSize.width;
// top = safeOrigin.y; top = safeOrigin.y;
// height = safeAreaSize.height; height = safeAreaSize.height;
left = fullscreenOrigin.x; // left = fullscreenOrigin.x;
width = fullscreenSize.width; // width = fullscreenSize.width;
top = fullscreenOrigin.y; // top = fullscreenOrigin.y;
height = fullscreenSize.height; // height = fullscreenSize.height;
// if (hasChildControllers) { // if (hasChildControllers) {
// // If not inner most extend to fullscreen // // If not inner most extend to fullscreen

View File

@@ -1,9 +1,12 @@
import { import {
LayoutBaseCommon, clipToBoundsProperty, isPassThroughParentEnabledProperty, View, layout LayoutBaseCommon, clipToBoundsProperty, isPassThroughParentEnabledProperty, View, layout
} from "./layout-base-common"; } from "./layout-base-common";
import { ios as iosUtils } from "../../utils/utils";
export * from "./layout-base-common"; export * from "./layout-base-common";
const majorVersion = iosUtils.MajorVersion;
export class LayoutBase extends LayoutBaseCommon { export class LayoutBase extends LayoutBaseCommon {
nativeViewProtected: UIView; nativeViewProtected: UIView;
@@ -60,33 +63,35 @@ export class LayoutBase extends LayoutBaseCommon {
let width = layout.toDevicePixels(frame.size.width); let width = layout.toDevicePixels(frame.size.width);
let height = layout.toDevicePixels(frame.size.height); let height = layout.toDevicePixels(frame.size.height);
let newLeft = left; if (majorVersion > 10) {
let newTop = top; let newLeft = left;
let newWidth = width; let newTop = top;
let newHeight = height; let newWidth = width;
let newHeight = height;
if (onScreenLeft <= layout.toDevicePixels(safeArea.origin.x)) { if (onScreenLeft <= layout.toDevicePixels(safeArea.origin.x)) {
newLeft = layout.toDevicePixels(fullscreen.origin.x); newLeft = layout.toDevicePixels(fullscreen.origin.x);
newWidth = width + onScreenLeft; newWidth = width + onScreenLeft;
}
if (onScreenTop <= layout.toDevicePixels(safeArea.origin.y)) {
newTop = layout.toDevicePixels(fullscreen.origin.y);
newHeight = height + onScreenTop;
}
if (width && onScreenLeft + width >= layout.toDevicePixels(safeArea.origin.x) + layout.toDevicePixels(safeArea.size.width)) {
newWidth = newWidth + (layout.toDevicePixels(fullscreen.size.width) - (onScreenLeft + width));
}
if (height && onScreenTop + height >= layout.toDevicePixels(safeArea.origin.y) + layout.toDevicePixels(safeArea.size.height)) {
// console.log(">>>>>>>> Bottom Layout: onScreenTop - " + onScreenTop + " height - " + height + " safeAreaOriginY - " + layout.toDevicePixels(safeArea.origin.y) + " safeAreaHeight - " + layout.toDevicePixels(safeArea.size.height));
newHeight = newHeight + (layout.toDevicePixels(fullscreen.size.height) - (onScreenTop + height));
}
const frameNew = CGRectMake(layout.toDeviceIndependentPixels(newLeft), layout.toDeviceIndependentPixels(newTop), layout.toDeviceIndependentPixels(newWidth), layout.toDeviceIndependentPixels(newHeight));
nativeView.frame = frameNew;
} }
if (onScreenTop <= layout.toDevicePixels(safeArea.origin.y)) {
newTop = layout.toDevicePixels(fullscreen.origin.y);
newHeight = height + onScreenTop;
}
if (width && onScreenLeft + width >= layout.toDevicePixels(safeArea.origin.x) + layout.toDevicePixels(safeArea.size.width)) {
newWidth = newWidth + (layout.toDevicePixels(fullscreen.size.width) - (onScreenLeft + width));
}
if (height && onScreenTop + height >= layout.toDevicePixels(safeArea.origin.y) + layout.toDevicePixels(safeArea.size.height)) {
// console.log(">>>>>>>> Bottom Layout: onScreenTop - " + onScreenTop + " height - " + height + " safeAreaOriginY - " + layout.toDevicePixels(safeArea.origin.y) + " safeAreaHeight - " + layout.toDevicePixels(safeArea.size.height));
newHeight = newHeight + (layout.toDevicePixels(fullscreen.size.height) - (onScreenTop + height));
}
const frameNew = CGRectMake(layout.toDeviceIndependentPixels(newLeft), layout.toDeviceIndependentPixels(newTop), layout.toDeviceIndependentPixels(newWidth), layout.toDeviceIndependentPixels(newHeight));
nativeView.frame = frameNew;
// if (leftInset || topInset) { // if (leftInset || topInset) {
// const frameNew = CGRectMake(layout.toDeviceIndependentPixels(left), layout.toDeviceIndependentPixels(top), layout.toDeviceIndependentPixels(right - left + leftInset), layout.toDeviceIndependentPixels(bottom - top + topInset)); // const frameNew = CGRectMake(layout.toDeviceIndependentPixels(left), layout.toDeviceIndependentPixels(top), layout.toDeviceIndependentPixels(right - left + leftInset), layout.toDeviceIndependentPixels(bottom - top + topInset));
// nativeView.frame = frameNew; // nativeView.frame = frameNew;
@@ -95,11 +100,11 @@ export class LayoutBase extends LayoutBaseCommon {
// } // }
// else { // else {
const boundsOrigin = nativeView.bounds.origin; const boundsOrigin = nativeView.bounds.origin;
nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, frameNew.size.width, frameNew.size.height); nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, nativeView.frame.size.width, nativeView.frame.size.height);
// } // }
// } // }
return frameNew; return nativeView.frame;
} }
[clipToBoundsProperty.getDefault](): boolean { [clipToBoundsProperty.getDefault](): boolean {