Skip to content

Commit b9806ba

Browse files
ADjenkovADjenkov
authored
fix(list-view-ios): fix rowHeight property to apply proper item size for iOS (NativeScript#5693)
* fix(list-view-ios): fix rowHeight property to apply proper item size for iOS * chore(apps-tests): add rowHeight tests
1 parent 6fb7481 commit b9806ba

5 files changed

Lines changed: 94 additions & 4 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export function loadExamples() {
1717
examples.set("listview-bg-separator-color", "list-view/listview-bg-separator-color");
1818
examples.set("csslv", "list-view/csslv");
1919
examples.set("scrolling-and-sizing", "list-view/scrolling-and-sizing");
20+
examples.set("row-height", "list-view/row-height");
2021

2122
return examples;
2223
}

‎apps/app/ui-tests-app/list-view/row-height.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.p-10 {
2+
padding: 10 20 10 20;
3+
}
4+
5+
.m-b-10 {
6+
margin-bottom: 10;
7+
}
8+
9+
.page {
10+
background-color: #F2F2F2;
11+
}
12+
13+
ListView {
14+
background-color: yellow;
15+
}
16+
17+
TextView {
18+
background-color: #FFF;
19+
}
20+
21+
.bordered {
22+
border-width: 5;
23+
border-color: green;
24+
}
25+
26+
.fixed-height {
27+
height: 55;
28+
}
29+
30+
.border-radius {
31+
border-radius: 15;
32+
}
33+
34+
.border-radius-nonuniform {
35+
border-radius: 10 20 30 40;
36+
}
37+
38+
.bordered-nonuniform {
39+
border-top-color: red;
40+
border-right-color: green;
41+
border-bottom-color: blue;
42+
border-left-color: purple;
43+
border-top-width: 5;
44+
border-right-width: 10;
45+
border-bottom-width: 15;
46+
border-left-width: 20;
47+
}
48+
49+
.body {
50+
font-size: 11;
51+
}

‎apps/app/ui-tests-app/list-view/row-height.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export function onNavigatingTo(args) {
2+
const page = args.object;
3+
page.bindingContext = ["Item 1", "Item 2", "Item 3"];
4+
}

‎apps/app/ui-tests-app/list-view/row-height.xml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
<StackLayout>
9+
<StackLayout class="p-10" row="0">
10+
<Label text="Row height = 40" class="body m-b-10"/>
11+
<ListView items="{{ $value }}" rowHeight="40">
12+
<ListView.itemTemplate>
13+
<Label text="{{ $value }}" backgroundColor="green"/>
14+
</ListView.itemTemplate>
15+
</ListView>
16+
</StackLayout>
17+
<StackLayout class="p-10" row="0">
18+
<Label text="Row height pixels = 40" class="body m-b-10"/>
19+
<ListView items="{{ $value }}" rowHeight="40px">
20+
<ListView.itemTemplate>
21+
<Label text="{{ $value }}" backgroundColor="green"/>
22+
</ListView.itemTemplate>
23+
</ListView>
24+
</StackLayout>
25+
<StackLayout class="p-10" row="0">
26+
<Label text="Row height dips = 40" class="body m-b-10"/>
27+
<ListView items="{{ $value }}" rowHeight="40dips">
28+
<ListView.itemTemplate>
29+
<Label text="{{ $value }}" backgroundColor="green"/>
30+
</ListView.itemTemplate>
31+
</ListView>
32+
</StackLayout>
33+
</StackLayout>
34+
</Page>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ class UITableViewRowHeightDelegateImpl extends NSObject implements UITableViewDe
197197
return tableView.estimatedRowHeight;
198198
}
199199

200-
return owner._effectiveRowHeight;
200+
return layout.toDeviceIndependentPixels(owner._effectiveRowHeight);
201201
}
202202
}
203203

@@ -281,8 +281,8 @@ export class ListView extends ListViewBase {
281281
}
282282
}
283283

284-
public isItemAtIndexVisible( itemIndex: number ): boolean {
285-
const indexes: NSIndexPath[] = Array.from(this._ios.indexPathsForVisibleRows);
284+
public isItemAtIndexVisible(itemIndex: number): boolean {
285+
const indexes: NSIndexPath[] = Array.from(this._ios.indexPathsForVisibleRows);
286286
return indexes.some(visIndex => visIndex.row === itemIndex);
287287
}
288288

@@ -295,7 +295,7 @@ export class ListView extends ListViewBase {
295295
}
296296

297297
public _onRowHeightPropertyChanged(oldValue: Length, newValue: Length) {
298-
const value = this._effectiveRowHeight;
298+
const value = layout.toDeviceIndependentPixels(this._effectiveRowHeight);
299299
const nativeView = this._ios;
300300
if (value < 0) {
301301
nativeView.rowHeight = UITableViewAutomaticDimension;

0 commit comments

Comments
 (0)