卡片自定义标签

本文介绍了在卡片中自定义标签的实现步骤。

操作步骤

  1. 客户端注册自定义标签(自定义 View)。

    1. 实现自定义标签(自定义 View)。

      继承 CCardWidget 并实现其抽象方法,主要方法为 onCreateView,在这里返回对应的自定义 View。

      public class CustomCubeWidget extends CCardWidget {
          private static final String TAG = "CustomCubeWidget";
      
          public CustomCubeWidget(Context context) {
              super(context);
          }
      
          /**
           * UI创建接口,表示当前组件要上屏的视图UI
           *
           * @param params 组件在卡片上声明的数据,包括样式、事件和属性,对应的key为DATA_KEY_STYLES、DATA_KEY_EVENTS、DATA_KEY_ATTRS;
           * @param width  组件的宽度
           * @param height 组件的高度
           * @return 返回嵌入的View
           */
          @Override
          public View onCreateView(Map<String, Object> params, int width, int height) {
              MPLogger.debug(TAG, "onCreateView:" + width + "," + height);
              for (String key : params.keySet()) {
                  MPLogger.debug(TAG, key + ":" + params.get(key));
              }
              TextView textView = new TextView(getContext());
              textView.setText("test");
              return textView;
          }
      
          /**
           * UI复用接口,如果组件支持复用(参见 canReuse 方法),当组件被复用重新上屏时调用。
           *
           * @param params 组件在卡片上声明的数据
           * @param width  组件的宽度
           * @param height 组件的高度
           */
          @Override
          public void onReuse(Map<String, Object> params, int width, int height) {
              MPLogger.debug(TAG, "onReuse");
          }
      
          /**
           * 组件数据更新接口
           *
           * @param params 组件在卡片上声明的数据
           */
          @Override
          public void onUpdateData(Map<String, Object> params) {
              MPLogger.debug(TAG, "onUpdateData");
          }
      
          /**
           * 组件复用清理接口。如果组件支持复用(canReuse 返回 true),则组件在进入复用池后会调用 onRecycleAndCached方法,表示当前组件已经离屏放入缓存内,需要清理资源。
           */
          @Override
          public void onRecycleAndCached() {
              MPLogger.debug(TAG, "onRecycleAndCached");
          }
      
          /**
           * 组件是否支持复用;为了提高效率,扩展组件可以支持复用。例如当某个自定义的标签组件由于数据更新被移除当前视图,此时该组件如果支持复用,那么会放入复用池内,下次该组件显示时,会直接从复用池内获取;如果组件不支持复用,则直接调用销毁接口(onDestroy);
           *
           * @return true:复用,false:不复用
           */
          @Override
          public boolean canReuse() {
              MPLogger.debug(TAG, "canReuse");
              return false;
          }
      
          /**
           * 组件销毁回调接口,释放资源
           */
          @Override
          public void onDestroy() {
              MPLogger.debug(TAG, "onDestroy");
          }
      }
    2. 注册自定义标签。

      第一个参数是自定义的标签,可随意定制,在卡片侧会写在 <> 内。建议加上前缀,防止和动态卡片本身的标签冲突。第二个是自定义标签实现类的全路径,注意不要混淆。

      Collection<CubeWidgetInfo> widgetInfos = new LinkedList<>();
      widgetInfos.add(new CubeWidgetInfo("custom-widget", CustomCubeWidget.class.getName()));
      CubeService.instance().getEngine().registerWidgets(widgetInfos);
  2. 卡片侧调用。

    在标签中,写入自定义的标签,此处为 custom-widget

    说明

    写入的自定义标签需要和注册自定义标签步骤中的第一个参数保持一致。

    <template>
        <div class="root">
            ···
            <custom-widget></custom-widget>
            ···
        </div>
    </template>
  3. 将卡片打包发布到后台或者预览,即可渲染客户端自定义的 view。