feat(ios-list-view): introduce iosEstimatedRowHeight property. (#5568)

* feat(ios-list-view): introduce iosEstimatedRowHeight property.

* chore(ui-tests-app): add test for auto measured ListView.
This commit is contained in:
Alexander Djenkov
2018-03-22 14:03:54 +02:00
committed by GitHub
parent 0012bfd4d8
commit 52c044891e
4 changed files with 41 additions and 5 deletions

View File

@ -51,5 +51,15 @@
</ListView>
</StackLayout>
<StackLayout class="p-10" row="3">
<Label text="ios-estimated-row-height" class="body m-b-10" />
<ListView items="{{ $value }}" iosEstimatedRowHeight="0">
<ListView.itemTemplate>
<Label text="{{ $value }}" />
</ListView.itemTemplate>
</ListView>
<Label text="after-auto-estimated-height" class="body m-b-10" />
</StackLayout>
</StackLayout>
</Page>

View File

@ -42,6 +42,7 @@ export abstract class ListViewBase extends View implements ListViewDefinition, T
public _itemTemplatesInternal = new Array<KeyedTemplate>(this._defaultTemplate);
public _effectiveRowHeight: number = autoEffectiveRowHeight;
public rowHeight: Length;
public iosEstimatedRowHeight: Length;
public items: any[] | ItemsSource;
public itemTemplate: string | Template;
public itemTemplates: string | Array<KeyedTemplate>;
@ -210,5 +211,10 @@ export const rowHeightProperty = new CoercibleProperty<ListViewBase, Length>({
});
rowHeightProperty.register(ListViewBase);
export const iosEstimatedRowHeightProperty = new Property<ListViewBase, Length>({
name: "iosEstimatedRowHeight", valueConverter: (v) => Length.parse(v)
});
iosEstimatedRowHeightProperty.register(ListViewBase);
export const separatorColorProperty = new CssProperty<Style, Color>({ name: "separatorColor", cssName: "separator-color", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
separatorColorProperty.register(Style);

View File

@ -78,6 +78,12 @@ export class ListView extends View {
*/
rowHeight: Length;
/**
* Gets or set the estimated height of rows in the ListView.
* The default value is 44px.
*/
iosEstimatedRowHeight: Length;
/**
* Forces the ListView to reload all its items.
*/
@ -188,6 +194,11 @@ export const separatorColor: Property<ListView, Color>;
*/
export const rowHeightProperty: Property<ListView, Length>;
/**
* Represents the observable property backing the iosEstimatedRowHeight property of each ListView instance.
*/
export const iosEstimatedRowHeightProperty: Property<ListView, Length>;
/**
* Backing property for separator color property.
*/

View File

@ -2,7 +2,7 @@
import { ItemEventData } from ".";
import {
ListViewBase, View, KeyedTemplate, Length, Observable, Color,
separatorColorProperty, itemTemplatesProperty, layout, EventData
separatorColorProperty, itemTemplatesProperty, iosEstimatedRowHeightProperty, layout, EventData
} from "./list-view-common";
import { StackLayout } from "../layouts/stack-layout";
import { ProxyViewContainer } from "../proxy-view-container";
@ -138,7 +138,7 @@ class UITableViewDelegateImpl extends NSObject implements UITableViewDelegate {
public tableViewHeightForRowAtIndexPath(tableView: UITableView, indexPath: NSIndexPath): number {
const owner = this._owner.get();
if (!owner) {
return DEFAULT_HEIGHT;
return tableView.estimatedRowHeight;
}
let height: number;
@ -188,7 +188,7 @@ class UITableViewRowHeightDelegateImpl extends NSObject implements UITableViewDe
}
return indexPath;
}
public tableViewDidSelectRowAtIndexPath(tableView: UITableView, indexPath: NSIndexPath): NSIndexPath {
tableView.deselectRowAtIndexPathAnimated(indexPath, true);
@ -198,7 +198,7 @@ class UITableViewRowHeightDelegateImpl extends NSObject implements UITableViewDe
public tableViewHeightForRowAtIndexPath(tableView: UITableView, indexPath: NSIndexPath): number {
let owner = this._owner.get();
if (!owner) {
return DEFAULT_HEIGHT;
return tableView.estimatedRowHeight;
}
return owner._effectiveRowHeight;
@ -345,7 +345,7 @@ export class ListView extends ListViewBase {
return height;
}
return DEFAULT_HEIGHT;
return this._ios.estimatedRowHeight;
}
public _prepareCell(cell: ListViewCell, indexPath: NSIndexPath): number {
@ -428,4 +428,13 @@ export class ListView extends ListViewBase {
this.refresh();
}
[iosEstimatedRowHeightProperty.getDefault](): Length {
return DEFAULT_HEIGHT;
}
[iosEstimatedRowHeightProperty.setNative](value: Length) {
const nativeView = this._ios;
const estimatedHeight = Length.toDevicePixels(value, 0);
nativeView.estimatedRowHeight = estimatedHeight < 0 ? DEFAULT_HEIGHT : estimatedHeight;
}
}