Android: add loop in slider

doric-android/doric/src/main/java/pub/doric/shader/slider/SlideAdapter.java

@@ -71,8 +71,12 @@ class SlideAdapter extends RecyclerView.Adapter<SlideAdapter.DoricViewHolder> {
 
     @Override
     public int getItemCount() {
+        if (loop) {
+            return itemCount + 2;
+        } else {
             return itemCount;
         }
+    }
 
     @Override
     public int getItemViewType(int position) {
@@ -86,11 +90,24 @@ class SlideAdapter extends RecyclerView.Adapter<SlideAdapter.DoricViewHolder> {
     }
 
     private JSValue getItemModel(final int position) {
-        String id = itemValues.get(position);
+        int index;
+        if (loop) {
+            if (position == 0) {
+                index = itemCount - 1;
+            } else if (position == itemCount + 1) {
+                index = 0;
+            } else {
+                index = position - 1;
+            }
+        } else {
+            index = position;
+        }
+
+        String id = itemValues.get(index);
         if (TextUtils.isEmpty(id)) {
             AsyncResult<JSDecoder> asyncResult = sliderNode.callJSResponse(
                     "renderBunchedItems",
-                    position,
+                    index,
                     batchCount);
             try {
                 JSDecoder jsDecoder = asyncResult.synchronous().get();
@@ -100,10 +117,10 @@ class SlideAdapter extends RecyclerView.Adapter<SlideAdapter.DoricViewHolder> {
                     for (int i = 0; i < jsArray.size(); i++) {
                         JSObject itemModel = jsArray.get(i).asObject();
                         String itemId = itemModel.getProperty("id").asString().value();
-                        itemValues.put(i + position, itemId);
+                        itemValues.put(i + index, itemId);
                         sliderNode.setSubModel(itemId, itemModel);
                     }
-                    return sliderNode.getSubModel(itemValues.get(position));
+                    return sliderNode.getSubModel(itemValues.get(index));
                 }
             } catch (Exception e) {
                 e.printStackTrace();

doric-android/doric/src/main/java/pub/doric/shader/slider/SliderNode.java

@@ -65,8 +65,18 @@ public class SliderNode extends SuperNode<RecyclerView> {
             public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                 if (newState == RecyclerView.SCROLL_STATE_IDLE) {
                     View view = snapHelper.findSnapView(layoutManager);
-                    if (view != null && !TextUtils.isEmpty(onPageSlidedFuncId)) {
+                    if (view != null) {
                         int position = layoutManager.getPosition(view);
+
+                        if (slideAdapter.loop) {
+                            if (position == 0) {
+                                recyclerView.scrollToPosition(slideAdapter.itemCount);
+                            } else if (position == slideAdapter.itemCount + 1) {
+                                recyclerView.scrollToPosition(1);
+                            }
+                        }
+
+                        if (!TextUtils.isEmpty(onPageSlidedFuncId)) {
                             if (position != lastPosition) {
                                 callJSResponse(onPageSlidedFuncId, position);
                             }
@@ -74,6 +84,7 @@ public class SliderNode extends SuperNode<RecyclerView> {
                         }
                     }
                 }
+            }
 
             @Override
             public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
@@ -154,6 +165,14 @@ public class SliderNode extends SuperNode<RecyclerView> {
             case "loop":
                 boolean loop = prop.asBoolean().value();
                 slideAdapter.loop = loop;
+                if (loop) {
+                    mView.post(new Runnable() {
+                        @Override
+                        public void run() {
+                            mView.scrollToPosition(1);
+                        }
+                    });
+                }
                 break;
             default:
                 super.blend(view, name, prop);

doric-demo/src/SliderDemo.ts

@@ -1,4 +1,4 @@
-import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem, image, layoutConfig, ScaleType } from "doric";
+import { Group, Panel, text, gravity, Gravity, Color, LayoutSpec, vlayout, slider, slideItem, image, layoutConfig, ScaleType, switchView, hlayout } from "doric";
 import { colors } from "./utils";
 
 const imageUrls = [
@@ -15,22 +15,8 @@ const imageUrls = [
 @Entry
 class SliderPanel extends Panel {
     build(rootView: Group): void {
-        rootView.addChild(vlayout([
+        let pager = slider({
-            text({
+            itemCount: imageUrls.length,
-                text: "Gallery",
-                layoutConfig: {
-                    widthSpec: LayoutSpec.MOST,
-                    heightSpec: LayoutSpec.JUST,
-                },
-                textSize: 30,
-                textColor: Color.WHITE,
-                backgroundColor: colors[1],
-                textAlignment: gravity().center(),
-                height: 50,
-            }),
-            slider({
-                itemCount: 100,
-                loop: true,
             renderPage: (idx) => {
                 return slideItem(image({
                     imageUrl: imageUrls[idx % imageUrls.length],
@@ -48,7 +34,46 @@ class SliderPanel extends Panel {
                 heightSpec: LayoutSpec.MOST,
                 weight: 1,
             },
+        })
+
+        rootView.addChild(vlayout([
+            text({
+                text: "Gallery",
+                layoutConfig: {
+                    widthSpec: LayoutSpec.MOST,
+                    heightSpec: LayoutSpec.JUST,
+                },
+                textSize: 30,
+                textColor: Color.WHITE,
+                backgroundColor: colors[1],
+                textAlignment: gravity().center(),
+                height: 50,
             }),
+            hlayout([
+                text({
+                    text: "Loop",
+                    layoutConfig: {
+                        widthSpec: LayoutSpec.FIT,
+                        heightSpec: LayoutSpec.JUST,
+                    },
+                    textSize: 20,
+                    textColor: Color.BLACK,
+                    textAlignment: gravity().center(),
+                    height: 50,
+                }),
+                switchView({
+                    state: false,
+                    onSwitch: (state) => {
+                        pager.loop = state
+                    },
+                }),
+            ], {
+                layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
+                gravity: gravity().center(),
+                space: 10,
+                backgroundColor: Color.RED,
+            }),
+            pager,
         ]).also(it => {
             it.layoutConfig = {
                 widthSpec: LayoutSpec.MOST,