Skip to content

Commit 1e86ed9

Browse files
CatchABusCatchABus
authored
fix(ios): background styles after frame changed by safe area (#10661)
1 parent 8774263 commit 1e86ed9

File tree

9 files changed

+47
-57
lines changed

9 files changed

+47
-57
lines changed

‎packages/core/ui/core/view/index.android.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Definitions.
2-
import type { Point, CustomLayoutView as CustomLayoutViewDefinition } from '.';
2+
import type { Point, CustomLayoutView as CustomLayoutViewDefinition, Position } from '.';
33
import type { GestureTypes, GestureEventData } from '../../gestures';
44

55
// Types.
@@ -577,12 +577,7 @@ export class View extends ViewCommon {
577577
}
578578
}
579579

580-
_getCurrentLayoutBounds(): {
581-
left: number;
582-
top: number;
583-
right: number;
584-
bottom: number;
585-
} {
580+
_getCurrentLayoutBounds(): Position {
586581
if (this.nativeViewProtected && !this.isCollapsed) {
587582
return {
588583
left: this.nativeViewProtected.getLeft(),

‎packages/core/ui/core/view/index.d.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,13 @@ export interface Point {
6464
z?: number;
6565
}
6666

67+
export interface Position {
68+
top: number;
69+
right: number;
70+
bottom: number;
71+
left: number;
72+
}
73+
6774
/**
6875
* The Size interface describes abstract dimensions in two dimensional space.
6976
* It has two properties width and height, representing the width and height values of the size.
@@ -857,7 +864,7 @@ export abstract class View extends ViewCommon {
857864
/**
858865
* Returns the iOS safe area insets of this view.
859866
*/
860-
public getSafeAreaInsets(): { left; top; right; bottom };
867+
public getSafeAreaInsets(): Position;
861868

862869
/**
863870
* Returns the location of this view in the window coordinate system.
@@ -1013,12 +1020,7 @@ export abstract class View extends ViewCommon {
10131020
* Return view bounds.
10141021
* @private
10151022
*/
1016-
_getCurrentLayoutBounds(): {
1017-
left: number;
1018-
top: number;
1019-
right: number;
1020-
bottom: number;
1021-
};
1023+
_getCurrentLayoutBounds(): Position;
10221024
/**
10231025
* @private
10241026
*/

‎packages/core/ui/core/view/index.ios.ts

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Types.
2-
import { Point, View as ViewDefinition } from '.';
2+
import { Point, Position, View as ViewDefinition } from '.';
33

44
// Requires
55
import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUserInteractionEnabledProperty, testIDProperty } from './view-common';
@@ -108,19 +108,31 @@ export class View extends ViewCommon implements ViewDefinition {
108108

109109
@profile
110110
public layout(left: number, top: number, right: number, bottom: number, setFrame = true): void {
111-
const { boundsChanged, sizeChanged } = this._setCurrentLayoutBounds(left, top, right, bottom);
111+
const result = this._setCurrentLayoutBounds(left, top, right, bottom);
112+
let { sizeChanged } = result;
113+
112114
if (setFrame) {
113115
this.layoutNativeView(left, top, right, bottom);
114116
}
115117

116-
const needsLayout = boundsChanged || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED;
118+
const needsLayout = result.boundsChanged || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED;
117119
if (needsLayout) {
118-
let position = { left, top, right, bottom };
120+
let position: Position;
121+
119122
if (this.nativeViewProtected && SDK_VERSION > 10) {
120123
// on iOS 11+ it is possible to have a changed layout frame due to safe area insets
121124
// get the frame and adjust the position, so that onLayout works correctly
122-
const frame = this.nativeViewProtected.frame;
123-
position = IOSHelper.getPositionFromFrame(frame);
125+
position = IOSHelper.getPositionFromFrame(this.nativeViewProtected.frame);
126+
127+
if (!sizeChanged) {
128+
// If frame has actually changed, there is the need to update view background and border styles as they depend on native view bounds
129+
// To trigger the needed visual update, mark size as changed
130+
if (position.left !== left || position.top !== top || position.right !== right || position.bottom !== bottom) {
131+
sizeChanged = true;
132+
}
133+
}
134+
} else {
135+
position = { left, top, right, bottom };
124136
}
125137

126138
this.onLayout(position.left, position.top, position.right, position.bottom);
@@ -316,7 +328,7 @@ export class View extends ViewCommon implements ViewDefinition {
316328
return null;
317329
}
318330

319-
public getSafeAreaInsets(): { left; top; right; bottom } {
331+
public getSafeAreaInsets(): Position {
320332
const safeAreaInsets = this.nativeViewProtected && this.nativeViewProtected.safeAreaInsets;
321333
const insets = { left: 0, top: 0, right: 0, bottom: 0 };
322334
if (this.iosIgnoreSafeArea) {
@@ -938,12 +950,7 @@ export class View extends ViewCommon implements ViewDefinition {
938950
});
939951
}
940952

941-
_getCurrentLayoutBounds(): {
942-
left: number;
943-
top: number;
944-
right: number;
945-
bottom: number;
946-
} {
953+
_getCurrentLayoutBounds(): Position {
947954
const nativeView = this.nativeViewProtected;
948955
if (nativeView && !this.isCollapsed) {
949956
const frame = nativeView.frame;

‎packages/core/ui/core/view/view-common.ts

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Definitions.
2-
import { View as ViewDefinition, Point, Size, ShownModallyData } from '.';
2+
import { View as ViewDefinition, Point, Size, ShownModallyData, Position } from '.';
33

44
import { booleanConverter, ShowModalOptions, ViewBase } from '../view-base';
55
import { getEventOrGestureName } from '../bindable';
@@ -1066,12 +1066,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
10661066
return changed;
10671067
}
10681068

1069-
_getCurrentLayoutBounds(): {
1070-
left: number;
1071-
top: number;
1072-
right: number;
1073-
bottom: number;
1074-
} {
1069+
_getCurrentLayoutBounds(): Position {
10751070
return { left: 0, top: 0, right: 0, bottom: 0 };
10761071
}
10771072

@@ -1110,7 +1105,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
11101105
return undefined;
11111106
}
11121107

1113-
public getSafeAreaInsets(): { left; top; right; bottom } {
1108+
public getSafeAreaInsets(): Position {
11141109
return { left: 0, top: 0, right: 0, bottom: 0 };
11151110
}
11161111

‎packages/core/ui/core/view/view-helper/index.d.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { View } from '..';
1+
import { Position, View } from '..';
22

33
export class ViewHelper {
44
/**
@@ -60,8 +60,8 @@ export namespace IOSHelper {
6060
export function updateAutoAdjustScrollInsets(controller: any /* UIViewController */, owner: View): void;
6161
export function updateConstraints(controller: any /* UIViewController */, owner: View): void;
6262
export function layoutView(controller: any /* UIViewController */, owner: View): void;
63-
export function getPositionFromFrame(frame: any /* CGRect */): { left; top; right; bottom };
64-
export function getFrameFromPosition(position: { left; top; right; bottom }, insets?: { left; top; right; bottom }): any; /* CGRect */
63+
export function getPositionFromFrame(frame: any /* CGRect */): Position;
64+
export function getFrameFromPosition(position: Position, insets?: Position): any; /* CGRect */
6565
export function shrinkToSafeArea(view: View, frame: any /* CGRect */): any; /* CGRect */
6666
export function expandBeyondSafeArea(view: View, frame: any /* CGRect */): any; /* CGRect */
6767
export class UILayoutViewController {

‎packages/core/ui/core/view/view-helper/index.ios.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Types
2-
import { View } from '..';
2+
import { Position, View } from '..';
33

44
// Requires
55
import { ViewHelper } from './view-helper-common';
@@ -247,7 +247,7 @@ export class IOSHelper {
247247
}
248248
}
249249

250-
static getPositionFromFrame(frame: CGRect): { left; top; right; bottom } {
250+
static getPositionFromFrame(frame: CGRect): Position {
251251
const left = layout.round(layout.toDevicePixels(frame.origin.x));
252252
const top = layout.round(layout.toDevicePixels(frame.origin.y));
253253
const right = layout.round(layout.toDevicePixels(frame.origin.x + frame.size.width));
@@ -256,7 +256,7 @@ export class IOSHelper {
256256
return { left, right, top, bottom };
257257
}
258258

259-
static getFrameFromPosition(position: { left; top; right; bottom }, insets?: { left; top; right; bottom }): CGRect {
259+
static getFrameFromPosition(position: Position, insets?: Position): CGRect {
260260
insets = insets || { left: 0, top: 0, right: 0, bottom: 0 };
261261

262262
const left = layout.toDeviceIndependentPixels(position.left + insets.left);

‎packages/core/ui/layouts/flexbox-layout/index.ios.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent, FlexboxLayoutBase, FlexBasisPercent, orderProperty, flexGrowProperty, flexShrinkProperty, flexWrapBeforeProperty, alignSelfProperty } from './flexbox-layout-common';
2-
import { View } from '../../core/view';
2+
import { Position, View } from '../../core/view';
33
import { layout } from '../../../utils';
44

55
export * from './flexbox-layout-common';
@@ -977,7 +977,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
977977
}
978978
}
979979

980-
private _layoutHorizontal(isRtl: boolean, left: number, top: number, right: number, bottom: number, insets: { left; top; right; bottom }) {
980+
private _layoutHorizontal(isRtl: boolean, left: number, top: number, right: number, bottom: number, insets: Position) {
981981
// include insets
982982
const paddingLeft = this.effectivePaddingLeft + insets.left;
983983
const paddingTop = this.effectivePaddingTop + insets.top;
@@ -1122,7 +1122,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
11221122
}
11231123
}
11241124

1125-
private _layoutVertical(isRtl: boolean, fromBottomToTop: boolean, left: number, top: number, right: number, bottom: number, insets: { left; top; right; bottom }) {
1125+
private _layoutVertical(isRtl: boolean, fromBottomToTop: boolean, left: number, top: number, right: number, bottom: number, insets: Position) {
11261126
const paddingLeft = this.effectivePaddingLeft + insets.left;
11271127
const paddingTop = this.effectivePaddingTop + insets.top;
11281128
const paddingRight = this.effectivePaddingRight + insets.right;

‎packages/core/ui/layouts/stack-layout/index.ios.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { StackLayoutBase } from './stack-layout-common';
22
import { CoreTypes } from '../../../core-types';
3-
import { View } from '../../core/view';
3+
import { Position, View } from '../../core/view';
44
import { layout } from '../../../utils';
55
import { Trace } from '../../../trace';
66

@@ -101,7 +101,7 @@ export class StackLayout extends StackLayoutBase {
101101
}
102102
}
103103

104-
private layoutVertical(left: number, top: number, right: number, bottom: number, insets: { left; top; right; bottom }): void {
104+
private layoutVertical(left: number, top: number, right: number, bottom: number, insets: Position): void {
105105
const paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + insets.left;
106106
const paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + insets.top;
107107
const paddingRight = this.effectiveBorderRightWidth + this.effectivePaddingRight + insets.right;
@@ -135,7 +135,7 @@ export class StackLayout extends StackLayoutBase {
135135
});
136136
}
137137

138-
private layoutHorizontal(left: number, top: number, right: number, bottom: number, insets: { left; top; right; bottom }): void {
138+
private layoutHorizontal(left: number, top: number, right: number, bottom: number, insets: Position): void {
139139
const paddingLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + insets.left;
140140
const paddingTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + insets.top;
141141
const paddingRight = this.effectiveBorderRightWidth + this.effectivePaddingRight + insets.right;

‎packages/core/ui/styling/background.ios.ts

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { ScrollEventData } from '../scroll-view';
2-
import { CoreTypes } from '../../core-types';
32
import { Background as BackgroundDefinition } from './background';
4-
import { View, Point } from '../core/view';
3+
import { View, Point, Position } from '../core/view';
54
import { LinearGradient } from './linear-gradient';
6-
import { Color } from '../../color';
75
import { Screen } from '../../platform';
86
import { isDataURI, isFileOrResourcePath, layout } from '../../utils';
97
import { ios as iosViewUtils, NativeScriptUIView } from '../utils';
@@ -16,13 +14,6 @@ import { BackgroundClearFlags } from './background-common';
1614

1715
export * from './background-common';
1816

19-
interface Position {
20-
top: number;
21-
right: number;
22-
bottom: number;
23-
left: number;
24-
}
25-
2617
interface BackgroundDrawParams {
2718
repeatX: boolean;
2819
repeatY: boolean;

0 commit comments

Comments
 (0)