RecyclerView的多布局实现

最新推荐文章于 2024-05-17 05:38:34 发布

木之泪

最新推荐文章于 2024-05-17 05:38:34 发布

阅读量2.5k

点赞数 3

分类专栏： android UI android 文章标签： android RecyclerView android UI RecyclerView多布局

本文链接：https://blog.csdn.net/weixin_40600325/article/details/93879633

版权

android 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

android UI

5 篇文章 0 订阅

订阅专栏

通过学习了RecyclerView的简单使用后，我们不得不讲讲RecyclerView的多布局的实现了，这种用法常见于各种电商类的App。要实现这个效果最主要是复写RecyclerView的适配器里面的getItemViewType()方法，这个方法是根据条件返回Item的类型。不知道你们有没有发现这个方法跟前面那三个方法中的onCreateViewHolder方法的参数viewType的名字有点像？带着这个疑问让我们一起来实现一下RecyclerView的多布局。

首先创建一个名为RecyclerViewMulti的新项目，引入RecyclerView的包，然后在需要使用RecyclerView控件的XML中加入RecyclerView控件，然后在使用该布局的类中初始化RecyclerView。过程跟之前的简单使用差不多，不明白的请移步RecyclerView的简单使用。

接下来我们先创建一个类用来记录Item的返回类型和Item的数据，名为ItemBean，代码如下：

public class ItemBean {
    public String tv_text;
    public int type;
}

然后我们开始初始化数据，创建一个数组长度为8的String类型的数组，这个跟你想要多少个Item有关我就只需要8个就好，这个看你们的需求。甚至你们不需要这个也行的，就直接生成8个数据也是可以的，我是想到时候对不同布局进行更新文字，毕竟我这个是演示。然后在通过 Random函数随机生成0-3的数字不包括3，这边我只设置了3个不一样的布局，这个也是看你们需求。代码如下：

public class MainActivity extends Activity{

    private RecyclerView recyclerView;
    private String[] text = {"11","22","33","44","55","66","77","88"};
    private List<ItemBean> datas = new ArrayList<>();

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

    private void initData() {

        Random random = new Random();
        for (int i=0;i<text.length;i++){
            ItemBean bean =new ItemBean();
            bean.tv_text = text[i];
            //生成一个0~3的随机数不包括3
            bean.type = random.nextInt(3);
            datas.add(bean);
        }
    }

    private void initView() {
        recyclerView = this.findViewById(R.id.rv_test);
    }
}

之后我们开始创建一个继承于RecyclerView.Adapter的RecyclerViewAdapter的适配器类，引入onCreateViewHolder、onBindViewHolder、getItemCount三个方法，再补充我们的RecyclerViewAdapter的构造函数。我们知道Item的布局是在onCreateViewHolder中设置的，由于我们要设置多布局我们首先复写getItemViewType方法。CTRL+O选择getItemViewType方法进行复写，我设置了三个不同的布局，我们先把三个不同类型的布局用三个静态变量来表示。接着通过传入来的数据进行配对代码如下：

public class RecyclerViewAdapter extends RecyclerView.Adapter {

    public static final int TYPE_ONE = 0;
    public static final int TYPE_TWO = 1;
    public static final int TYPE_TREE = 2;

    private Context context;
    private List<ItemBean> datas;

    public RecyclerViewAdapter(Context context, List<ItemBean> datas){
        this.context = context;
        this.datas = datas;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return null;
    }

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

    }

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

    @Override
    public int getItemViewType(int position) {
        ItemBean bean = datas.get(position);
        if (bean.type == TYPE_ONE ){
            return TYPE_ONE;
        }else if (bean.type == TYPE_TWO){
            return TYPE_TWO;
        }else {
            return TYPE_TREE;
        }
    }
}

由于Item的布局是由ViewHolder来搭载的我们就需要自定义三个不同的ViewHolder分别对应三个布局，在onCreateViewHolder方法中根据参数ViewType的类型来判断对应加载相应的布局。看到这里大家就知道了，我们复写的getItemViewType方法得出的结果在onCreateViewHolder方法中以参数ViewType进行回调。接着我们跟着它的数值进行判断该Item使用那个布局。代码如下：

public class RecyclerViewAdapter extends RecyclerView.Adapter {

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

