fix(android): peaking and spacing can work together with improved performances

Author: farfromrefuge

packages/ui-pager/platforms/android/java/com/nativescript/pager/PeakingTransformer.java

@@ -5,8 +5,11 @@
 
 import android.view.View;
 import android.view.ViewParent;
+import android.util.Log;
 
 public final class PeakingTransformer implements ViewPager2.PageTransformer {
+    public float pageOffset = 0.0f;
+    public float pageMargin = 0.0f;
     /**
      * Creates a {@link PeakingTransformer}.
      *
@@ -16,7 +19,7 @@ public PeakingTransformer() {
     @Override
     public void transformPage(View page, float position) {
         ViewPager2 viewPager = requireViewPager(page);
-        float offset = 0.0005f * position;
+        float offset = position * -(2 * pageOffset - pageMargin);
         boolean isRtl = viewPager.getLayoutDirection() == 1;
         if (viewPager.getOrientation() == ViewPager2.ORIENTATION_HORIZONTAL) {
             page.setTranslationX(isRtl ? -offset : offset);

packages/ui-pager/platforms/android/native-api-usage.json

@@ -1,7 +1,13 @@
 {
   "uses": [
-    "androidx.viewpager2.widget:ViewPager2*",
-    "androidx.viewpager2.widget:CompositePageTransformer*"
+    "com.nativescript.pager*:*",
+    "androidx.recyclerview.widget:RecyclerView.Adapter",
+    "androidx.recyclerview.widget:RecyclerView.ViewHolder",
+    "androidx.viewpager2.widget:ViewPager2",
+    "androidx.viewpager2.widget:ViewPager2.OnPageChangeCallback",
+    "androidx.viewpager2.widget:ViewPager2.PageTransformer",
+    "androidx.viewpager2.widget:CompositePageTransformer",
+    "androidx.viewpager2.widget:MarginPageTransformer"
   ]
 }
 

src/ui-pager/index.android.ts

@@ -49,9 +49,9 @@ export class Pager extends PagerBase {
     public _realizedTemplates = new Map<string, Map<android.view.View, View>>();
     lastEvent = 0;
     private _lastSpacing = 0;
-    private _lastPeaking = 0;
+    _lastPeaking = 0;
     private compositeTransformer: androidx.viewpager2.widget.CompositePageTransformer;
-    private marginTransformer: androidx.viewpager2.widget.MarginPageTransformer;
+    // private marginTransformer: androidx.viewpager2.widget.MarginPageTransformer;
     private peakingTransformer: com.nativescript.pager.PeakingTransformer;
     private _transformers: androidx.viewpager2.widget.ViewPager2.PageTransformer[];
 
@@ -170,18 +170,12 @@ export class Pager extends PagerBase {
         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;
-                }
+            if (!this.peakingTransformer) {
+                this.peakingTransformer = new com.nativescript.pager.PeakingTransformer();
+                this.compositeTransformer.addTransformer(this.peakingTransformer);
             }
+            this.peakingTransformer.pageOffset = this._lastPeaking;
+            this.peakingTransformer.pageMargin = size;
             this._lastSpacing = size;
             this.refresh();
         }
@@ -191,17 +185,12 @@ export class Pager extends PagerBase {
         const size = this.convertToSize(value);
         const newPeaking = size !== this._lastPeaking;
         if (newPeaking) {
-            const nativeView = this.nativeViewProtected;
-            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(!enabled);
-            nativeView.setClipToPadding(!enabled);
-            if (!this.peakingTransformer && !this.marginTransformer) {
+            if (!this.peakingTransformer) {
                 this.peakingTransformer = new com.nativescript.pager.PeakingTransformer();
                 this.compositeTransformer.addTransformer(this.peakingTransformer);
             }
+            this.peakingTransformer.pageOffset = size;
+            this.peakingTransformer.pageMargin = this._lastSpacing;
             this._lastPeaking = size;
             this.refresh();
         }
@@ -841,6 +830,9 @@ function initPagerRecyclerAdapter() {
                     (holder.view as ContentView).content = args.view;
                 }
                 owner._prepareItem(holder.view, index);
+
+                // TODO: find a way to add to existing margin
+                view.marginLeft = view.marginRight = Utils.layout.toDeviceIndependentPixels(owner._lastPeaking);
             }
         }
 
@@ -1025,7 +1017,10 @@ function initPagerViewHolder() {
 
     @NativeClass
     class PagerViewHolderImpl extends androidx.recyclerview.widget.RecyclerView.ViewHolder {
-        constructor(private owner: View, private pager: WeakRef<Pager>) {
+        constructor(
+            private owner: View,
+            private pager: WeakRef<Pager>
+        ) {
             super(owner.nativeViewProtected);
             return global.__native(this);
         }

src/ui-pager/typings/android.d.ts

@@ -2,6 +2,8 @@ declare namespace com {
     export namespace nativescript {
         export namespace pager {
             export class PeakingTransformer extends ViewPager2.PageTransformer {
+                pageOffset: number;
+                pageMargin: number;
                 public static class: java.lang.Class<PeakingTransformer>;
 
                 public transformPage(param0: globalAndroid.view.View, param1: number): void;