Android單個RecyclerView實現(xiàn)列表嵌套的效果

更新時間：2017年08月16日 11:24:57 作者：WYiang

本篇文章主要介紹了Android單個RecyclerView實現(xiàn)列表嵌套的效果，具有一定的參考價值，有興趣的可以了解一下

很多時候會遇到一種需求，列表里面有列表，像這種需求之前一般都是用多個列表控件互相嵌套來實現(xiàn)，但是這樣很容易出現(xiàn)一些問題，例如滾動沖突、數(shù)據(jù)顯示不全、多余的邏輯處理等。后來發(fā)現(xiàn)，一個recyclerview就可以實現(xiàn)列表嵌套的效果，這里需要用到recyclerview的多布局功能。

效果圖：

recyclerview的多布局涉及到的主要方法是getItemViewType，作用是設(shè)置每個item要顯示的布局類型。之前不了解的時候，都是直接用數(shù)學(xué)邏輯直接去計算，多少個position后顯示什么布局，這種方式適合在邏輯簡單的時候，但是一旦邏輯稍微有點復(fù)雜就果斷不能用，可能會自己埋下深坑不說，還不好維護，所以這邊把布局類型放在數(shù)據(jù)對象中。

1. 定義多布局對象的基類：

public class BaseMulDataModel {
  protected int type;

  public int getType() {
    return type;
  }

  public void setType(int type) {
    this.type = type;
  }
}

type是該對象對應(yīng)的布局類型。

2. recyclerview數(shù)據(jù)的顯示放在ViewHolder中,定義Holder基類

public abstract class BaseMulViewHolder<T extends BaseMulDataModel> extends RecyclerView.ViewHolder {

  public BaseMulViewHolder(View itemView) {
    super(itemView);
  }

  protected abstract void bindData(T dataModel);

}

這里面多布局中可能涉及到的多個對象，所以基類中的對象類型使用泛型定義，必須是多布局對象基類的子類，這樣在后面數(shù)據(jù)和控件綁定的時候比較方便。

3. 開始創(chuàng)建多布局適配器

public class MullayoutAdapter extends RecyclerView.Adapter<BaseMulViewHolder> {

  /**
   * 定義三種布局類型
   */
  public static final int TYPE_ONE = 1;
  public static final int TYPE_TWO = 2;
  public static final int TYPE_THREE = 3;

  /**
   * 數(shù)據(jù)集合
   */
  private List<BaseMulDataModel> mList;

  @Override
  public BaseMulViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    //根據(jù)不同的布局類型，設(shè)置創(chuàng)建相關(guān)的holder
    switch (viewType) {
      case TYPE_ONE:
        return new ViewHolderOne(LayoutInflater.from(parent.getContext())
            .inflate(R.layout.layout_holder1, parent, false));
      case TYPE_TWO:
        return new ViewHolderTwo(LayoutInflater.from(parent.getContext())
            .inflate(R.layout.layout_holder2, parent, false));
      case TYPE_THREE:
        return new ViewHolderThree(LayoutInflater.from(parent.getContext())
            .inflate(R.layout.layout_holder3, parent, false));
    }
    return null;
  }

  @Override
  public void onBindViewHolder(BaseMulViewHolder holder, int position) {
    //綁定數(shù)據(jù)
    holder.bindData(mList.get(position));
  }

  @Override
  public int getItemCount() {
    return mList.size();
  }

  @Override
  public int getItemViewType(int position) {
    return mList.get(position).getType();
  }

  /**
   * 設(shè)置數(shù)據(jù)
   *
   * @param list
   */
  public void setDatas(List<BaseMulDataModel> list) {
    mList = list;
    notifyDataSetChanged();
  }

  public List<BaseMulDataModel> getDatas() {
    return mList;
  }

  /**
   * 設(shè)置第一個布局的數(shù)據(jù)
   */
  class ViewHolderOne extends BaseMulViewHolder<OneModel> {
    TextView textView;

    public ViewHolderOne(View itemView) {
      super(itemView);
      textView = (TextView) itemView.findViewById(R.id.holder1_tv);
    }

    @Override
    protected void bindData(OneModel dataModel) {
      textView.setText(dataModel.getTitle());
    }
  }


  /**
   * 設(shè)置第二個布局的數(shù)據(jù)
   */
  class ViewHolderTwo extends BaseMulViewHolder<TwoModel> {
    ImageView imageView;

    public ViewHolderTwo(View itemView) {
      super(itemView);
      imageView = (ImageView) itemView.findViewById(R.id.holder2_iv);
    }

    @Override
    protected void bindData(TwoModel dataModel) {
      imageView.setImageResource(dataModel.getRes());
    }


  }

  /**
   * 設(shè)置第三個布局的數(shù)據(jù)
   */
  class ViewHolderThree extends BaseMulViewHolder<ThreeModel> {
    TextView textView;

    public ViewHolderThree(View itemView) {
      super(itemView);
      textView = (TextView) itemView.findViewById(R.id.holder3_tv);
    }

    @Override
    protected void bindData(ThreeModel dataModel) {
      textView.setText(dataModel.getNote());
    }


  }

}

首先這邊涉及到布局類型：頭部、內(nèi)容列表、底部。定義三種類型

/**
* 定義三種布局類型
*/
public static final int TYPE_ONE = 1;
public static final int TYPE_TWO = 2;
public static final int TYPE_THREE = 3;

根據(jù)布局類型來創(chuàng)建對應(yīng)的ViewHolder對象

  public BaseMulViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    //根據(jù)不同的布局類型，設(shè)置創(chuàng)建相關(guān)的holder
    switch (viewType) {
      case TYPE_ONE:
        return new ViewHolderOne(LayoutInflater.from(parent.getContext())
            .inflate(R.layout.layout_holder1, parent, false));
      case TYPE_TWO:
        return new ViewHolderTwo(LayoutInflater.from(parent.getContext())
            .inflate(R.layout.layout_holder2, parent, false));
      case TYPE_THREE:
        return new ViewHolderThree(LayoutInflater.from(parent.getContext())
            .inflate(R.layout.layout_holder3, parent, false));
    }
    return null;
  }

當(dāng)然事先創(chuàng)建對應(yīng)的Holder類：

  /**
   * 設(shè)置第一個布局的數(shù)據(jù)
   */
  class ViewHolderOne extends BaseMulViewHolder<OneModel> {
    TextView textView;

    public ViewHolderOne(View itemView) {
      super(itemView);
      textView = (TextView) itemView.findViewById(R.id.holder1_tv);
    }

    @Override
    protected void bindData(OneModel dataModel) {
      textView.setText(dataModel.getTitle());
    }
  }

這邊把泛型對象擦除，使用具體對象OneModel來作為當(dāng)前的數(shù)據(jù)對象。OneModel是BaseMulDataModel的基類。

OneModel的定義：

public class OneModel extends BaseMulDataModel {

  private String title;

  public OneModel(String title, int type) {
    this.title = title;
    this.type = type;
  }

  public String getTitle() {
    return title;
  }

  public void setTitle(String title) {
    this.title = title;
  }
}

4. 進行數(shù)據(jù)處理

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    RecyclerView recycler = (RecyclerView) findViewById(R.id.recycler);
    LinearLayoutManager layoutManager = new LinearLayoutManager(this);
    recycler.setLayoutManager(layoutManager);

    final MullayoutAdapter adapter = new MullayoutAdapter();
    recycler.setAdapter(adapter);

    //數(shù)據(jù)處理
    List<BaseMulDataModel> mList = new ArrayList<>();
    for (int i = 0; i < 5; i++) {
      mList.add(new OneModel("頭部" + i, MullayoutAdapter.TYPE_ONE));
      for (int j = 0; j < 3; j++) {
        mList.add(new TwoModel(R.mipmap.ic_launcher, MullayoutAdapter.TYPE_TWO));
      }
      mList.add(new ThreeModel("底部" + i, MullayoutAdapter.TYPE_THREE));
    }
    adapter.setDatas(mList);
  }
}

后臺返回的數(shù)據(jù)一般不是我們想要的格式，所以自己進行數(shù)據(jù)的拆分處理，數(shù)據(jù)的處理方式很大程度上決定了代碼編寫的難易度。

這邊的數(shù)據(jù)處理是把簡單地需要顯示的數(shù)據(jù)按順序依次放入到數(shù)據(jù)集合list中，然后給每個對象設(shè)置type,定義它所需要的布局類型，數(shù)據(jù)的處理方式比較簡單，但是能應(yīng)付很多的場景。在購物車場景中，一般也是像示例一樣，有頭部、內(nèi)容、底部。后臺返回的數(shù)據(jù)可能是一個json對象包含了所有（頭部、內(nèi)容列表、底部），這邊把他拆分成三部分，在依次放入集合中顯示。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: