fix(android): prevent views from disappearing when using peaking

farfromrefug · farfromrefug · commit 54519ca5c72e · 2023-05-10T22:12:26.000+02:00
diff --git a/packages/ui-pager/platforms/android/java/com/nativescript/pager/PeakingTransformer.java b/packages/ui-pager/platforms/android/java/com/nativescript/pager/PeakingTransformer.java
@@ -0,0 +1,36 @@
+package com.nativescript.pager;
+
+import androidx.recyclerview.widget.RecyclerView;
+import androidx.viewpager2.widget.ViewPager2;
+
+import android.view.View;
+import android.view.ViewParent;
+
+public final class PeakingTransformer implements ViewPager2.PageTransformer {
+    /**
+     * Creates a {@link PeakingTransformer}.
+     *
+     */
+    public PeakingTransformer() {
+    }
+    @Override
+    public void transformPage(View page, float position) {
+        ViewPager2 viewPager = requireViewPager(page);
+        float offset = 0.0005f * position;
+        boolean isRtl = viewPager.getLayoutDirection() == 1;
+        if (viewPager.getOrientation() == ViewPager2.ORIENTATION_HORIZONTAL) {
+            page.setTranslationX(isRtl ? -offset : offset);
+        } else {
+            page.setTranslationY(offset);
+        }
+    }
+    private ViewPager2 requireViewPager(View page) {
+        ViewParent parent = page.getParent();
+        ViewParent parentParent = parent.getParent();
+        if (parent instanceof RecyclerView && parentParent instanceof ViewPager2) {
+            return (ViewPager2) parentParent;
+        }
+        throw new IllegalStateException(
+                "Expected the page view to be managed by a ViewPager2 instance.");
+    }
+}
diff --git a/packages/ui-pager/platforms/android/java/com/nativescript/pager/Utils.java.old b/packages/ui-pager/platforms/android/java/com/nativescript/pager/Utils.java.old
@@ -0,0 +1,52 @@
+package com.nativescript.pager;
+import org.json.JSONObject;
+import org.json.JSONArray;
+public class Utils {
+    public static void updateCollection(String update, androidx.recyclerview.widget.RecyclerView.Adapter< androidx.recyclerview.widget.RecyclerView.ViewHolder> adapter){
+        try{
+            JSONObject json = new JSONObject(update);
+            int index = json.getInt("index");
+            int addedCount;
+            int removedCount;
+            switch(json.getString("action")){
+                case "add":
+                addedCount = json.getInt("addedCount");
+                adapter.notifyItemRangeInserted(
+                    index,
+                    addedCount
+                );
+                break;
+                case "delete":
+                removedCount = json.getInt("removedCount");
+                adapter.notifyItemRangeRemoved(
+                    index,
+                    removedCount
+                );
+                break;
+                case "update":
+                adapter.notifyItemChanged(index);
+                break;
+                case "splice":
+                removedCount = json.getInt("removedCount");
+                addedCount = json.getInt("addedCount");
+                if (removedCount > 0) {
+                    adapter.notifyItemRangeRemoved(
+                      index,
+                      removedCount
+                    );
+                  }
+                  if (addedCount > 0) {
+                    adapter.notifyItemRangeInserted(
+                      index,
+                      addedCount
+                    );
+                  }
+                break;
+                case "change":
+                break;
+                default:
+                break;
+            }
+        }catch(Exception e){}
+    }
+}
diff --git a/src/ui-pager/index.android.ts b/src/ui-pager/index.android.ts
@@ -19,20 +19,14 @@ import {
 export * from './index.common';
 export { ItemsSource, Transformer } from './index.common';
 
-function notifyForItemAtIndex(owner, nativeView: any, view: any, eventName: string, index: number) {
-    const args = {
-        eventName,
-        object: owner,
-        index,
-        view,
-        ios: undefined,
-        android: nativeView
-    };
-    owner.notify(args);
-    return args;
-}
-
 const PLACEHOLDER = 'PLACEHOLDER';
+const sdkVersion = parseInt(Device.sdkVersion, 10);
+
+export const pagesCountProperty = new Property<Pager, number>({
+    name: 'pagesCount',
+    defaultValue: -1,
+    valueConverter: parseInt
+});
 
 export class Pager extends PagerBase {
     nativeViewProtected: androidx.viewpager2.widget.ViewPager2;
@@ -59,6 +53,7 @@ export class Pager extends PagerBase {
     private _lastPeaking = 0;
     private compositeTransformer: androidx.viewpager2.widget.CompositePageTransformer;
     private marginTransformer: androidx.viewpager2.widget.MarginPageTransformer;
+    private peakingTransformer: com.nativescript.pager.PeakingTransformer;
     private _transformers: androidx.viewpager2.widget.ViewPager2.PageTransformer[];
 
     constructor() {
@@ -74,10 +69,9 @@ export class Pager extends PagerBase {
         this._views = value;
     }
 
-    @profile()
     public createNativeView() {
         const nativeView = new androidx.viewpager2.widget.ViewPager2(this._context);
-        const sdkVersion = parseInt(Device.sdkVersion, 10);
+        nativeView.setOffscreenPageLimit(-1);
         if (sdkVersion >= 21) {
             nativeView.setNestedScrollingEnabled(true);
         }
@@ -87,23 +81,24 @@ export class Pager extends PagerBase {
             nativeView.setOrientation(androidx.viewpager2.widget.ViewPager2.ORIENTATION_HORIZONTAL);
         }
 
-        initPagerRecyclerAdapter();
-        this._pagerAdapter = new PagerRecyclerAdapter(new WeakRef(this));
-        this.compositeTransformer = new androidx.viewpager2.widget.CompositePageTransformer();
-        nativeView.setUserInputEnabled(!this.disableSwipe);
-        this.on(View.layoutChangedEvent, this.onLayoutChange, this);
         return nativeView;
     }
 
     public initNativeView() {
         super.initNativeView();
+        const nativeView = this.nativeViewProtected;
+        initPagerRecyclerAdapter();
+        this._pagerAdapter = new PagerRecyclerAdapter(new WeakRef(this));
+        this.compositeTransformer = new androidx.viewpager2.widget.CompositePageTransformer();
+        nativeView.setPageTransformer(this.compositeTransformer);
+        nativeView.setUserInputEnabled(!this.disableSwipe);
+        this.on(View.layoutChangedEvent, this.onLayoutChange, this);
         // Store disable animation value
         this._oldDisableAnimation = this.disableAnimation;
         // Disable animation to set currentItem w/o animation
         this.disableAnimation = true;
         initPagerChangeCallback();
         this._pageListener = new PageChangeCallback(new WeakRef(this));
-        const nativeView = this.nativeViewProtected;
         nativeView.registerOnPageChangeCallback(this._pageListener);
         nativeView.setAdapter(this._pagerAdapter);
         if (this._androidViewId < 0) {
@@ -116,8 +111,6 @@ export class Pager extends PagerBase {
             nativeView.setOffscreenPageLimit(3);
         }
 
-        this._setPeaking(this.peaking);
-        this._setSpacing(this.spacing);
         this._setTransformers(this.transformers ? this.transformers : '');
     }
 
@@ -160,50 +153,58 @@ export class Pager extends PagerBase {
         this.initStaticPagerAdapter();
     }
     onLayoutChange(args: any) {
-        this._setSpacing(args.object.spacing);
-        this._setPeaking(args.object.peaking);
-        this._setTransformers(this.transformers ? this.transformers : '');
+        if (this._lastPeaking) {
+            this[peakingProperty.setNative](this.peaking);
+        }
+        if (this._lastSpacing) {
+            this[spacingProperty.setNative](this.spacing);
+        }
+        // this._setTransformers(this.transformers ? this.transformers : '');
         this._updateScrollPosition();
         // Set disableAnimation to original value
         this.disableAnimation = this._oldDisableAnimation;
     }
 
-    private _setSpacing(value: any) {
+    [spacingProperty.setNative](value: any) {
+        console.log('spacingProperty', value);
         const size = this.convertToSize(value);
         const newSpacing = size !== this._lastSpacing;
         if (newSpacing) {
             if (this.marginTransformer) {
                 this.compositeTransformer.removeTransformer(this.marginTransformer);
+                this.marginTransformer = null;
+            }
+            if (size !== 0) {
+                this.marginTransformer = new androidx.viewpager2.widget.MarginPageTransformer(size);
+                this.compositeTransformer.addTransformer(this.marginTransformer);
+                if (this.peakingTransformer) {
+                    this.compositeTransformer.removeTransformer(this.peakingTransformer);
+                    this.peakingTransformer = null;
+                }
             }
-
-            this.marginTransformer = new androidx.viewpager2.widget.MarginPageTransformer(size);
-            this.compositeTransformer.addTransformer(this.marginTransformer);
             this._lastSpacing = size;
         }
     }
 
-    private _setPeaking(value: any) {
+    [peakingProperty.setNative](value: any) {
         const size = this.convertToSize(value);
         const newPeaking = size !== this._lastPeaking;
         if (newPeaking) {
             const nativeView = this.nativeViewProtected;
-            nativeView.setClipToPadding(false);
             const left = this.orientation === 'horizontal' ? size : 0;
             const top = this.orientation === 'horizontal' ? 0 : size;
+            const enabled = left !== 0 || top !== 0;
             nativeView.setPadding(left, top, left, top);
-            nativeView.setClipChildren(false);
+            nativeView.setClipChildren(!enabled);
+            nativeView.setClipToPadding(!enabled);
+            if (!this.peakingTransformer && !this.marginTransformer) {
+                this.peakingTransformer = new com.nativescript.pager.PeakingTransformer();
+                this.compositeTransformer.addTransformer(this.peakingTransformer);
+            }
             this._lastPeaking = size;
         }
     }
 
-    [spacingProperty.setNative](value: any) {
-        this._setSpacing(value);
-    }
-
-    [peakingProperty.setNative](value: any) {
-        this._setPeaking(value);
-    }
-
     private _setTransformers(transformers: string) {
         if (!isString(transformers)) {
             return;
@@ -212,6 +213,7 @@ export class Pager extends PagerBase {
         this._transformers.forEach((transformer) => {
             this.compositeTransformer.removeTransformer(transformer);
         });
+        console.log('_setTransformers', transformers);
         for (const transformer of transformsArray) {
             const nativeTransformerClass = Pager.mRegisteredTransformers[transformer];
             if (nativeTransformerClass) {
@@ -389,14 +391,6 @@ export class Pager extends PagerBase {
         }
     }
 
-    updatePagesCount(value: number) {
-        const nativeView = this.nativeViewProtected;
-        if (nativeView) {
-            this._pagerAdapter.notifyDataSetChanged();
-            nativeView.setOffscreenPageLimit(value);
-        }
-    }
-
     onUnloaded() {
         // this._android.setAdapter(null);
         super.onUnloaded();
@@ -471,6 +465,13 @@ export class Pager extends PagerBase {
             this._initAutoPlay(this.autoPlay);
         }
     }
+    [pagesCountProperty.setNative](value: number) {
+        const nativeView = this.nativeViewProtected;
+        if (nativeView && (value === -1 || value > 0)) {
+            this._pagerAdapter.notifyDataSetChanged();
+            nativeView.setOffscreenPageLimit(value);
+        }
+    }
 
     _nextIndex(): number {
         const next = this.selectedIndex + 1;
@@ -558,14 +559,6 @@ export class Pager extends PagerBase {
     }
 }
 
-export const pagesCountProperty = new Property<Pager, number>({
-    name: 'pagesCount',
-    defaultValue: 0,
-    valueConverter: (v) => parseInt(v, 10),
-    valueChanged: (pager: Pager, oldValue, newValue) => {
-        pager.updatePagesCount(pager.pagesCount);
-    }
-});
 pagesCountProperty.register(Pager);
 
 let PageChangeCallback;
diff --git a/src/ui-pager/index.common.ts b/src/ui-pager/index.common.ts
@@ -322,13 +322,13 @@ export abstract class PagerBase extends ContainerView implements AddChildFromBui
             converted = size * length.value;
         } else if (typeof length === 'string') {
             if (length.indexOf('px') > -1) {
-                converted = parseInt(length.replace('px', ''), 10);
+                converted = parseFloat(length.replace('px', ''));
             } else if (length.indexOf('dip') > -1) {
                 converted = Utils.layout.toDevicePixels(parseInt(length.replace('dip', ''), 10));
             } else if (length.indexOf('%') > -1) {
-                converted = size * (parseInt(length.replace('%', ''), 10) / 100);
+                converted = size * (parseFloat(length.replace('%', '')) / 100);
             } else {
-                converted = Utils.layout.toDevicePixels(parseInt(length, 10));
+                converted = Utils.layout.toDevicePixels(parseFloat(length));
             }
         } else if (typeof length === 'number') {
             converted = Utils.layout.toDevicePixels(length);
diff --git a/src/ui-pager/typings/android.d.ts b/src/ui-pager/typings/android.d.ts
@@ -0,0 +1,13 @@
+declare namespace com {
+    export namespace nativescript {
+        export namespace pager {
+            export class PeakingTransformer extends ViewPager2.PageTransformer {
+                public static class: java.lang.Class<PeakingTransformer>;
+
+                public transformPage(param0: globalAndroid.view.View, param1: number): void;
+
+                public constructor();
+            }
+        }
+    }
+}
