完善阿里巴巴组件使用案例

README.md

@@ -243,6 +243,8 @@ C*y | 1￥ | 微信
 *毛 | 6.66￥ | 微信
 *凯 | 10￥ | 微信
 r*o | 8.88￥ | 微信
+T*8 | 7.77￥ | 微信
+v*d | 20￥ | 微信
 
 ## 联系方式
 

app/src/main/assets/alibaba/data.json

@@ -132,5 +132,172 @@
     "style": {
       "bgColor": "#299ee3"
     }
+  },
+  {
+    "type": "container-scrollFix",
+    "items": [
+      {
+        "type": "CustomCell",
+        "text": "滚动固定View",
+        "imageUrl": "https://gw.alicdn.com/tfs/TB1vqF.PpXXXXaRaXXXXXXXXXXX-110-72.png",
+        "style": {
+          "width": "120"
+        }
+      }
+    ],
+    "style": {
+      "x": 20,
+      "y": 20,
+      "showType": "showOnEnter"
+    }
+  },
+  {
+    "type": "container-float",
+    "items": [
+      {
+        "type": "InterfaceCell",
+        "text": "浮动View",
+        "style": {
+          "width": "120"
+        }
+      }
+    ],
+    "style": {
+      "align": "bottom_right",
+      "x": 20,
+      "y": 20
+    }
+  },
+  {
+    "type": "container-fix",
+    "items": [
+      {
+        "type": "AnnotationCell",
+        "text": "固定View",
+        "style": {
+          "width": "120"
+        }
+      }
+    ],
+    "style": {
+      "align": "top_right",
+      "x": 20,
+      "y": 20
+    }
+  },
+  {
+    "type": "container-banner",
+    "items": [
+      {
+        "type": "InterfaceCell",
+        "text": "轮播滚动View"
+      },
+      {
+        "type": "InterfaceCell",
+        "text": "轮播滚动View"
+      },
+      {
+        "type": "InterfaceCell",
+        "text": "轮播滚动View"
+      },
+      {
+        "type": "InterfaceCell",
+        "text": "轮播滚动View"
+      }
+    ],
+    "style": {
+      "itemRatio": 2.4,
+      "pageRatio": 1,
+      "autoScroll": 3000,
+      "specialInterval": {
+        "0": 2000,
+        "1": 1000
+      },
+      "infinite": true,
+      "indicatorImg1": "https://img.alicdn.com/tps/TB16i4qNXXXXXbBXFXXXXXXXXXX-32-4.png",
+      "indicatorImg2": "https://img.alicdn.com/tps/TB1XRNFNXXXXXXKXXXXXXXXXXXX-32-4.png",
+      "indicatorGravity": "center",
+      "indicatorPosition": "inside",
+      "indicatorGap": 5,
+      "indicatorMargin": 8,
+      "indicatorHeight": 2,
+      "scrollMarginLeft": 50,
+      "scrollMarginRight": 50,
+      "hGap": 10
+    }
+  },
+  {
+    "type": "container-scroll",
+    "items": [
+      {
+        "type": "AnnotationCell",
+        "text": "横向滚动View"
+      },
+      {
+        "type": "AnnotationCell",
+        "text": "横向滚动View"
+      },
+      {
+        "type": "AnnotationCell",
+        "text": "横向滚动View"
+      },
+      {
+        "type": "AnnotationCell",
+        "text": "横向滚动View"
+      }
+    ],
+    "style": {
+      "pageWidth": 150,
+      "pageHeight": -1,
+      "hasIndicator": true,
+      "indicatorColor": "#FF0000",
+      "defaultIndicatorColor": "#666666"
+    }
+  },
+  {
+    "type": "container-waterfall",
+    "items": [
+      {
+        "type": "CustomCell",
+        "text": "瀑布流",
+        "imageUrl": "https://gw.alicdn.com/tfs/TB1vqF.PpXXXXaRaXXXXXXXXXXX-110-72.png"
+      },
+      {
+        "type": "CustomCell",
+        "text": "瀑布流",
+        "imageUrl": "https://gw.alicdn.com/tfs/TB1vqF.PpXXXXaRaXXXXXXXXXXX-110-72.png",
+        "style": {
+          "ratio": 1
+        }
+      },
+      {
+        "type": "CustomCell",
+        "text": "瀑布流",
+        "imageUrl": "https://gw.alicdn.com/tfs/TB1vqF.PpXXXXaRaXXXXXXXXXXX-110-72.png",
+        "style": {
+          "ratio": 1
+        }
+      },
+      {
+        "type": "CustomCell",
+        "text": "瀑布流",
+        "imageUrl": "https://gw.alicdn.com/tfs/TB1vqF.PpXXXXaRaXXXXXXXXXXX-110-72.png",
+        "style": {
+          "ratio": 1
+        }
+      }
+    ],
+    "style": {
+      "margin": [
+        10,
+        10,
+        10,
+        10
+      ],
+      "vGap": 10,
+      "hGap": 10,
+      "bgColor": "#CC00FF00",
+      "column": 2
+    }
   }
 ]