    private Context context;
    private List<ItemBean> datas;

    public RecyclerViewAdapter(Context context, List<ItemBean> datas){
        this.context = context;
        this.datas = datas;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view;
        if (viewType == TYPE_ONE){
            view = View.inflate(context,R.layout.item_one,null);
            return new ItemOneViewHolder(view);
        }else if (viewType == TYPE_TWO){
            view = View.inflate(context,R.layout.item_two,null);
            return new ItemTwoViewHolder(view);
        }else {
            view = View.inflate(context, R.layout.item_three, null);
            return new ItemTreeViewHolder(view);
        }
    }

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

    }

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

    @Override
    public int getItemViewType(int position) {
        ItemBean bean = datas.get(position);
        if (bean.type == TYPE_ONE ){
            return TYPE_ONE;
        }else if (bean.type == TYPE_TWO){
            return TYPE_TWO;
        }else {
            return TYPE_THREE;
        }
    }

    class ItemOneViewHolder extends RecyclerView.ViewHolder{

        public ItemOneViewHolder(@NonNull View itemView) {
            super(itemView);
        }
    }

    class ItemTwoViewHolder extends RecyclerView.ViewHolder{

        public ItemTwoViewHolder(@NonNull View itemView) {
            super(itemView);
        }
    }

    class ItemTreeViewHolder extends RecyclerView.ViewHolder{

        public ItemTreeViewHolder(@NonNull View itemView) {
            super(itemView);
        }
    }
}

同时三个布局的XML代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"

    >
    <LinearLayout
        android:layout_width="match_parent"
        android:padding="7dp"
        android:background="#fff"
        android:orientation="vertical"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            android:text="1111111111111111111111111111111111111111111111111111111"
            android:textSize="16sp"
            />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="@mipmap/ic_launcher"
            android:scaleType="fitXY"
            />
    </LinearLayout>
    <View
        android:layout_marginTop="3dp"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#d3d3d3"
        />
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:background="#fff"
        android:padding="7sp"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="33333333333333333333333333333333333333333333333333333333333333333333333333333333333333"
            android:textColor="#000"
            android:textSize="16sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="0dp"
                android:layout_height="80dp"
                android:layout_weight="1"
                android:scaleType="fitXY"

                android:src="@mipmap/ic_launcher" />
            <View
                android:layout_width="6dp"
                android:layout_height="0dp"/>

            <ImageView
                android:layout_width="0dp"
                android:layout_height="80dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@mipmap/ic_launcher" />
            <View
                android:layout_width="6dp"
                android:layout_height="0dp"/>
            <ImageView
                android:layout_width="0dp"
                android:layout_height="80dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@mipmap/ic_launcher" />


        </LinearLayout>


    </LinearLayout>
    <View
        android:layout_marginTop="3dp"
        android:background="#d3d3d3"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:orientation="vertical"

    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:orientation="horizontal"
        android:padding="7dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222"
            android:textColor="#000"
            android:textSize="16sp" />

        <ImageView
            android:layout_width="120dp"
            android:layout_height="90dp"
            android:background="@mipmap/ic_launcher" />
    </LinearLayout>
    <View
        android:layout_marginTop="3dp"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#d3d3d3"
        />
</LinearLayout>

接下来我们回使用RecyclerView控件布局的类中对RecyclerView进行 Layout的设置和实例化我们刚刚写的RecyclerViewAdapter的类，然后设置该适配器给我们的RecyclerView，运行项目就能看到多布局的效果。代码如下：

 private void initRecyclerView() {

        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        RecyclerViewAdapter adapter = new RecyclerViewAdapter(this,datas);
        recyclerView.setAdapter(adapter);
    }

原创：https://blog.csdn.net/weixin_40600325

木之泪

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
RecyclerView的多布局实现

通过学习了RecyclerView的简单使用后，我们不得不讲讲RecyclerView的多布局的实现了，这种用法常见于各种电商类的App。要实现这个效果最主要是复写RecyclerView的适配器里面的getItemViewType()方法，这个方法是根据条件返回Item的类型。不知道你们有没有发现这个方法跟前面那三个方法中的onCreateViewHolder方法的参数viewTyp...
复制链接

扫一扫