上篇Android ListView中復(fù)雜數(shù)據(jù)流的高效渲染文章中介紹如何高效利用ListView的緩存進(jìn)行渲染。之后有挺多同學(xué)有些疑惑貌亭,希望可以有一個(gè)demo花墩,于是利用業(yè)余時(shí)間把demo櫓出來(lái)了动壤,如果有什么問(wèn)題大家可以評(píng)論或者在ComplexDataStream issue中提issue反璃。這里貼一下demo的地址:ComplexDataStream丧失。另個(gè)人覺(jué)得這個(gè)思路實(shí)際增加了代碼復(fù)雜度恕汇,在邏輯上并不高效阀坏,于是在題目中加了引號(hào)波势,但是實(shí)測(cè)一個(gè)復(fù)雜列表中可以節(jié)約10-20m的內(nèi)存翎朱,這一點(diǎn)是很有誘惑力的。下面結(jié)合代碼介紹一下尺铣。
代碼結(jié)構(gòu)
- Model
model中是所有的原始數(shù)據(jù)類拴曲,這里為了方便,每種數(shù)據(jù)的名字實(shí)際包含了需要展示的模型:如CardWithTitleItem數(shù)據(jù)實(shí)際需要展示一個(gè)標(biāo)題和一個(gè)卡片凛忿,HeaderImageCardItem需要展示一個(gè)頭部澈灼、圖片、卡片店溢。
Adapter
Adapter中放置了adapter和各種類型的holder叁熔,這里把多種數(shù)據(jù)類型拆分成了card、divider床牧、header荣回、image、link戈咳、text心软、title壕吹,并為每種類型設(shè)置了相應(yīng)的布局。Util
Util中設(shè)置如何transform數(shù)據(jù)到相應(yīng)的展示模版删铃,以及解決按壓效果的問(wèn)題耳贬。
代碼思路
我們的目的是將復(fù)雜的數(shù)據(jù)類型進(jìn)行拆分,從而達(dá)到細(xì)顆粒的view復(fù)用猎唁,降低內(nèi)存占用效拭。
- 確定拆分后的展示類型,這里使用了一個(gè)enum類型:
public enum ItemType {
TITLE,
CARD,
HEADER,
IMAGE,
TEXT,
LINK,
DIVIDER
}
- transform數(shù)據(jù)到模板胖秒,拆分后一個(gè)數(shù)據(jù)類型對(duì)應(yīng)多個(gè)模板缎患,這里我們使用hashmap建立數(shù)據(jù)到模板的影射關(guān)系:
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方法將原始數(shù)據(jù)進(jìn)行拆分,注意每種原始數(shù)據(jù)類型中都要加入divider模板阎肝,用于展示ListView的分割線挤渔。
- 根據(jù)不同的展示類型提供不同的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;
}
-
按壓效果的實(shí)現(xiàn)
對(duì)數(shù)據(jù)進(jìn)行拆分后,有一個(gè)坑就是按壓效果的實(shí)現(xiàn)风题,這個(gè)時(shí)候listView中的每個(gè)item都不是一個(gè)完整的原始數(shù)據(jù)判导,要實(shí)現(xiàn)一個(gè)整體的按壓效果,demo的思路是:
Paste_Image.png
當(dāng)按壓任意一個(gè)view時(shí)沛硅,通知相應(yīng)的item眼刃,改變item包含的所有view的狀態(tài)。具體實(shí)現(xiàn)時(shí)定義了一個(gè)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按壓的回調(diào)摇肌。
但是每個(gè)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就完成了围小,按壓效果如圖:
總結(jié)
由于主要展現(xiàn)功能昵骤,界面沒(méi)有進(jìn)行太多調(diào)整,另外mock數(shù)據(jù)是復(fù)制了部分[one 一個(gè)]應(yīng)用的數(shù)據(jù)肯适,表示感謝变秦。代碼中有什么問(wèn)題,或者有什么不合理的地方框舔,感興趣的同學(xué)可以建立pull request蹦玫,歡迎討論。項(xiàng)目地址ComplexDataStream刘绣。