Skip to content

Commit b8e0bec

Browse files
ADjenkovADjenkov
authored
fix(ios-layouts): switch contentInsetAdjustmentBehavior on ScrollView (NativeScript#5411)
* fix(layouts): switch contentInsetAdjustmentBehavior on ScrollView * chore(ui-tests-app): add test for ScrollView as a root Page element
1 parent e1eea8e commit b8e0bec

File tree

7 files changed

+59
-5
lines changed

7 files changed

+59
-5
lines changed

‎apps/app/ui-tests-app/scroll-view/main-page.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,7 @@ export function pageLoaded(args: EventData) {
1212
export function loadExamples() {
1313
const examples = new Map<string, string>();
1414
examples.set("scrolling-and-sizing", "scroll-view/scrolling-and-sizing");
15+
examples.set("safe-area-root-element", "scroll-view/safe-area-root-element");
16+
examples.set("safe-area-sub-element", "scroll-view/safe-area-sub-element");
1517
return examples;
1618
}

‎apps/app/ui-tests-app/scroll-view/safe-area-root-element.xml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
2+
3+
<Page.actionBar>
4+
<ActionBar title="My App" icon="" class="action-bar">
5+
</ActionBar>
6+
</Page.actionBar>
7+
8+
<ScrollView>
9+
<StackLayout>
10+
<GridLayout height="30" backgroundColor="red" />
11+
<GridLayout height="30" backgroundColor="yellow" />
12+
<GridLayout height="30" backgroundColor="green" />
13+
</StackLayout>
14+
</ScrollView>
15+
</Page>

‎apps/app/ui-tests-app/scroll-view/safe-area-sub-element.xml‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
2+
3+
<Page.actionBar>
4+
<ActionBar title="My App" icon="" class="action-bar">
5+
</ActionBar>
6+
</Page.actionBar>
7+
8+
<GridLayout>
9+
<ScrollView height="50" verticalAlignment="top">
10+
<StackLayout>
11+
<GridLayout height="30" backgroundColor="red" />
12+
<GridLayout height="30" backgroundColor="yellow" />
13+
<GridLayout height="30" backgroundColor="green" />
14+
</StackLayout>
15+
</ScrollView>
16+
</GridLayout>
17+
</Page>

‎tns-core-modules/ui/core/view-base/view-base.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,10 @@ export abstract class ViewBase extends Observable {
372372
public _isPaddingRelative: boolean;
373373
public _styleScope: any;
374374

375+
/**
376+
* @private
377+
*/
378+
public _automaticallyAdjustsScrollViewInsets: boolean;
375379
/**
376380
* @private
377381
*/

‎tns-core-modules/ui/core/view-base/view-base.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
178178
private _templateParent: ViewBase;
179179
private __nativeView: any;
180180
// private _disableNativeViewRecycling: boolean;
181-
181+
182182
public domNode: dnm.DOMNode;
183183

184184
public recycleNativeView: "always" | "never" | "auto";
@@ -199,6 +199,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
199199
public _suspendedUpdates: { [propertyName: string]: Property<ViewBase, any> | CssProperty<Style, any> | CssAnimationProperty<Style, any> };
200200
public _suspendNativeUpdatesCount: SuspendType;
201201
public _isStyleScopeHost: boolean;
202+
public _automaticallyAdjustsScrollViewInsets: boolean;
202203

203204
// Dynamic properties.
204205
left: Length;

‎tns-core-modules/ui/core/view/view.ios.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -592,6 +592,8 @@ export namespace ios {
592592

593593
export function updateAutoAdjustScrollInsets(controller: UIViewController, owner: View): void {
594594
const scrollable = isContentScrollable(controller, owner);
595+
596+
owner._automaticallyAdjustsScrollViewInsets = scrollable;
595597
controller.automaticallyAdjustsScrollViewInsets = scrollable;
596598
}
597599

@@ -733,7 +735,7 @@ export namespace ios {
733735
if(!owner){
734736
return;
735737
}
736-
738+
737739
updateAutoAdjustScrollInsets(this, owner);
738740

739741
if (!owner.parent) {

‎tns-core-modules/ui/scroll-view/scroll-view.ios.ts‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { ScrollEventData } from ".";
22
import { View, layout, ScrollViewBase, scrollBarIndicatorVisibleProperty } from "./scroll-view-common";
3+
import { ios as iosUtils } from "../../utils/utils";
34
// HACK: Webpack. Use a fully-qualified import to allow resolve.extensions(.ios.js) to
45
// kick in. `../utils` doesn't seem to trigger the webpack extensions mechanism.
56
import * as uiUtils from "tns-core-modules/ui/utils";
67

78
export * from "./scroll-view-common";
89

10+
const majorVersion = iosUtils.MajorVersion;
11+
912
class UIScrollViewDelegateImpl extends NSObject implements UIScrollViewDelegate {
1013
private _owner: WeakRef<ScrollView>;
1114

@@ -61,7 +64,7 @@ export class ScrollView extends ScrollViewBase {
6164
this.nativeViewProtected.showsHorizontalScrollIndicator = value;
6265
} else {
6366
this.nativeViewProtected.showsVerticalScrollIndicator = value;
64-
}
67+
}
6568
}
6669

6770
get horizontalOffset(): number {
@@ -92,7 +95,7 @@ export class ScrollView extends ScrollViewBase {
9295
return true;
9396
}
9497
[scrollBarIndicatorVisibleProperty.setNative](value: boolean) {
95-
this.updateScrollBarVisibility(value);
98+
this.updateScrollBarVisibility(value);
9699
}
97100

98101
public scrollToVerticalOffset(value: number, animated: boolean) {
@@ -120,6 +123,16 @@ export class ScrollView extends ScrollViewBase {
120123
const child = this.layoutView;
121124
this._contentMeasuredWidth = this.effectiveMinWidth;
122125
this._contentMeasuredHeight = this.effectiveMinHeight;
126+
127+
// `_automaticallyAdjustsScrollViewInsets` is set to true only if the first child
128+
// of UIViewController (Page, TabView e.g) is UIScrollView (ScrollView, ListView e.g).
129+
// On iOS 11 by default UIScrollView automatically adjusts the scroll view insets, but they s
130+
if (majorVersion > 10 && !this.parent._automaticallyAdjustsScrollViewInsets) {
131+
// Disable automatic adjustment of scroll view insets when ScrollView
132+
// is not the first child of UIViewController.
133+
this.nativeViewProtected.contentInsetAdjustmentBehavior = 2;
134+
}
135+
123136
if (child) {
124137
let childSize: { measuredWidth: number; measuredHeight: number };
125138
if (this.orientation === "vertical") {
@@ -165,7 +178,7 @@ export class ScrollView extends ScrollViewBase {
165178
}
166179

167180
public _onOrientationChanged() {
168-
this.updateScrollBarVisibility(this.scrollBarIndicatorVisible);
181+
this.updateScrollBarVisibility(this.scrollBarIndicatorVisible);
169182
}
170183
}
171184

0 commit comments

Comments
 (0)