app/src/main/java/com/xuexiang/xuidemo/fragment/expands/alibaba/TangramAndroidFragment.java

@@ -19,13 +19,15 @@
 
 import android.view.View;
 import android.widget.ImageView;
+import android.widget.TextView;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.recyclerview.widget.RecyclerView;
 
 import com.tmall.wireless.tangram.TangramBuilder;
 import com.tmall.wireless.tangram.TangramEngine;
+import com.tmall.wireless.tangram.structure.viewcreator.ViewHolderCreator;
 import com.tmall.wireless.tangram.util.IInnerImageSetter;
 import com.xuexiang.xpage.annotation.Page;
 import com.xuexiang.xui.widget.actionbar.TitleBar;
@@ -38,6 +40,9 @@
 import com.xuexiang.xuidemo.fragment.expands.alibaba.tangram.model.CustomCellView;
 import com.xuexiang.xuidemo.fragment.expands.alibaba.tangram.support.CustomClickSupport;
 import com.xuexiang.xuidemo.fragment.expands.alibaba.tangram.CustomInterfaceView;
+import com.xuexiang.xuidemo.fragment.expands.alibaba.tangram.support.CustomExposureSupport;
+import com.xuexiang.xuidemo.fragment.expands.alibaba.tangram.viewholder.CustomHolderCell;
+import com.xuexiang.xuidemo.fragment.expands.alibaba.tangram.viewholder.CustomViewHolder;
 import com.xuexiang.xuidemo.utils.Utils;
 import com.xuexiang.xutil.resource.ResourceUtils;
 
