From 52c044891e13aff59dc57400614ca9c20eda3467 Mon Sep 17 00:00:00 2001 From: Alexander Djenkov Date: Thu, 22 Mar 2018 14:03:54 +0200 Subject: [PATCH] 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. --- .../list-view/scrolling-and-sizing.xml | 10 ++++++++++ .../ui/list-view/list-view-common.ts | 6 ++++++ tns-core-modules/ui/list-view/list-view.d.ts | 11 +++++++++++ .../ui/list-view/list-view.ios.ts | 19 ++++++++++++++----- 4 files changed, 41 insertions(+), 5 deletions(-) diff --git a/apps/app/ui-tests-app/list-view/scrolling-and-sizing.xml b/apps/app/ui-tests-app/list-view/scrolling-and-sizing.xml index 071bc44da..997629073 100644 --- a/apps/app/ui-tests-app/list-view/scrolling-and-sizing.xml +++ b/apps/app/ui-tests-app/list-view/scrolling-and-sizing.xml @@ -51,5 +51,15 @@ + + + \ No newline at end of file diff --git a/tns-core-modules/ui/list-view/list-view-common.ts b/tns-core-modules/ui/list-view/list-view-common.ts index a53018557..6f468aa01 100644 --- a/tns-core-modules/ui/list-view/list-view-common.ts +++ b/tns-core-modules/ui/list-view/list-view-common.ts @@ -42,6 +42,7 @@ export abstract class ListViewBase extends View implements ListViewDefinition, T public _itemTemplatesInternal = new Array(this._defaultTemplate); public _effectiveRowHeight: number = autoEffectiveRowHeight; public rowHeight: Length; + public iosEstimatedRowHeight: Length; public items: any[] | ItemsSource; public itemTemplate: string | Template; public itemTemplates: string | Array; @@ -210,5 +211,10 @@ export const rowHeightProperty = new CoercibleProperty({ }); rowHeightProperty.register(ListViewBase); +export const iosEstimatedRowHeightProperty = new Property({ + name: "iosEstimatedRowHeight", valueConverter: (v) => Length.parse(v) +}); +iosEstimatedRowHeightProperty.register(ListViewBase); + export const separatorColorProperty = new CssProperty({ name: "separatorColor", cssName: "separator-color", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); separatorColorProperty.register(Style); diff --git a/tns-core-modules/ui/list-view/list-view.d.ts b/tns-core-modules/ui/list-view/list-view.d.ts index e4315e5fe..08db3a021 100644 --- a/tns-core-modules/ui/list-view/list-view.d.ts +++ b/tns-core-modules/ui/list-view/list-view.d.ts @@ -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; */ export const rowHeightProperty: Property; +/** + * Represents the observable property backing the iosEstimatedRowHeight property of each ListView instance. + */ +export const iosEstimatedRowHeightProperty: Property; + /** * Backing property for separator color property. */ diff --git a/tns-core-modules/ui/list-view/list-view.ios.ts b/tns-core-modules/ui/list-view/list-view.ios.ts index 2b56166ae..58f594714 100644 --- a/tns-core-modules/ui/list-view/list-view.ios.ts +++ b/tns-core-modules/ui/list-view/list-view.ios.ts @@ -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; + } }