Android RecyclerView 詳解（五） RecyclerView多佈局的使用

Android RecyclerView 詳解（五） RecyclerView多佈局的使用

先上一張效果圖

1.首先引入我們的RecyclerView的包

2.在佈局文件中使用他

    <android.support.v7.widget.RecyclerView
        android:id="@+id/myRecycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

3.設置他的多佈局樣式

item_a.xml佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#65edfc"
    android:layout_margin="5dp">
    <TextView
        android:id="@+id/item_a_text1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="30sp"/>
    <TextView
        android:id="@+id/item_a_text2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="#f5e593"
        android:textSize="30sp"/>
</LinearLayout>

item_b.xml佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#b0ed65"
    android:layout_margin="5dp">
    <ImageView
        android:id="@+id/item_b_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/image"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:id="@+id/item_b_text1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="30sp"/>
        <TextView
            android:id="@+id/item_b_text2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="30sp"/>
    </LinearLayout>

</LinearLayout>

4.設置我們自己的Adapter

（1）創建兩個佈局的ViewHolder

    //item_a的ViewHolder
    public static class ViewHolder_a extends RecyclerView.ViewHolder {
        TextView textView;
        public ViewHolder_a(View itemView) {
            super(itemView);
            textView = ((TextView) itemView.findViewById(R.id.item_a_text));
        }
    }
    //item_b的ViewHolder
    public static class ViewHolder_b extends RecyclerView.ViewHolder {
        TextView textView;
        ImageView imageView;
        public ViewHolder_b(View itemView) {
            super(itemView);
            textView = (TextView) itemView.findViewById(R.id.item_b_text);
            imageView = (ImageView) itemView.findViewById(R.id.item_b_image);
        }
    }

（2）讓我們新建的類繼承Adapter並實現他的方法啊

public class MyRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 0;
    }

在這裏泛型我們是我們子ViewHolder的父類，那麼我們如何辨別到底是屬於那個item的呢？

我們看到onCreateViewHolder的方法中有viewType這個參數，他給我們返回的就是類別，我們用這個區分就好了~

（3）爲了以後的方便使用，我一般的方法是將每個條目的信息封裝到一個類中，可能現在看起來比較麻煩，但是當你的信息比較多的時候會變得比較好處理。

a.新建一個接口，我們的Bean類會實現他的一個返回條目類別的接口

public interface TypeInterf {
    public int getType();
}

b.新建兩個子類來實現我們的接口，這裏我就以一個爲例子了

public class Item_a implements TypeInterf {
    String text1;
    String text2;

    public String getText1() {
        return text1;
    }

    public void setText1(String text1) {
        this.text1 = text1;
    }

    public String getText2() {
        return text2;
    }

    public void setText2(String text2) {
        this.text2 = text2;
    }

    @Override
    public int getType() {
        return R.layout.item_a;
    }
}

可以看到我們的返回類型是他的佈局文件，這樣做會在他返回的時候邏輯比較清楚

c.將這兩個子類的多個對象放入數據源中就好

（4）接收Context和數據源，其中數據源的泛型要是你的接口

 private Context context;
    private List<TypeInterf> list;

    public MyRecyclerAdapter(Context context, List<TypeInterf> list) {
        this.context = context;
        this.list = list;
    }

（5）重寫getItemViewType方法

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

這個方法的值會在onCreateViewHoldere中的到，然後我們根據不同的type來創建不同的ViewHolder

（6）根據不同的type實現不同的ViewHolder

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        RecyclerView.ViewHolder holder = null;
        View view = LayoutInflater.from(context).inflate(viewType, parent, false);
        if(viewType==R.layout.item_a){
            holder = new ViewHolder_a(view);
        }else{
            holder = new ViewHolder_b(view);
        }
        return holder;
    }

（7）綁定數據

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if(holder instanceof ViewHolder_a){
            ((ViewHolder_a) holder).textView1.setText(((Item_a)list.get(position)).getText1());
            ((ViewHolder_a) holder).textView2.setText(((Item_a)list.get(position)).getText2());
        }else{
            ((ViewHolder_b) holder).textView1.setText(((Item_b)list.get(position)).getText1());
            ((ViewHolder_b) holder).textView2.setText(((Item_b)list.get(position)).getText2());
        }
    }

5.設置我們的數據源

    private void initData() {
        list = new ArrayList<>();
        Item_a item_a = null;
        Item_b item_b = null;
        for (int i = 0; i < 100; i++) {
            if (i%3==0) {
                item_a = new Item_a();
                item_a.setText1("ItemA的第"+i+"個text1");
                item_a.setText2("ItemA的第"+i+"個text2");
                list.add(item_a);
            }else{
                item_b = new Item_b();
                item_b.setText1("ItemB的第"+i+"個text1");
                item_b.setText2("ItemB的第"+i+"個text2");
                list.add(item_b);
            }
        }
    }

至此我們所有的操作都完成的差不多了，別忘了設置他的LayoutManager哦~

那點擊事件可以去源碼中看哦~不要積分的~

源碼：源碼鏈接