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

ADjenkov · web-flow · commit 52c044891e13 · 2018-03-22T14:03:54.000+02:00
* feat(ios-list-view): introduce iosEstimatedRowHeight property.

* chore(ui-tests-app): add test for auto measured ListView.
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
@@ -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>
diff --git 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<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);
diff --git 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<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.
  */
diff --git 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;
+    }
 }
