fix: padding support for iOS/Android

nativescript-community · Aug 1, 2021 · 5525219 · 5525219
1 parent 4da3c73
commit 5525219
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 22 deletions.
diff --git a/demo-vue/app/components/App.vue b/demo-vue/app/components/App.vue
@@ -6,6 +6,7 @@
 
         <GridLayout>
             <CollectionView
+                padding="20 5 100 10"
                 automationText="collectionView"
                 iosOverflowSafeArea="true"
                 :items="itemList"

diff --git a/src/collectionview/collectionview-common.ts b/src/collectionview/collectionview-common.ts
@@ -13,6 +13,7 @@ import {
     ProxyViewContainer,
     Template,
     Trace,
+    Utils,
     View,
     ViewBase,
     addWeakEventListener,
@@ -68,6 +69,28 @@ export interface Plugin {
     onLayout?: Function;
 }
 
+function toDevicePixels(length: CoreTypes.PercentLengthType, auto: number = Number.NaN, parentAvailableWidth: number = Number.NaN): number {
+    if (length === 'auto') {
+        // tslint:disable-line
+        return auto;
+    }
+    if (typeof length === 'number') {
+        return Math.floor(Utils.layout.toDevicePixels(length));
+    }
+    if (!length) {
+        return auto;
+    }
+    switch (length.unit) {
+        case 'px':
+            return Math.floor(length.value);
+        case '%':
+            return Math.floor(parentAvailableWidth * length.value);
+        case 'dip':
+        default:
+            return Math.floor(Utils.layout.toDevicePixels(length.value));
+    }
+}
+
 @CSSType('CollectionView')
 export abstract class CollectionViewBase extends View implements CollectionViewDefinition {
     public static itemLoadingEvent = 'itemLoading';
@@ -140,26 +163,38 @@ export abstract class CollectionViewBase extends View implements CollectionViewD
     public abstract refreshVisibleItems();
     public abstract isItemAtIndexVisible(index: number);
     public abstract scrollToIndex(index: number, animated: boolean);
-    public onLayout(left: number, top: number, right: number, bottom: number) {
-        super.onLayout(left, top, right, bottom);
-        // on ios and during device rotation the getMeasuredWidth and getMeasuredHeight are wrong
-        // so we use left, top , right, bottom
-        this._innerWidth = right - left - this.effectivePaddingLeft - this.effectivePaddingRight;
+
+    protected updateInnerSize() {
+        const width = this.getMeasuredWidth();
+        const height = this.getMeasuredHeight();
+        this._innerWidth = width - this.effectivePaddingLeft - this.effectivePaddingRight;
         if (this.colWidth) {
-            const newValue = PercentLength.toDevicePixels(this.colWidth, autoEffectiveColWidth, this._innerWidth); // We cannot use 0 for auto as it throws for android.
+            let newValue = toDevicePixels(this.colWidth, autoEffectiveColWidth, this._innerWidth); // We cannot use 0 for auto as it throws for android.
+            if (global.isAndroid) {
+                newValue = Math.floor(newValue);
+            }
             if (newValue !== this._effectiveColWidth) {
                 this._effectiveColWidth = newValue;
             }
         }
 
-        this._innerHeight = bottom - top - this.effectivePaddingTop - this.effectivePaddingBottom;
+        this._innerHeight = height - this.effectivePaddingTop - this.effectivePaddingBottom;
         if (this.rowHeight) {
-            const newValue = PercentLength.toDevicePixels(this.rowHeight, autoEffectiveRowHeight, this._innerHeight);
+            let newValue = toDevicePixels(this.rowHeight, autoEffectiveRowHeight, this._innerHeight);
+            if (global.isAndroid) {
+                newValue = Math.floor(newValue);
+            }
             if (newValue !== this._effectiveRowHeight) {
                 this._effectiveRowHeight = newValue;
             }
         }
     }
+    public onLayout(left: number, top: number, right: number, bottom: number) {
+        super.onLayout(left, top, right, bottom);
+        // on ios and during device rotation the getMeasuredWidth and getMeasuredHeight are wrong
+        // so we use left, top , right, bottom
+        this.updateInnerSize();
+    }
     // _onSizeChanged() {
     //     super._onSizeChanged();
     //     this.onSizeChanged(this.getMeasuredWidth(), this.getMeasuredHeight());
@@ -246,6 +281,40 @@ export abstract class CollectionViewBase extends View implements CollectionViewD
             this.onItemViewLoaderChanged();
         }
     }
+    get padding(): string | CoreTypes.LengthType {
+        return this.style.padding;
+    }
+    set padding(value: string | CoreTypes.LengthType) {
+        this.style.padding = value;
+    }
+
+    get paddingTop(): CoreTypes.LengthType {
+        return this.style.paddingTop;
+    }
+    set paddingTop(value: CoreTypes.LengthType) {
+        this.style.paddingTop = value;
+    }
+
+    get paddingRight(): CoreTypes.LengthType {
+        return this.style.paddingRight;
+    }
+    set paddingRight(value: CoreTypes.LengthType) {
+        this.style.paddingRight = value;
+    }
+
+    get paddingBottom(): CoreTypes.LengthType {
+        return this.style.paddingBottom;
+    }
+    set paddingBottom(value: CoreTypes.LengthType) {
+        this.style.paddingBottom = value;
+    }
+
+    get paddingLeft(): CoreTypes.LengthType {
+        return this.style.paddingLeft;
+    }
+    set paddingLeft(value: CoreTypes.LengthType) {
+        this.style.paddingLeft = value;
+    }
     resolveTemplateView(template) {
         return Builder.parse(template, this);
     }

diff --git a/src/collectionview/collectionview.android.ts b/src/collectionview/collectionview.android.ts
@@ -379,11 +379,11 @@ export class CollectionView extends CollectionViewBase {
                     });
                 }
             } else if (layoutManager['findLastCompletelyVisibleItemPositions'] && layoutManager['getSpanCount']) {
-                let positions = Array.create("int", layoutManager['getSpanCount']());
+                let positions = Array.create('int', layoutManager['getSpanCount']());
                 positions = layoutManager['findLastCompletelyVisibleItemPositions'](positions);
                 let lastVisibleItemPos = 0;
-                for(let i = 0; i < positions.length; i++) {
-                    if(positions[i] > lastVisibleItemPos) {
+                for (let i = 0; i < positions.length; i++) {
+                    if (positions[i] > lastVisibleItemPos) {
                         lastVisibleItemPos = positions[i];
                     }
                 }
@@ -903,7 +903,9 @@ export class CollectionView extends CollectionViewBase {
         };
         // tslint:disable-next-line:prefer-object-spread
         const newValue = Object.assign(padding, newPadding);
+        nativeView.setClipToPadding(false);
         nativeView.setPadding(newValue.left, newValue.top, newValue.right, newValue.bottom);
+        this.updateInnerSize();
     }
 
     private createComposedAdapter(recyclerView: CollectionViewRecyclerView) {

diff --git a/src/collectionview/collectionview.ios.ts b/src/collectionview/collectionview.ios.ts
@@ -774,17 +774,15 @@ export class CollectionView extends CollectionViewBase {
 
     private _setPadding(newPadding: { top?: number; right?: number; bottom?: number; left?: number }) {
         const layout = this._layout;
-        if (layout.hasOwnProperty('sectionInset')) {
-            const padding = {
-                top: layout['sectionInset'].top,
-                right: layout['sectionInset'].right,
-                bottom: layout['sectionInset'].bottom,
-                left: layout['sectionInset'].left
-            };
-            // tslint:disable-next-line:prefer-object-spread
-            const newValue = Object.assign(padding, newPadding);
-            layout['sectionInset'] = UIEdgeInsetsFromString(`{${newValue.top},${newValue.left},${newValue.bottom},${newValue.right}}`);
-        }
+        const padding = {
+            top: layout['sectionInset'].top,
+            right: layout['sectionInset'].right,
+            bottom: layout['sectionInset'].bottom,
+            left: layout['sectionInset'].left
+        };
+        // tslint:disable-next-line:prefer-object-spread
+        const newValue = Object.assign(padding, newPadding);
+        layout['sectionInset'] = newValue;
     }
 
     numberOfSectionsInCollectionView(collectionView: UICollectionView) {