前言
在開發(fā)的時候讳侨，我們不免會遇到這么一種數(shù)據(jù)展示枪孩，該數(shù)據(jù)有以下特征：
- 數(shù)據(jù)要以列表形式展示
- 每條數(shù)據(jù)要分多行展示，如第一行展示姓名，第二行展示培訓(xùn)課程，第三行顯示培訓(xùn)時間
- 每行展示的數(shù)據(jù)樣式不一樣拒担，姓名要求展示在左邊追驴，時間展示在右邊
- 更糟糕的是第二行展示的培訓(xùn)課程是一個可下拉列表，點擊能收起和展開恶复，在展開時能看到具體的培訓(xùn)內(nèi)容怜森。
這么說的話，大家可能對這個場景還是很模糊谤牡，那么下面先來章效果圖幫大家理解下場景吧：
今天就來講講這種效果的實現(xiàn)邏輯吧副硅。
涉及以下內(nèi)容：
- 分析需求
- 實現(xiàn)原理
- 數(shù)據(jù)拆分整合
- 示例demo
一. 分析需求
先分析需求，第一條：“數(shù)據(jù)要以列表形式展示”
那麼這個就得用RecycleView實現(xiàn)
第二翅萤，三條：“每條數(shù)據(jù)要分多行展示恐疲，每行展示的數(shù)據(jù)樣式不一樣”，需要用到RecycleView的多布局
第四條：“展示一個可下拉列表”，這個似乎要用ExpandableListView實現(xiàn)培己？或者RecycleView嵌套碳蛋？
經(jīng)過一番思考和測試，發(fā)現(xiàn)ExpandableListView實現(xiàn)不了這個效果省咨，而我用RecycleView嵌套的過程中出現(xiàn)錯亂的問題肃弟，就沒有繼續(xù)下去了。但是RecycleView嵌套還是會有一個問題零蓉，那就是性能問題愕乎。所以接下來，我們會用RecycleView實現(xiàn)多布局的方式對原始數(shù)據(jù)進(jìn)行分割展示壁公。
ok感论，分析到此，下面開干紊册。
二.實現(xiàn)原理
2.1 首先看看要展示的原始數(shù)據(jù)結(jié)構(gòu)
package com.android.model;
import java.io.Serializable;
import java.util.List;
/**
* Title:
* Description:
* <p>
* Created by pei
* Date: 2018/5/15
*/
public class Data implements Serializable{
private String header;
private String productGroup;
private List<String>product;
private String footer;
public String getHeader() {
return header;
}
public void setHeader(String header) {
this.header = header;
}
public String getProductGroup() {
return productGroup;
}
public void setProductGroup(String productGroup) {
this.productGroup = productGroup;
}
public List<String> getProduct() {
return product;
}
public void setProduct(List<String> product) {
this.product = product;
}
public String getFooter() {
return footer;
}
public void setFooter(String footer) {
this.footer = footer;
}
}
結(jié)合上面的效果圖比肄，我們需要將Data數(shù)據(jù)源“切割”成4部分，header囊陡，productGroup芳绩，product和footer，其中product作為一個list展示撞反，需要滿足即可展示也可隱藏的功能妥色。
接下來，我們要實現(xiàn)的整體邏輯就是將一個data數(shù)據(jù)拆解成四種不同類型的數(shù)據(jù)遏片，然后依次塞到RecycleView對應(yīng)的List中平鋪展示嘹害。這里，我們需要定義數(shù)據(jù)類型
2.2 定義不同的數(shù)據(jù)類型
package com.android.model;
import java.io.Serializable;
/**
* Title:數(shù)據(jù)類型
* Description:
* <p>
* Created by pei
* Date: 2018/5/15
*/
public class ItemType implements Serializable{
public static final int TYPE_HEADER=0;
public static final int TYPE_PRODUCT_GROUP=1;
public static final int TYPE_PRODUCT=2;
public static final int TYPE_FOOTER=3;
}
既然將數(shù)據(jù)分成四個不同的數(shù)據(jù)類型吮便，又需要統(tǒng)一展示在RecycleView的list中笔呀，那么這四個不同的數(shù)據(jù)類型需要繼承一個統(tǒng)一的數(shù)據(jù)類型ItemData
2.3 定義統(tǒng)一數(shù)據(jù)類型類ItemData
package com.android.model;
import java.io.Serializable;
/**
* Title:總數(shù)據(jù)
* Description:
* <p>
* Created by pei
* Date: 2018/5/15
*/
public class ItemData implements Serializable{
public static final int DEFAULT_INDEX=-1;
private int itemType=DEFAULT_INDEX;//類型
private int itemId;//一級數(shù)據(jù)的position
public int getItemType() {
return itemType;
}
public void setItemType(int itemType) {
this.itemType = itemType;
}
public int getItemId() {
return itemId;
}
public void setItemId(int itemId) {
this.itemId = itemId;
}
}
這里我們統(tǒng)一定義了一個itemType，用于給數(shù)據(jù)進(jìn)行分類髓需，然后加了一個itemId许师，用于給每個數(shù)據(jù)設(shè)置一個position
接下來，看看 header僚匆，productGroup微渠，product和footer這四類數(shù)據(jù)，其中header和footer無非是顯示一個字符串咧擂，這個就簡單的展示下header對應(yīng)的數(shù)據(jù)data吧
2.4 HeaderData數(shù)據(jù)樣例
package com.android.model;
/**
* Title:頭部數(shù)據(jù)
* Description:
* <p>
* Created by pei
* Date: 2018/5/15
*/
public class HeaderData extends ItemData{
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
FooterData和HeaderData大同小異逞盆，此處省略，然后看productGroup和product屋确，這兩個有些特殊纳击，類似一個二級列表续扔，而productGroup對應(yīng)的是二級列表中的Parent，product對應(yīng)的是二級列表中的child焕数。
下面看看productGroup對應(yīng)的數(shù)據(jù)結(jié)構(gòu)---ProductGroupData
2.5 ProductGroupData代碼
package com.android.model;
import java.util.List;
/**
* Title:產(chǎn)品一級數(shù)據(jù)
* Description:
* <p>
* Created by pei
* Date: 2018/5/15
*/
public class ProductGroupData extends ItemData{
private String name;
private boolean expand;//是否展開
private List<ProductData> productList;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public boolean isExpand() {
return expand;
}
public void setExpand(boolean expand) {
this.expand = expand;
}
public List<ProductData> getProductList() {
return productList;
}
public void setProductList(List<ProductData> productList) {
this.productList = productList;
}
}
ProductGroupData最主要的是標(biāo)志位expand纱昧，用于記錄其二級列表是否為展開狀態(tài)，然后一個 List<ProductData> productList 用來存放二級數(shù)據(jù)
然后是ProductData數(shù)據(jù)結(jié)構(gòu)
2.5 ProductData代碼
package com.android.model;
/**
* Title:產(chǎn)品二級數(shù)據(jù)
* Description:
* <p>
* Created by pei
* Date: 2018/5/15
*/
public class ProductData extends ItemData{
private int subItemId;//二級數(shù)據(jù)展示下標(biāo)
private String name;
public int getSubItemId() {
return subItemId;
}
public void setSubItemId(int subItemId) {
this.subItemId = subItemId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
ProductData中主要包含一個subItemId堡赔，這是用來標(biāo)記二級數(shù)據(jù)展示時的childPosition
至此數(shù)據(jù)結(jié)構(gòu)創(chuàng)建完畢
三. 數(shù)據(jù)拆分整合
3.1 模擬一個數(shù)據(jù)源
List<Data>list=new ArrayList<>();
Data data1=new Data();
data1.setHeader("姓名:小明");
data1.setProductGroup("培訓(xùn)課程");
data1.setProduct(Arrays.asList("語文","數(shù)學(xué)","英語"));
data1.setFooter("時間:2008-6-10");
list.add(data1);
Data data2=new Data();
data2.setHeader("姓名:小花");
data2.setProductGroup("培訓(xùn)課程");
data2.setProduct(Arrays.asList("物理","化學(xué)"));
data2.setFooter("時間:2008-6-12");
list.add(data2);
Data數(shù)據(jù)結(jié)構(gòu)前面已經(jīng)介紹過识脆，下面需要將數(shù)據(jù)源整合成我們展示時的數(shù)據(jù)格式
3.2 整個整合流程代碼
public List<ItemData>getItemDatas(List<Data> datas){
List<ItemData>itemDatas=new ArrayList<>();
if(datas!=null&&!datas.isEmpty()){
int size=datas.size();
for(int i=0;i<size;i++){
Data data=datas.get(i);
//頭部
HeaderData headerData=getHeaderData(data,i);
itemDatas.add(headerData);
//中部
ProductGroupData productGroup = getProductGroupData(data, i);
if (productGroup != null) {
itemDatas.add(productGroup);
}else{
LogUtil.i("========productGroup為null======i="+i);
}
//底部
FooterData footerData=getFooterData(data,i);
itemDatas.add(footerData);
}
}
return itemDatas;
}
然后具體的大家要對HeaderData，ProductGroupData和FooterData進(jìn)行處理善已，其中ProductGroupData里面包含ProductData的列表數(shù)據(jù)灼捂，這些數(shù)據(jù)有一個共同點，就是需要設(shè)置itemType和itemId换团，itemType用于設(shè)置數(shù)據(jù)類型悉稠，itemId用來存放數(shù)據(jù)下標(biāo)(即position)，當(dāng)然大家更需要處理好 ProductGroupData與ProductData中的數(shù)據(jù)關(guān)聯(lián)艘包。
ok的猛，數(shù)據(jù)整合完畢后，就是adapter的處理了想虎，所有數(shù)據(jù)放到RecyclerView.Adapter中展示卦尊，因為所有數(shù)據(jù)（包括HeaderData，ProductGroupData舌厨，F(xiàn)ooterData以及ProductData的list）均會平鋪展示在RecycleView中岂却，于是我們需要重寫以下方法：
getItemCount ----- 重新計算data的所有數(shù)目
getItemViewType(int position) ---- 獲取每項的內(nèi)容
onCreateViewHolder(ViewGroup parent, int viewType) ---- 每項根據(jù)類型定義不同ui布局
onBindViewHolder(RecyclerView.ViewHolder holder, int position) --- 不同數(shù)據(jù)類型的對應(yīng)邏輯處理
在adapter聲明里，我們會定義兩個數(shù)據(jù)list
protected List<ItemData> mData;//傳入的data
protected List<ItemData>mAllOrders=new ArrayList<>();//展示的data
mData用于從activity中傳入數(shù)據(jù)裙椭，此時的數(shù)據(jù)結(jié)構(gòu)為
----HeaderData
----ProductGroupData
----ProductData1
----ProductData2
----........
----FooterData
mAllOrders是最終展示數(shù)據(jù)躏哩，其數(shù)據(jù)結(jié)構(gòu)為
----HeaderData
----ProductGroupData
----ProductData1
----ProductData2
----........
----FooterData
mData與mAllOrders最大區(qū)別在于mData中包含有二級數(shù)據(jù)結(jié)構(gòu)，而mAllOrders中的數(shù)據(jù)就一層骇陈，統(tǒng)一平鋪展示震庭。
getItemCount既承載著將mData數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)化成mAllOrders的數(shù)據(jù)結(jié)構(gòu)瑰抵，也需要計算所有數(shù)據(jù)的個數(shù)
3.2 getItemViewType(int position)獲取每項的內(nèi)容
這個比較簡單
@Override
public int getItemViewType(int position) {
return mAllOrders.get(position).getItemType();
}
然后是onCreateViewHolder(ViewGroup parent, int viewType)
3.3 onCreateViewHolder示例代碼
switch (viewType) {
case ItemType.TYPE_HEADER:
View v = mInflater.inflate(R.layout.item_header, parent, false);
holder = new HeaderHolder(v);
break;
case ItemType.TYPE_PRODUCT_GROUP:
View v1 = mInflater.inflate(R.layout.item_product_group, parent, false);
holder = new ProductGroupHolder(v1);
break;
case ItemType.TYPE_PRODUCT:
View v2 = mInflater.inflate(R.layout.item_product, parent, false);
holder = new ProductHolder(v2);
break;
case ItemType.TYPE_FOOTER:
View v3 = mInflater.inflate(R.layout.item_footer, parent, false);
holder = new FooterHolder(v3);
break;
default:
break;
}
3.4 onBindViewHolder不同數(shù)據(jù)處理邏輯
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
Object obj = mAllOrders.get(position);
if (holder instanceof HeaderHolder) {
bindHeader(holder, obj,position);
}else if(holder instanceof ProductGroupHolder){
bindProductGroup(holder,obj,position);
}else if(holder instanceof ProductHolder){
bindProduct(holder, obj,position);
}else if(holder instanceof FooterHolder){
bindFooter(holder,obj, position);
}
}
最后在bindHeader你雌，bindProductGroup，bindProduct二汛，bindFooter中對各數(shù)據(jù)的展示和邏輯做處理婿崭。
這里需要提醒的是bindProductGroup(holder,obj,position);方法，因為當(dāng)中涉及到點擊展開ProductData集合肴颊，再點擊收起ProductData集合的操作氓栈，需要用到RecycleView的兩個更新方法：
//展開時調(diào)用
notifyItemRangeInserted(int positionStart, int itemCount)
//收起時調(diào)用
notifyItemRangeRemoved(int positionStart, int itemCount)
3.5 點擊展開，點擊收起ProductData列表的邏輯
處理此邏輯示例代碼如下：
//點擊事件
productGroupHolder.mTvName.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//更新數(shù)據(jù)
if(productGroupData.isExpand()){//收起
notifyItemRangeRemoved(productGroupHolder.getAdapterPosition() + 1, productGroupData.getProductList().size());
}else{//展開
notifyItemRangeInserted(productGroupHolder.getAdapterPosition() + 1, productGroupData.getProductList().size());
}
productGroupData.setExpand(!productGroupData.isExpand());
notifyItemChanged(productGroupHolder.getAdapterPosition());
}
});
一切就緒以后婿着，在MainActivity中調(diào)用
3.6 MainActivity中示例代碼
package com.android.testdemo;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Button;
import com.android.adapter.MyAdapter;
import com.android.base.BaseActivity;
import com.android.model.Data;
import com.android.model.ItemData;
import java.util.ArrayList;
import java.util.List;
import butterknife.BindView;
public class MainActivity extends BaseActivity {
@BindView(R.id.button1)
Button mBtn1;
@BindView(R.id.rv)
RecyclerView mRecyclerView;
private List<Data> mDatas;
private MyAdapter myAdapter;
@Override
protected int getContentViewId() {
return R.layout.activity_main;
}
@Override
protected void initView() {
}
@Override
protected void initData() {
//模擬數(shù)據(jù)
mDatas=ParseHelper.getInstance().getDatas();
//初始化RecycleView相關(guān)
List<ItemData>itemDatas=new ArrayList<>();
itemDatas.addAll(ParseHelper.getInstance().getItemDatas(mDatas));
myAdapter=new MyAdapter(itemDatas,mContext);
myAdapter.setRecyclerManager(mRecyclerView);
}
@Override
protected void setListener() {
mBtn1.setOnClickListener(this);
}
@Override
public void onClick(View v){
switch (v.getId()) {
case R.id.button1:
break;
default:
break;
}
}
@Override
protected void onDestroy() {
super.onDestroy();
}
}
效果圖的話前面已經(jīng)貼出了授瘦，這里就不貼了
ok,今天關(guān)于“RecycleView實現(xiàn)多布局可展開列表”的原理解析及實現(xiàn)過程就講到這里了醋界，謝謝咯。
