fix(list-view-ios): fix rowHeight property to apply proper item size for iOS (#5693)

* fix(list-view-ios): fix rowHeight property to apply proper item size for iOS

* chore(apps-tests): add rowHeight tests
This commit is contained in:
Alexander Djenkov
2018-04-18 10:47:19 +03:00
committed by GitHub
parent 6fb7481327
commit b9806bad1c
5 changed files with 94 additions and 4 deletions

View File

@ -17,6 +17,7 @@ export function loadExamples() {
examples.set("listview-bg-separator-color", "list-view/listview-bg-separator-color");
examples.set("csslv", "list-view/csslv");
examples.set("scrolling-and-sizing", "list-view/scrolling-and-sizing");
examples.set("row-height", "list-view/row-height");
return examples;
}

View File

@ -0,0 +1,51 @@
.p-10 {
padding: 10 20 10 20;
}
.m-b-10 {
margin-bottom: 10;
}
.page {
background-color: #F2F2F2;
}
ListView {
background-color: yellow;
}
TextView {
background-color: #FFF;
}
.bordered {
border-width: 5;
border-color: green;
}
.fixed-height {
height: 55;
}
.border-radius {
border-radius: 15;
}
.border-radius-nonuniform {
border-radius: 10 20 30 40;
}
.bordered-nonuniform {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: purple;
border-top-width: 5;
border-right-width: 10;
border-bottom-width: 15;
border-left-width: 20;
}
.body {
font-size: 11;
}

View File

@ -0,0 +1,4 @@
export function onNavigatingTo(args) {
const page = args.object;
page.bindingContext = ["Item 1", "Item 2", "Item 3"];
}

View File

@ -0,0 +1,34 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
<Page.actionBar>
<ActionBar title="My App" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout>
<StackLayout class="p-10" row="0">
<Label text="Row height = 40" class="body m-b-10"/>
<ListView items="{{ $value }}" rowHeight="40">
<ListView.itemTemplate>
<Label text="{{ $value }}" backgroundColor="green"/>
</ListView.itemTemplate>
</ListView>
</StackLayout>
<StackLayout class="p-10" row="0">
<Label text="Row height pixels = 40" class="body m-b-10"/>
<ListView items="{{ $value }}" rowHeight="40px">
<ListView.itemTemplate>
<Label text="{{ $value }}" backgroundColor="green"/>
</ListView.itemTemplate>
</ListView>
</StackLayout>
<StackLayout class="p-10" row="0">
<Label text="Row height dips = 40" class="body m-b-10"/>
<ListView items="{{ $value }}" rowHeight="40dips">
<ListView.itemTemplate>
<Label text="{{ $value }}" backgroundColor="green"/>
</ListView.itemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</Page>

View File

@ -197,7 +197,7 @@ class UITableViewRowHeightDelegateImpl extends NSObject implements UITableViewDe
return tableView.estimatedRowHeight;
}
return owner._effectiveRowHeight;
return layout.toDeviceIndependentPixels(owner._effectiveRowHeight);
}
}
@ -281,8 +281,8 @@ export class ListView extends ListViewBase {
}
}
public isItemAtIndexVisible( itemIndex: number ): boolean {
const indexes: NSIndexPath[] = Array.from(this._ios.indexPathsForVisibleRows);
public isItemAtIndexVisible(itemIndex: number): boolean {
const indexes: NSIndexPath[] = Array.from(this._ios.indexPathsForVisibleRows);
return indexes.some(visIndex => visIndex.row === itemIndex);
}
@ -295,7 +295,7 @@ export class ListView extends ListViewBase {
}
public _onRowHeightPropertyChanged(oldValue: Length, newValue: Length) {
const value = this._effectiveRowHeight;
const value = layout.toDeviceIndependentPixels(this._effectiveRowHeight);
const nativeView = this._ios;
if (value < 0) {
nativeView.rowHeight = UITableViewAutomaticDimension;