Android复杂数据流的“高效”渲染(二)

上篇Android ListView中复杂数据流的高效渲染文章中介绍如何高效利用ListView的缓存进行渲染。以后有挺多同窗有些疑惑，但愿能够有一个demo，因而利用业余时间把demo橹出来了，若是有什么问题你们能够评论或者在ComplexDataStream issue中提issue。这里贴一下demo的地址：ComplexDataStream。另我的以为这个思路实际增长了代码复杂度，在逻辑上并不高效，因而在题目中加了引号，可是实测一个复杂列表中能够节约10-20m的内存，这一点是颇有诱惑力的。下面结合代码介绍一下。

代码结构

Paste_Image.png

• Model
  model中是全部的原始数据类，这里为了方便，每种数据的名字实际包含了须要展现的模型：如CardWithTitleItem数据实际须要展现一个标题和一个卡片，HeaderImageCardItem须要展现一个头部、图片、卡片。

Paste_Image.png

Paste_Image.png

• Adapter
  Adapter中放置了adapter和各类类型的holder，这里把多种数据类型拆分红了card、divider、header、image、link、text、title，并为每种类型设置了相应的布局。

• Util
  Util中设置如何transform数据到相应的展现模版，以及解决按压效果的问题。

代码思路

咱们的目的是将复杂的数据类型进行拆分，从而达到细颗粒的view复用，下降内存占用。

1. 肯定拆分后的展现类型，这里使用了一个enum类型：

   public enum ItemType {
    TITLE,
    CARD,
    HEADER,
    IMAGE,
    TEXT,
    LINK,
    DIVIDER
   }复制代码

2. transform数据到模板，拆分后一个数据类型对应多个模板，这里咱们使用hashmap创建数据到模板的影射关系：

   private static Map<Class, List<ItemType>> map = new HashMap<>();复制代码

   public static List<ItemWrap> getTransformedItem(List<BaseItem> baseItems) {
        List<ItemWrap> itemWraps = new ArrayList<>();
        for (BaseItem baseItem : baseItems) {
            for (ItemType itemType : map.get(baseItem.getClass())) {
                ItemWrap temp = new ItemWrap(baseItem, itemType);
                itemWraps.add(temp);
                baseItem.itemWraps.add(temp);
            }
            ItemWrap divider = new ItemWrap(baseItem, ItemType.DIVIDER);
            itemWraps.add(divider);
            baseItem.itemWraps.add(divider);
        }
        return itemWraps;
    }复制代码

   getTransformedItem方法将原始数据进行拆分，注意每种原始数据类型中都要加入divider模板，用于展现ListView的分割线。
3. 根据不一样的展现类型提供不一样的view：

   public static View createItemView(ItemType itemType) {
        View view = null;
        BaseHolder baseHolder = null;
        switch (itemType) {
            case TITLE:
                view = LayoutInflater.from(_Application.applicationContext).inflate(R.layout.title_item, null);
                baseHolder = new TitleHolder();
                break;
            case CARD:
                view = LayoutInflater.from(_Application.applicationContext).inflate(R.layout.card_item, null);
                baseHolder = new CardHolder();
                break;
            case TEXT:
                view = LayoutInflater.from(_Application.applicationContext).inflate(R.layout.text_item, null);
                baseHolder = new TextHolder();
                break;
            case IMAGE:
                view = LayoutInflater.from(_Application.applicationContext).inflate(R.layout.image_item, null);
                baseHolder = new ImageHolder();
                break;
            case LINK:
                view = LayoutInflater.from(_Application.applicationContext).inflate(R.layout.link_item, null);
                baseHolder = new LinkHolder();
                break;
            case HEADER:
                view = LayoutInflater.from(_Application.applicationContext).inflate(R.layout.header_item, null);
                baseHolder = new HeaderHolder();
                break;
            case DIVIDER:
                view = LayoutInflater.from(_Application.applicationContext).inflate(R.layout.divider_item, null);
                baseHolder = new DividerHolder();
                break;
        }
        baseHolder.setup(view);
        view.setTag(baseHolder);
        return view;
    }复制代码

4. 按压效果的实现
   对数据进行拆分后，有一个坑就是按压效果的实现，这个时候listView中的每一个item都不是一个完整的原始数据，要实现一个总体的按压效果，demo的思路是：
   

   

   Paste_Image.png

   
   当按压任意一个view时，通知相应的item，改变item包含的全部view的状态。具体实现时定义了一个BackgroundLinearLayout：

   @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (ev.getAction() == MotionEvent.ACTION_UP) {
            if (mListener != null) {
                mListener.onStatePress(false);
            }
        } else if (ev.getAction() == MotionEvent.ACTION_DOWN) {
            if (mListener != null) {
                mListener.onStatePress(true);
            }
        } else if (ev.getAction() == MotionEvent.ACTION_CANCEL) {
            if (mListener != null) {
                mListener.onStatePress(false);
            }
        }
        super.dispatchTouchEvent(ev);
        return true;
    }复制代码

   能够完成view按压的回调。
   可是每一个holder须要如思路图所示绑定到View，绑定能够在adapter的getview中完成。：

   @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ItemWrap itemWrap = (ItemWrap) getItem(position);
        if(convertView == null){
            convertView = ItemWrapHelper.getItemView(itemWrap.getItemType());
        }else {
            ((ItemWrap)(convertView.getTag(R.string.tag_key))).unBindView();
        }
        convertView.setTag(R.string.tag_key, itemWrap);
        BaseHolder baseHolder = (BaseHolder) convertView.getTag();
        baseHolder.render(itemWrap.getBaseItem());
        itemWrap.bindView(convertView);
        return convertView;
    }复制代码

   基本demo就完成了，按压效果如图：
   

   

   Paste_Image.png

   总结

   因为主要展示功能，界面没有进行太多调整，另外mock数据是复制了部分［one 一个]应用的数据，表示感谢。代码中有什么问题，或者有什么不合理的地方，感兴趣的同窗能够创建pull request，欢迎讨论。项目地址ComplexDataStream。

Other

欢迎关注公众号wutongke，天天推送移动开发前沿技术文章：

wutongke