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

   <h3><strong>代码结构</strong></h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/48d6633029b67da19e13a6b58c7145e3.png"></p>    <ul>     <li> <p>Model</p> <p>model中是所有的原始数据类，这里为了方便，每种数据的名字实际包含了需要展示的模型：如CardWithTitleItem数据实际需要展示一个标题和一个卡片，HeaderImageCardItem需要展示一个头部、图片、卡片。</p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/aa20d377f34df1e0822d6d7146b2ecfe.png"></p>    <p>Paste_Image.png</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/7a49bb10bf76d0c02185aa3eda61d396.png"></p>    <ul>     <li> <p>Adapter</p> <p>Adapter中放置了adapter和各种类型的holder，这里把多种数据类型拆分成了card、divider、header、image、link、text、title，并为每种类型设置了相应的布局。</p> </li>     <li> <p>Util</p> <p>Util中设置如何transform数据到相应的展示模版，以及解决按压效果的问题。</p> </li>    </ul>    <h2><strong>代码思路</strong></h2>    <p>我们的目的是将复杂的数据类型进行拆分，从而达到细颗粒的view复用，降低内存占用。</p>    <ol>     <li>确定拆分后的展示类型，这里使用了一个enum类型： <pre>  <code class="language-java">public enum ItemType {   TITLE,   CARD,   HEADER,   IMAGE,   TEXT,   LINK,   DIVIDER  }</code></pre> </li>     <li>transform数据到模板，拆分后一个数据类型对应多个模板，这里我们使用hashmap建立数据到模板的影射关系： <pre>  <code class="language-java">private static Map<Class, List<ItemType>> map = new HashMap<>();</code></pre> <pre>  <code class="language-java">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;   }</code></pre> getTransformedItem方法将原始数据进行拆分，注意每种原始数据类型中都要加入divider模板，用于展示ListView的分割线。</li>     <li>根据不同的展示类型提供不同的view： <pre>  <code class="language-java">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;   }</code></pre> </li>     <li style="text-align: center;">按压效果的实现<br> 对数据进行拆分后，有一个坑就是按压效果的实现，这个时候listView中的每个item都不是一个完整的原始数据，要实现一个整体的按压效果，demo的思路是：<br> <img src="https://simg.open-open.com/show/d7dfeab31692d065ec5aadc11a0d4fff.png"> <p>当按压任意一个view时，通知相应的item，改变item包含的所有view的状态。具体实现时定义了一个BackgroundLinearLayout：</p> <pre>  <code class="language-java">@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;   }</code></pre> 可以完成view按压的回调。<br> 但是每个holder需要如思路图所示绑定到View，绑定可以在adapter的getview中完成。： <pre>  <code class="language-java">@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;   }</code></pre> 基本demo就完成了，按压效果如图：<br> <img src="https://simg.open-open.com/show/cc9e4b2532b2e3cd13dd4b2b354d8919.png"> <h2><strong>总结</strong></h2> <p>由于主要展现功能，界面没有进行太多调整，另外mock数据是复制了部分［one 一个]应用的数据，表示感谢。代码中有什么问题，或者有什么不合理的地方，感兴趣的同学可以建立pull request，欢迎讨论。</p> </li>    </ol>    <p>来自：http://www.jianshu.com/p/1ec90ddb65c5</p>    <p> </p>