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

feat(ios): enable safe area for stack and grid

Browse Source
This commit is contained in:
Martin Yankov
2018-06-13 11:40:42 +03:00
parent 71107533bb
commit d4ec355466
6 changed files with 176 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
tns-core-modules/ui/core/view/view-common.ts
View File

@@ -641,7 +641,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
}
public abstract onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void;
public abstract onLayout(left: number, top: number, right: number, bottom: number): void;
public abstract onLayout(left: number, top: number, right: number, bottom: number, insetLeft?: number, insetTop?: number): void;
public abstract layoutNativeView(left: number, top: number, right: number, bottom: number): void;
public static resolveSizeAndState(size: number, specSize: number, specMode: number, childMeasuredState: number): number {
@@ -879,6 +879,14 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
return undefined;
}
public getFullscreenArea(): any {
return undefined;
}
public getSafeArea(): any {
return undefined;
}
public getLocationInWindow(): Point {
return undefined;
}

14
tns-core-modules/ui/core/view/view.d.ts vendored
View File

@@ -404,7 +404,7 @@ export abstract class View extends ViewBase {
* @param right Right position, relative to parent
* @param bottom Bottom position, relative to parent
*/
public onLayout(left: number, top: number, right: number, bottom: number): void;
public onLayout(left: number, top: number, right: number, bottom: number, insetLeft?: number, insetTop?: number): void;
/**
* This method must be called by onMeasure(int, int) to store the measured width and measured height. Failing to do so will trigger an exception at measurement time.
@@ -527,6 +527,16 @@ export abstract class View extends ViewBase {
*/
public createAnimation(options: AnimationDefinition): Animation;
/**
* Returns the iOS safe area frame of the closest parent with UIViewController.
*/
public getSafeArea(): any;
/**
* Returns the iOS frame of the closest parent with UIViewController.
*/
public getFullscreenArea(): any;
/**
* Returns the location of this view in the window coordinate system.
*/
@@ -609,7 +619,7 @@ export abstract class View extends ViewBase {
* Called by layout method to cache view bounds.
* @private
*/
_setCurrentLayoutBounds(left: number, top: number, right: number, bottom: number): void;
_setCurrentLayoutBounds(left: number, top: number, right: number, bottom: number): { boundsChanged: boolean, sizeChanged: boolean };
/**
* Return view bounds.
* @private

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

@@ -90,7 +90,15 @@ export class View extends ViewCommon {
}
if (boundsChanged || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED) {
this.onLayout(left, top, right, bottom);
let insetLeft = 0;
let insetTop = 0;
if (this.nativeViewProtected.safeAreaInsets) {
insetLeft = layout.toDevicePixels(this.nativeViewProtected.safeAreaInsets.left);
insetTop = layout.toDevicePixels(this.nativeViewProtected.safeAreaInsets.top);
}
this.onLayout(left, top, right, bottom, insetLeft, insetTop);
this._privateFlags &= ~PFLAG_LAYOUT_REQUIRED;
}
@@ -138,7 +146,7 @@ export class View extends ViewCommon {
this.setMeasuredDimension(widthAndState, heightAndState);
}
public onLayout(left: number, top: number, right: number, bottom: number): void {
public onLayout(left: number, top: number, right: number, bottom: number, insetLeft?: number, insetTop?: number): void {
//
}
@@ -159,8 +167,30 @@ export class View extends ViewCommon {
nativeView.frame = frame;
}
if (nativeView.safeAreaInsets) {
const leftInset = layout.toDevicePixels(nativeView.safeAreaInsets.left);
const topInset = layout.toDevicePixels(nativeView.safeAreaInsets.top);
const left = layout.toDevicePixels(frame.origin.x);
const top = layout.toDevicePixels(frame.origin.y);
const right = layout.toDevicePixels(frame.origin.x + frame.size.width);
const bottom = layout.toDevicePixels(frame.origin.y + frame.size.height);
if (leftInset || topInset) {
const frameNew = CGRectMake(layout.toDeviceIndependentPixels(left + leftInset), layout.toDeviceIndependentPixels(top + topInset), layout.toDeviceIndependentPixels(right - left), layout.toDeviceIndependentPixels(bottom - top));
nativeView.frame = frameNew;
const boundsOrigin = nativeView.bounds.origin;
nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, frameNew.size.width, frameNew.size.height);
}
else {
const boundsOrigin = nativeView.bounds.origin;
nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, frame.size.width, frame.size.height);
}
}
else {
const boundsOrigin = nativeView.bounds.origin;
nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, frame.size.width, frame.size.height);
}
this._raiseLayoutChangedEvent();
this._isLaidOut = true;
} else if (!this._isLaidOut) {
@@ -203,6 +233,16 @@ export class View extends ViewCommon {
return false;
}
public getFullscreenArea(): any {
const parentWithController = ios.getParentWithViewController(this);
return parentWithController.viewController.view.frame;
}
public getSafeArea(): any {
const parentWithController = ios.getParentWithViewController(this);
return parentWithController.viewController.view.safeAreaLayoutGuide.layoutFrame;
}
public getLocationInWindow(): Point {
if (!this.nativeViewProtected || !this.nativeViewProtected.window) {
return undefined;
@@ -688,34 +728,44 @@ export namespace ios {
fullscreenSize.height -= (statusBarHeight + navBarHeight);
}
left = safeOrigin.x;
width = safeAreaSize.width;
// left = safeOrigin.x;
// width = safeAreaSize.width;
// top = safeOrigin.y;
// height = safeAreaSize.height;
if (hasChildControllers) {
// If not inner most extend to fullscreen
left = fullscreenOrigin.x;
width = fullscreenSize.width;
top = fullscreenOrigin.y;
height = fullscreenSize.height;
} else if (!scrollable) {
// If not scrollable dock under safe area
top = safeOrigin.y;
height = safeAreaSize.height;
} else if (navBarHidden) {
// If scrollable but no navigation bar dock under safe area
top = safeOrigin.y;
height = navController ? (fullscreenSize.height - top) : safeAreaSize.height;
} else {
// If scrollable and navigation bar extend to fullscreen
top = fullscreenOrigin.y;
height = fullscreenSize.height;
}
// if (hasChildControllers) {
// // If not inner most extend to fullscreen
// top = fullscreenOrigin.y;
// height = fullscreenSize.height;
// } else if (!scrollable) {
// // If not scrollable dock under safe area
// top = safeOrigin.y;
// height = safeAreaSize.height;
// } else if (navBarHidden) {
// // If scrollable but no navigation bar dock under safe area
// top = safeOrigin.y;
// height = navController ? (fullscreenSize.height - top) : safeAreaSize.height;
// } else {
// // If scrollable and navigation bar extend to fullscreen
// top = fullscreenOrigin.y;
// height = fullscreenSize.height;
// }
left = layout.toDevicePixels(left);
top = layout.toDevicePixels(top);
width = layout.toDevicePixels(width);
height = layout.toDevicePixels(height);
const widthSpec = layout.makeMeasureSpec(width, layout.EXACTLY);
const heightSpec = layout.makeMeasureSpec(height, layout.EXACTLY);
const safeAreaWidth = layout.toDevicePixels(safeAreaSize.width);
const safeAreaHeight = layout.toDevicePixels(safeAreaSize.height);
const widthSpec = layout.makeMeasureSpec(safeAreaWidth, layout.EXACTLY);
const heightSpec = layout.makeMeasureSpec(safeAreaHeight, layout.EXACTLY);
View.measureChild(null, owner, widthSpec, heightSpec);
View.layoutChild(null, owner, left, top, width + left, height + top);

6
tns-core-modules/ui/layouts/grid-layout/grid-layout.ios.ts
View File

@@ -156,11 +156,11 @@ export class GridLayout extends GridLayoutBase {
this.setMeasuredDimension(widthSizeAndState, heightSizeAndState);
}
public onLayout(left: number, top: number, right: number, bottom: number): void {
public onLayout(left: number, top: number, right: number, bottom: number, insetLeft?: number, insetTop?: number): void {
super.onLayout(left, top, right, bottom);
let paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft;
let paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop;
let paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + insetLeft;
let paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + insetTop;
this.columnOffsets.length = 0;
this.rowOffsets.length = 0;

73
tns-core-modules/ui/layouts/layout-base.ios.ts
View File

@@ -1,5 +1,5 @@
import {
LayoutBaseCommon, clipToBoundsProperty, isPassThroughParentEnabledProperty, View
import {
LayoutBaseCommon, clipToBoundsProperty, isPassThroughParentEnabledProperty, View, layout
} from "./layout-base-common";
export * from "./layout-base-common";
@@ -30,6 +30,75 @@ export class LayoutBase extends LayoutBaseCommon {
}
}
public _setNativeViewFrame(nativeView: UIView, frame: CGRect) {
// if (!CGRectEqualToRect(nativeView.frame, frame)) {
// if (traceEnabled()) {
// traceWrite(this + ", Native setFrame: = " + NSStringFromCGRect(frame), traceCategories.Layout);
// }
// this._cachedFrame = frame;
// if (this._hasTransfrom) {
// // Always set identity transform before setting frame;
// const transform = nativeView.transform;
// nativeView.transform = CGAffineTransformIdentity;
// nativeView.frame = frame;
// nativeView.transform = transform;
// }
// else {
// nativeView.frame = frame;
// }
nativeView.frame = frame;
const safeArea = this.getSafeArea();
const fullscreen = this.getFullscreenArea();
const locationOnScreen = this.getLocationOnScreen();
const onScreenLeft = layout.toDevicePixels(layout.round(locationOnScreen.x));
const onScreenTop = layout.toDevicePixels(layout.round(locationOnScreen.y));
let left = layout.toDevicePixels(frame.origin.x);
let top = layout.toDevicePixels(frame.origin.y);
let width = layout.toDevicePixels(frame.size.width);
let height = layout.toDevicePixels(frame.size.height);
let newLeft = left;
let newTop = top;
let newWidth = width;
let newHeight = height;
if (onScreenLeft <= layout.toDevicePixels(safeArea.origin.x)) {
newLeft = layout.toDevicePixels(fullscreen.origin.x);
newWidth = width + onScreenLeft;
}
if (onScreenTop <= layout.toDevicePixels(safeArea.origin.y)) {
newTop = layout.toDevicePixels(fullscreen.origin.y);
newHeight = height + onScreenTop;
}
if (onScreenLeft + width >= layout.toDevicePixels(safeArea.origin.x) + layout.toDevicePixels(safeArea.size.width)) {
newWidth = newWidth + (layout.toDevicePixels(fullscreen.size.width) - (onScreenLeft + width));
}
if (onScreenTop + height >= layout.toDevicePixels(safeArea.origin.y) + 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) {
// const frameNew = CGRectMake(layout.toDeviceIndependentPixels(left), layout.toDeviceIndependentPixels(top), layout.toDeviceIndependentPixels(right - left + leftInset), layout.toDeviceIndependentPixels(bottom - top + topInset));
// nativeView.frame = frameNew;
// const boundsOrigin = nativeView.bounds.origin;
// nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, frameNew.size.width, frameNew.size.height);
// }
// else {
const boundsOrigin = nativeView.bounds.origin;
nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, frameNew.size.width, frameNew.size.height);
// }
// }
}
[clipToBoundsProperty.getDefault](): boolean {
return false;
}

11
tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts
View File

@@ -81,25 +81,26 @@ export class StackLayout extends StackLayoutBase {
this.setMeasuredDimension(widthAndState, heightAndState);
}
public onLayout(left: number, top: number, right: number, bottom: number): void {
public onLayout(left: number, top: number, right: number, bottom: number, insetLeft?: number, insetTop?: number): void {
super.onLayout(left, top, right, bottom);
if (this.orientation === "vertical") {
this.layoutVertical(left, top, right, bottom);
this.layoutVertical(left, top, right, bottom, insetLeft, insetTop);
}
else {
this.layoutHorizontal(left, top, right, bottom);
}
}
private layoutVertical(left: number, top: number, right: number, bottom: number): void {
const paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft;
const paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop;
private layoutVertical(left: number, top: number, right: number, bottom: number, insetLeft?: number, insetTop?: number): void {
const paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + insetLeft;
const paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + insetTop;
const paddingRight = this.effectiveBorderRightWidth + this.effectivePaddingRight;
const paddingBottom = this.effectiveBorderBottomWidth + this.effectivePaddingBottom;
let childTop: number;
let childLeft: number = paddingLeft;
let childRight = right - left - paddingRight;
// let childRight = right - paddingRight;
switch (this.verticalAlignment) {
case VerticalAlignment.MIDDLE: