1. 程式人生 > >Android RecyclerView優雅實現複雜列表佈局(一)

Android RecyclerView優雅實現複雜列表佈局(一)

轉載:https://blog.csdn.net/huang3513/article/details/62044688

前言

在多彩佈局不斷呈現的今天,多佈局混合排布成為一個時尚,今天就結合Holder實現RecyclerView複雜列表佈局。 
效果圖如下(三種佈局): 
這裡寫圖片描述

1.首先在我們主佈局中加入我們的RecyclerView控制元件。 
2.在MainActivity中初始化我們的控制元件

mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);

3.然後對RecyclerView設定佈局資訊和介面卡

  mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
  mAdapter = new DemoAdapter(this);
  mRecyclerView.setAdapter(mAdapter);

4.建立RecyclerView使用的介面卡,完整的Adapter程式碼如下:

/**
 * @author :huangxianfeng on 2017/3/14.
 * RecyclerView的介面卡
 */
public class DemoAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private LayoutInflater mLayoutInflater;

    /**
     * 把addList()獲得的資料新增過來
     */
    private ArrayList<DataModel> mList = new ArrayList<>();

    public DemoAdapter(Context context) {
        mLayoutInflater = LayoutInflater.from(context);
    }

    /**
     * 建立一個方法供外面操作此資料
     * @param list
     */
    public void addList(ArrayList<DataModel> list){
        mList.addAll(list);
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType){
            case DataModel.TYPE_ONE:
                return new TypeOneViewHolder(mLayoutInflater.inflate(R.layout.item_type_one,parent,false));
            case DataModel.TYPE_TWO:
                return new TypeTwoViewHolder(mLayoutInflater.inflate(R.layout.item_type_two,parent,false));
            case DataModel.TYPE_THREE:
                return new TypeThreeViewHolder(mLayoutInflater.inflate(R.layout.item_type_three,parent,false));
        }
        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((TypeAbstractViewHolder)holder).bindHolder(mList.get(position));
    }

    /**
     * 多種佈局時候至關重要的方法
     * @param position
     * @return
     */
    @Override
    public int getItemViewType(int position) {
        //得到不同的佈局型別
        return mList.get(position).type;
    }

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

其中有一個方法不能不提,起到了多佈局實現的關鍵方法,getItemViewType()獲取不同的型別,在我們快取中; 
建立一個數據繫結實體,供在傳遞資料:

/**
 * @author :huangxianfeng on 2017/3/14.
 * 資料封裝類
 */
public class DataModel {

    public static final int TYPE_ONE = 1;
    public static final int TYPE_TWO = 2;
    public static final int TYPE_THREE = 3;

    public int type;

    public int avatarColor;

    public String name;

    public String content;

    public int contentColor;
}

5.如第4中,有這樣幾行程式碼:

switch (viewType){
            case DataModel.TYPE_ONE:
                return new TypeOneViewHolder(mLayoutInflater.inflate(R.layout.item_type_one,parent,false));
            case DataModel.TYPE_TWO:
                return new TypeTwoViewHolder(mLayoutInflater.inflate(R.layout.item_type_two,parent,false));
            case DataModel.TYPE_THREE:
                return new TypeThreeViewHolder(mLayoutInflater.inflate(R.layout.item_type_three,parent,false));
        }

這是通過三個不同的ViewHolder實現不同的三個佈局。其實此處是抽象出一個抽象的TypeAbstractViewHolder,而TypeOneViewHolder,TypeTwoViewHolder,TypeThreeViewHolder分別繼承於TypeAbstractViewHolder,並實現bindHolder()方法

/**
 * @author :huangxianfeng on 2017/3/14.
 * ViewHolder基類
 * 每一種佈局都封裝成一個ViewHolder,繼承此類實現BindHolder方法
 */
public abstract class TypeAbstractViewHolder extends RecyclerView.ViewHolder{

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

    public abstract void bindHolder(DataModel model);
}

此處以TypeOneViewHolder為例:

/**
 * @author :huangxianfeng on 2017/3/14.
 */
public class TypeOneViewHolder extends TypeAbstractViewHolder {

    public ImageView avatar;
    public TextView name;
    public TypeOneViewHolder(View itemView) {
        super(itemView);
        avatar = (ImageView)itemView.findViewById(R.id.avatar);
        name = (TextView)itemView.findViewById(R.id.name);
    }
    @Override
    public void bindHolder(DataModel model){
        avatar.setBackgroundResource(model.avatarColor);
        name.setText(model.name);
    }
}

6.MainActivity方法中,其實就是初始化各種資料:

public class MainActivity extends AppCompatActivity {
    private RecyclerView mRecyclerView;
    private DemoAdapter mAdapter;
    /**
     * 隨機一下顏色
     */
    int colors[] ={android.R.color.holo_red_dark,
            android.R.color.holo_blue_dark,
            android.R.color.holo_orange_dark};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUI();
    }

    private void initUI() {
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
        mAdapter = new DemoAdapter(this);
        mRecyclerView.setAdapter(mAdapter);
        initData();
    }

    private void initData() {
        ArrayList<DataModel> mArrayList = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            int type = (int) ((Math.random() * 3)+1);
            DataModel data = new DataModel();
            data.avatarColor = colors[type-1];
            data.type = type;
            data.name = "name : "+ i;
            data.content = "content : "+ i;
            data.contentColor = colors[(type+1)%3];
            mArrayList.add(data);
        }
        /**
         * 把資料新增到Adapter中去
         */
        mAdapter.addList(mArrayList);
        mAdapter.notifyDataSetChanged();
    }
}

以上就是所有的程式碼講解,有好的意見和建議歡迎留言。 
原始碼下載: 
http://download.csdn.net/download/huang3513/9780818

學習完基礎知識之後,可以檢視更復雜一點的佈局實現,可以檢視不一樣的RecyclerView優雅實現複雜列表佈局(二)

更多資源原始碼下載: 
不一樣的RecyclerView優雅實現複雜列表佈局 
android自定義視訊播放器 
MediaPlayer和SurfaceView的結合使用 
FloatingActionButton的使用 
多層Fragment與ViewPager結合使用

RecycleView 實現複雜首頁佈局三種方式