Skip to content

Commit 63be78a

Browse files
MartoYankovMartoYankov
authored
fix(listview): incorrect layout when scroll (#6656)
1 parent 30df4d9 commit 63be78a

7 files changed

Lines changed: 76 additions & 3 deletions

File tree

‎apps/app/ui-tests-app/issues/issue-ng-repo-1626.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { fromObject } from "tns-core-modules/data/observable";
2+
3+
export function onLoaded(args) {
4+
const page = args.object;
5+
page.bindingContext = fromObject({
6+
items: [
7+
{ id: 1, name: "Ter Stegen", role: "Goalkeeper" },
8+
{ id: 3, name: "Piqué", role: "Defender" },
9+
{ id: 4, name: "I. Rakitic", role: "Midfielder" },
10+
{ id: 5, name: "Sergio", role: "Midfielder" },
11+
{ id: 6, name: "Denis Suárez", role: "Midfielder\nSecond line for the sake of testing" },
12+
{ id: 7, name: "Arda", role: "Midfielder" },
13+
{ id: 8, name: "A. Iniesta", role: "Midfielder" },
14+
{ id: 9, name: "Suárez", role: "Forward" },
15+
{ id: 10, name: "Messi", role: "Forward" },
16+
{ id: 11, name: "Neymar", role: "Forward\nSecond line for the sake of testing" },
17+
{ id: 12, name: "Rafinha", role: "Midfielder\nSecond line for the sake of testing" },
18+
{ id: 13, name: "Cillessen", role: "Goalkeeper\nSecond line for the sake of testing" },
19+
{ id: 14, name: "Mascherano", role: "Defender" },
20+
{ id: 17, name: "Paco Alcácer", role: "Forward" },
21+
{ id: 18, name: "Jordi Alba", role: "Defender\nSecond line for the sake of testing" },
22+
{ id: 19, name: "Digne", role: "Defender" },
23+
{ id: 20, name: "Sergi Roberto", role: "Midfielder\nSecond line for the sake of testing" },
24+
{ id: 21, name: "André Gomes", role: "Midfielder\nSecond line for the sake of testing" },
25+
{ id: 22, name: "Aleix Vidal", role: "Midfielder" },
26+
{ id: 23, name: "Umtiti", role: "Defender" },
27+
{ id: 24, name: "Mathieu", role: "Defender" },
28+
{ id: 25, name: "Masip", role: "Goalkeeper" },
29+
]
30+
});
31+
}

‎apps/app/ui-tests-app/issues/issue-ng-repo-1626.xml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<Page loaded="onLoaded">
2+
<ActionBar title="issue-ng-repo-1626"></ActionBar>
3+
4+
<StackLayout backgroundColor="red">
5+
<ListView items="{{ items }}" class="list-group">
6+
<ListView.itemTemplate>
7+
<StackLayout>
8+
<StackLayout backgroundColor="gray">
9+
<Label text="{{ name }}" class="list-group-item"></Label>
10+
<Label text="{{ id }}" class="list-group-item"></Label>
11+
</StackLayout>
12+
<StackLayout backgroundColor="darkgray">
13+
<StackLayout backgroundColor="darkblue">
14+
<Label text="{{ role }}"></Label>
15+
<Label text="id is odd" visibility="{{ id%2 == 1 ? 'visible' : 'collapsed' }}"></Label>
16+
</StackLayout>
17+
<StackLayout backgroundColor="darkred">
18+
<Label text="{{ role }}"></Label>
19+
<Label text="id is odd" visibility="{{ id%2 == 1 ? 'visible' : 'collapsed' }}"></Label>
20+
</StackLayout>
21+
<Label text="{{ role }}"></Label>
22+
<Label text="id is odd" visibility="{{ id%2 == 1 ? 'visible' : 'collapsed' }}"></Label>
23+
</StackLayout>
24+
</StackLayout>
25+
</ListView.itemTemplate>
26+
</ListView>
27+
</StackLayout>
28+
</Page>

‎apps/app/ui-tests-app/issues/main-page.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export function loadExamples() {
2828
examples.set("4450", "issues/issue-4450");
2929
examples.set("5274", "issues/issue-5274");
3030
examples.set("ng-repo-1599", "issues/issue-ng-repo-1599");
31+
examples.set("ng-repo-1626", "issues/issue-ng-repo-1626");
3132
examples.set("6439", "issues/issue-6439");
3233

3334
return examples;

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import {
66

77
import {
88
ViewBase, Property, booleanConverter, EventData, layout,
9-
getEventOrGestureName, traceEnabled, traceWrite, traceCategories
9+
getEventOrGestureName, traceEnabled, traceWrite, traceCategories,
10+
InheritedProperty
1011
} from "../view-base";
1112

1213
import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength } from "../../styling/style-properties";
@@ -588,6 +589,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
588589
public isEnabled: boolean;
589590
public isUserInteractionEnabled: boolean;
590591
public iosOverflowSafeArea: boolean;
592+
public iosOverflowSafeAreaEnabled: boolean;
591593

592594
get isLayoutValid(): boolean {
593595
return this._isLayoutValid;
@@ -1031,3 +1033,6 @@ isUserInteractionEnabledProperty.register(ViewCommon);
10311033

10321034
export const iosOverflowSafeAreaProperty = new Property<ViewCommon, boolean>({ name: "iosOverflowSafeArea", defaultValue: false, valueConverter: booleanConverter });
10331035
iosOverflowSafeAreaProperty.register(ViewCommon);
1036+
1037+
export const iosOverflowSafeAreaEnabledProperty = new InheritedProperty<ViewCommon, boolean>({ name: "iosOverflowSafeAreaEnabled", defaultValue: true, valueConverter: booleanConverter });
1038+
iosOverflowSafeAreaEnabledProperty.register(ViewCommon);

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/ /** */
44

55
///<reference path="../../../tns-core-modules.d.ts" /> Include global typings
6-
import { ViewBase, Property, EventData, Color } from "../view-base";
6+
import { ViewBase, Property, InheritedProperty, EventData, Color } from "../view-base";
77
import { Animation, AnimationDefinition, AnimationPromise } from "../../animation";
88
import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength } from "../../styling/style-properties";
99
import { GestureTypes, GestureEventData, GesturesObserver } from "../../gestures";
@@ -349,6 +349,11 @@ export abstract class View extends ViewBase {
349349
*/
350350
iosOverflowSafeArea: boolean;
351351

352+
/**
353+
* Enables or disables the iosOverflowSafeArea property for all children. This property is iOS specific. Default value: true
354+
*/
355+
iosOverflowSafeAreaEnabled: boolean;
356+
352357
/**
353358
* Gets is layout is valid. This is a read-only property.
354359
*/
@@ -797,6 +802,7 @@ export const originYProperty: Property<View, number>;
797802
export const isEnabledProperty: Property<View, boolean>;
798803
export const isUserInteractionEnabledProperty: Property<View, boolean>;
799804
export const iosOverflowSafeAreaProperty: Property<View, boolean>;
805+
export const iosOverflowSafeAreaEnabledProperty: InheritedProperty<View, boolean>;
800806

801807
export namespace ios {
802808
/**

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ export class View extends ViewCommon {
243243
return null;
244244
}
245245

246-
if (!this.iosOverflowSafeArea) {
246+
if (!this.iosOverflowSafeArea || !this.iosOverflowSafeAreaEnabled) {
247247
return ios.shrinkToSafeArea(this, frame);
248248
} else if (this.nativeViewProtected && this.nativeViewProtected.window) {
249249
return ios.expandBeyondSafeArea(this, frame);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ class DataSource extends NSObject implements UITableViewDataSource {
9595
let width = layout.getMeasureSpecSize(owner.widthMeasureSpec);
9696
let rowHeight = owner._effectiveRowHeight;
9797
let cellHeight = rowHeight > 0 ? rowHeight : owner.getHeight(indexPath.row);
98+
cellView.iosOverflowSafeAreaEnabled = false;
9899
View.layoutChild(owner, cellView, 0, 0, width, cellHeight);
99100
}
100101
}
@@ -389,6 +390,7 @@ export class ListView extends ListViewBase {
389390
let cellHeight = rowHeight > 0 ? rowHeight : this.getHeight(childView._listViewItemIndex);
390391
if (cellHeight) {
391392
let width = layout.getMeasureSpecSize(this.widthMeasureSpec);
393+
childView.iosOverflowSafeAreaEnabled = false;
392394
View.layoutChild(this, childView, 0, 0, width, cellHeight);
393395
}
394396
});

0 commit comments

Comments
 (0)