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哦~

那点击事件可以去源码中看哦~不要积分的~

源码：源码链接