@@ -48,7 +53,7 @@
 
 /**
  * Tangram-Android使用步骤
- *
+ * <p>
  * 1.初始化 Tangram 环境
  * 2.初始化 TangramBuilder
  * 3.注册自定义的卡片和组件
@@ -92,17 +97,20 @@ public <IMAGE extends ImageView> void doLoadImageUrl(@NonNull IMAGE view,
         // 3.注册自定义的卡片和组件
         /// 使用接口方式的自定义View
         builder.registerCell("InterfaceCell", CustomInterfaceView.class);
+        builder.registerCell("NoBackground", NoBackgroundView.class);
         /// 使用注解方式的自定义View
         builder.registerCell("AnnotationCell", CustomAnnotationView.class);
         /// 自定义model组件
         builder.registerCell("CustomCell", CustomCell.class, CustomCellView.class);
-        builder.registerCell("NoBackground", NoBackgroundView.class);
+        builder.registerCell("CustomHolderCell", CustomHolderCell.class,
+                new ViewHolderCreator<>(R.layout.tangram_item_holder, CustomViewHolder.class, TextView.class));
 
         // 4.生成TangramEngine实例
         mEngine = builder.build();
 
         // 5.绑定业务 support 类到 engine
         mEngine.addSimpleClickSupport(new CustomClickSupport());
+        mEngine.addExposureSupport(new CustomExposureSupport());
 
         // 6.绑定 recyclerView
         mEngine.bindView(recyclerView);

app/src/main/java/com/xuexiang/xuidemo/fragment/expands/alibaba/tangram/support/CustomExposureSupport.java

@@ -0,0 +1,83 @@
+/*
+ * Copyright (C) 2020 xuexiangjys(xuexiangjys@163.com)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+package com.xuexiang.xuidemo.fragment.expands.alibaba.tangram.support;
+
+import android.util.Log;
+import android.view.View;
+
+import androidx.annotation.NonNull;
+
+import com.tmall.wireless.tangram.dataparser.concrete.Card;
+import com.tmall.wireless.tangram.structure.BaseCell;
+import com.tmall.wireless.tangram.support.ExposureSupport;
+
+/**
+ * @author SunQiang
+ * @since 2019-04-22
+ */
+
+/**
+ * 自定义曝光事件
+ *
+ * @author xuexiang
+ * @since 2020/4/10 1:13 AM
+ */
+public class CustomExposureSupport extends ExposureSupport {
+
+    private static final String TAG = "CustomExposureSupport";
+
+    public CustomExposureSupport() {
+        setOptimizedMode(true);
+    }
+
+    /**
+     * 布局的整体曝光
+     *
+     * @param card
+     * @param offset
+     * @param position
+     */
+    @Override
+    public void onExposure(@NonNull Card card, int offset, int position) {
+        Log.e(TAG, "onExposure: card=" + card.getClass().getSimpleName() + ", offset=" + offset + ", position=" + position);
+    }
+
+    /**
+     * 布局的整体曝光
+     *
+     * @param targetView
+     * @param cell
+     * @param type
+     */
+    @Override
+    public void defaultExposureCell(@NonNull View targetView, @NonNull BaseCell cell, int type) {
+        Log.e(TAG, "defaultExposureCell: targetView=" + targetView.getClass().getSimpleName() + ", pos=" + cell.pos + ", type=" + type);
+    }
+
+    /**
+     * 组件的局部区域曝光
+     *
+     * @param targetView
+     * @param cell
+     * @param type
+     */
+    @Override
+    public void defaultTrace(@NonNull View targetView, @NonNull BaseCell cell, int type) {
+        Log.e(TAG, "defaultTrace: targetView=" + targetView.getClass().getSimpleName() + ", pos=" + cell.pos + ", type=" + type);
+    }
+}

app/src/main/java/com/xuexiang/xuidemo/fragment/expands/alibaba/tangram/viewholder/CustomHolderCell.java

@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2020 xuexiangjys(xuexiangjys@163.com)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+package com.xuexiang.xuidemo.fragment.expands.alibaba.tangram.viewholder;
+
+import android.widget.TextView;
+
+import androidx.annotation.NonNull;
+
+import com.tmall.wireless.tangram.structure.BaseCell;
+import com.tmall.wireless.tangram.support.ExposureSupport;
+
+import java.util.Locale;
+
+/**
+ * 自定义ViewHolder的model
+ *
+ * @author xuexiang
+ * @since 2020/4/10 12:39 AM
+ */
+public class CustomHolderCell extends BaseCell<TextView> {
+
+    @Override
+    public void bindView(@NonNull TextView view) {
+        if (pos % 2 == 0) {
+            view.setBackgroundColor(0xff000fff);
+        } else {
+            view.setBackgroundColor(0xfffff000);
+        }
+        view.setText(String.format(Locale.CHINA, "%s%d: %s", getClass().getSimpleName(), pos, optParam("text")));
+        view.setOnClickListener(this);
+        if (serviceManager != null) {
+            ExposureSupport exposureSupport = serviceManager.getService(ExposureSupport.class);
+            if (exposureSupport != null) {
+                exposureSupport.onTrace(view, this, type);
+            }
+        }
+    }
+}