feat(android): smooth scrolling to position now allows to choose snap to top or bottom

Author: farfromrefug

demo-snippets/vue3/SimpleGridsScrollToIndex.vue

@@ -26,6 +26,7 @@
 import {  ObservableArray } from '@nativescript/core';
 import { ref } from "nativescript-vue"
 import type { CollectionView } from 'src/collectionview';
+import { SnapPosition } from '@nativescript-community/ui-collectionview';
 
 const itemList = ref(new ObservableArray([
     { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
@@ -63,7 +64,7 @@ function onItemTap({ index, item }) {
 }
 
 function goToIndex() {
-    collectionView.scrollToIndex(nextIndex.value, true);
+    collectionView.scrollToIndex(nextIndex.value, true, SnapPosition.END);
     nextIndex.value = getNextIndex();
 }
 

packages/collectionview/platforms/android/java/com/nativescript/collectionview/RecyclerView.java

@@ -4,15 +4,18 @@
 import android.view.View;
 import android.view.ViewGroup;
 import android.util.Log;
+import androidx.recyclerview.widget.LinearSmoothScroller;
 
 public class RecyclerView extends androidx.recyclerview.widget.RecyclerView {
     static final String TAG = "RecyclerView";
     public SizeChangedListener sizeChangedListener = null;
+    protected com.nativescript.collectionview.SmoothScroller smoothScroller;
     public RecyclerView(Context context) {
         this(context, null);
     }
     public RecyclerView(Context context, android.util.AttributeSet attrs) {
         super(context, attrs);
+        smoothScroller = new com.nativescript.collectionview.SmoothScroller(context);
         setHorizontalScrollBarEnabled(true);
         setVerticalScrollBarEnabled(true);
         setHasFixedSize(true);
@@ -43,4 +46,14 @@ protected void onMeasure(int widthMeasureSpec,
             sizeChangedListener.onMeasure();
         }
     }
+
+    @Override
+    public void smoothScrollToPosition(int position) {
+        this.smoothScrollToPosition(position, LinearSmoothScroller.SNAP_TO_START);
+    }
+    public void smoothScrollToPosition(int position, int snapPosition) {
+        smoothScroller.snapPreference = snapPosition;
+        smoothScroller.setTargetPosition(position);
+        getLayoutManager().startSmoothScroll(smoothScroller);
+    }
 }

packages/collectionview/platforms/android/java/com/nativescript/collectionview/SmoothScroller.java

@@ -0,0 +1,21 @@
+package com.nativescript.collectionview;
+
+import androidx.recyclerview.widget.LinearSmoothScroller;
+import android.content.Context;
+
+public class SmoothScroller extends LinearSmoothScroller {
+
+    public int snapPreference = LinearSmoothScroller.SNAP_TO_START;
+
+    public SmoothScroller(Context context) {
+        super(context);
+    }
+
+    @Override protected int getVerticalSnapPreference() {
+        return snapPreference;
+    }
+    @Override protected int getHorizontalSnapPreference() {
+        return snapPreference;
+    }
+
+}

src/collectionview/index.android.ts

@@ -50,7 +50,7 @@ class SimpleCallback extends androidx.recyclerview.widget.ItemTouchHelper.Simple
             this.startPosition = startPosition;
         }
         this.endPosition = endPosition;
-        const owner = this.owner && this.owner.get();
+        const owner = this.owner?.get();
         if (owner) {
             owner._reorderItemInSource(startPosition, endPosition);
             return true;
@@ -67,7 +67,7 @@ class SimpleCallback extends androidx.recyclerview.widget.ItemTouchHelper.Simple
         }
         if (!viewHolder) {
             // this is where we identify the end of the drag and call the end event
-            const owner = this.owner && this.owner.get();
+            const owner = this.owner?.get();
 
             if (this.endPosition === -1) {
                 this.endPosition = this.startPosition;
@@ -99,26 +99,13 @@ class LongPressGestureListenerImpl extends android.view.GestureDetector.SimpleOn
         return global.__native(this);
     }
     public onLongPress(motionEvent: android.view.MotionEvent): void {
-        const owner = this._owner && this._owner.get();
+        const owner = this._owner?.get();
         if (owner) {
             owner.onReorderLongPress(motionEvent);
         }
     }
 }
 
-@NativeClass
-class SmoothScroller extends androidx.recyclerview.widget.LinearSmoothScroller {
-    constructor() {
-        super(Utils.android.getApplicationContext());
-        return global.__native(this);
-    }
-
-    public getVerticalSnapPreference() {
-        return androidx.recyclerview.widget.LinearSmoothScroller.SNAP_TO_START;
-    }
-}
-
-let smoothScroller: androidx.recyclerview.widget.LinearSmoothScroller;
 let LayoutParams: typeof android.view.ViewGroup.LayoutParams;
 
 const extraLayoutSpaceProperty = new Property<CollectionViewBase, number>({
@@ -133,6 +120,12 @@ const nestedScrollingEnabledProperty = new Property<CollectionViewBase, boolean>
     defaultValue: true,
     valueConverter: booleanConverter
 });
+
+export enum SnapPosition {
+    START = 0,
+    END = 1
+}
+
 export class CollectionView extends CollectionViewBase {
     public static DEFAULT_TEMPLATE_VIEW_TYPE = 0;
     public static CUSTOM_TEMPLATE_ITEM_TYPE = 1;
@@ -270,7 +263,6 @@ export class CollectionView extends CollectionViewBase {
 
         nativeView.setItemAnimator(animator);
 
-        smoothScroller = new SmoothScroller();
         this.refresh();
     }
     public disposeNativeView() {
@@ -910,14 +902,13 @@ export class CollectionView extends CollectionViewBase {
         }
         return view.computeVerticalScrollOffset() / Utils.layout.getDisplayDensity();
     }
-    public scrollToIndex(index: number, animated: boolean = true) {
+    public scrollToIndex(index: number, animated: boolean = true, snap: SnapPosition = SnapPosition.START) {
         const view = this.nativeViewProtected;
         if (!view) {
             return;
         }
         if (animated) {
-            smoothScroller.setTargetPosition(index);
-            view.getLayoutManager().startSmoothScroll(smoothScroller);
+            view.smoothScrollToPosition(index, snap);
         } else {
             view.scrollToPosition(index);
         }

src/collectionview/index.d.ts

@@ -4,13 +4,17 @@ import { CollectionViewBase } from './index-common';
 export * from './index-common';
 
 export type Orientation = 'horizontal' | 'vertical';
+export enum SnapPosition {
+    START = 0,
+    END = 1
+}
 
 export class CollectionView extends CollectionViewBase {
     public scrollOffset: number;
     public refresh();
     public refreshVisibleItems();
     public isItemAtIndexVisible(index: number): boolean;
-    public scrollToIndex(index: number, animated: boolean);
+    public scrollToIndex(index: number, animated: boolean, snap?: SnapPosition = SnapPosition.START);
     public scrollToOffset(value: number, animation?: boolean);
     public getViewForItemAtIndex(index: number): View;
     // on iOS a view is dragged from its center by default

src/collectionview/index.ios.ts

@@ -57,6 +57,11 @@ export const contentInsetAdjustmentBehaviorProperty = new Property<CollectionVie
     defaultValue: ContentInsetAdjustmentBehavior.Automatic
 });
 
+export enum SnapPosition {
+    START = -1, // = androidx.recyclerview.widget.LinearSmoothScroller.SNAP_TO_START,
+    END = 1 // = androidx.recyclerview.widget.LinearSmoothScroller.SNAP_TO_END
+}
+
 export class CollectionView extends CollectionViewBase {
     private _layout: UICollectionViewLayout;
     private _dataSource: CollectionViewDataSource;
@@ -626,12 +631,14 @@ export class CollectionView extends CollectionViewBase {
     get verticalOffsetY() {
         return this.nativeViewProtected?.contentOffset.y || 0;
     }
-    public scrollToIndex(index: number, animated: boolean = true) {
-        this.nativeViewProtected.scrollToItemAtIndexPathAtScrollPositionAnimated(
-            NSIndexPath.indexPathForItemInSection(index, 0),
-            this.orientation === 'vertical' ? UICollectionViewScrollPosition.Top : UICollectionViewScrollPosition.Left,
-            animated
-        );
+    public scrollToIndex(index: number, animated: boolean = true, snap: SnapPosition = SnapPosition.START) {
+        let scrollPosition = UICollectionViewScrollPosition.Top;
+        if (this.orientation === 'vertical') {
+            scrollPosition = snap === SnapPosition.START ? UICollectionViewScrollPosition.Top : UICollectionViewScrollPosition.Bottom;
+        } else {
+            scrollPosition = snap === SnapPosition.START ? UICollectionViewScrollPosition.Left : UICollectionViewScrollPosition.Right;
+        }
+        this.nativeViewProtected.scrollToItemAtIndexPathAtScrollPositionAnimated(NSIndexPath.indexPathForItemInSection(index, 0), scrollPosition, animated);
     }
 
     scrollToOffset(value, animated) {

src/collectionview/typings/android.d.ts

@@ -38,6 +38,7 @@ declare namespace com {
                 static createRecyclerView(context): RecyclerView;
                 static inflate(context): RecyclerView;
                 sizeChangedListener?: SizeChangedListener;
+                smoothScrollToPosition(position: number, snapPosition?: number);
             }
             export class SizeChangedListener {
                 constructor(impl?: { onSizeChanged(w: number, h: number, oldw: number, oldh: number); onMeasure() });
@@ -68,6 +69,8 @@ declare namespace com {
                     getSpanSize(param0: number): number;
                 }
             }
+
+            export class SmoothScroller extends androidx.recyclerview.widget.LinearSmoothScroller {}
         }
     }
 }