devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

RecyclerView的多布局实现_recyclerview多布局实现

作者：笔触狂放9 | 2024-03-01 15:22:02

赞

踩

recyclerview多布局实现

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

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

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

  1. public class ItemBean {
  2.     public String tv_text;
  3.     public int type;
  4. }

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

  1. public class MainActivity extends Activity{
  2.  
  3.     private RecyclerView recyclerView;
  4.     private String[] text = {"11","22","33","44","55","66","77","88"};
  5.     private List<ItemBean> datas = new ArrayList<>();
  6.  
  7.     @Override
  8.     protected void onCreate(Bundle savedInstanceState) {
  9.         super.onCreate(savedInstanceState);
  10.         setContentView(R.layout.activity_main);
  11.         initView();
  12.         initData();
  13.     }
  14.  
  15.     private void initData() {
  16.  
  17.         Random random = new Random();
  18.         for (int i=0;i<text.length;i++){
  19.             ItemBean bean =new ItemBean();
  20.             bean.tv_text = text[i];
  21.             //生成一个0~3的随机数不包括3
  22.             bean.type = random.nextInt(3);
  23.             datas.add(bean);
  24.         }
  25.     }
  26.  
  27.     private void initView() {
  28.         recyclerView = this.findViewById(R.id.rv_test);
  29.     }
  30. }

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

  1. public class RecyclerViewAdapter extends RecyclerView.Adapter {
  2.  
  3.     public static final int TYPE_ONE = 0;
  4.     public static final int TYPE_TWO = 1;
  5.     public static final int TYPE_TREE = 2;
  6.  
  7.     private Context context;
  8.     private List<ItemBean> datas;
  9.  
  10.     public RecyclerViewAdapter(Context context, List<ItemBean> datas){
  11.         this.context = context;
  12.         this.datas = datas;
  13.     }
  14.  
  15.     @NonNull
  16.     @Override
  17.     public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
  18.         return null;
  19.     }
  20.  
  21.     @Override
  22.     public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
  23.  
  24.     }
  25.  
  26.     @Override
  27.     public int getItemCount() {
  28.         return 0;
  29.     }
  30.  
  31.     @Override
  32.     public int getItemViewType(int position) {
  33.         ItemBean bean = datas.get(position);
  34.         if (bean.type == TYPE_ONE ){
  35.             return TYPE_ONE;
  36.         }else if (bean.type == TYPE_TWO){
  37.             return TYPE_TWO;
  38.         }else {
  39.             return TYPE_TREE;
  40.         }
  41.     }
  42. }

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

  1. public class RecyclerViewAdapter extends RecyclerView.Adapter {
  2.  
  3.     public static final int TYPE_ONE = 0;
  4.     public static final int TYPE_TWO = 1;
  5.     public static final int TYPE_THREE = 2;
  6.  
  7.     private Context context;
  8.     private List<ItemBean> datas;
  9.  
  10.     public RecyclerViewAdapter(Context context, List<ItemBean> datas){
  11.         this.context = context;
  12.         this.datas = datas;
  13.     }
  14.  
  15.     @NonNull
  16.     @Override
  17.     public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
  18.         View view;
  19.         if (viewType == TYPE_ONE){
  20.             view = View.inflate(context,R.layout.item_one,null);
  21.             return new ItemOneViewHolder(view);
  22.         }else if (viewType == TYPE_TWO){
  23.             view = View.inflate(context,R.layout.item_two,null);
  24.             return new ItemTwoViewHolder(view);
  25.         }else {
  26.             view = View.inflate(context, R.layout.item_three, null);
  27.             return new ItemTreeViewHolder(view);
  28.         }
  29.     }
  30.  
  31.     @Override
  32.     public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
  33.  
  34.     }
  35.  
  36.     @Override
  37.     public int getItemCount() {
  38.         return datas.size();
  39.     }
  40.  
  41.     @Override
  42.     public int getItemViewType(int position) {
  43.         ItemBean bean = datas.get(position);
  44.         if (bean.type == TYPE_ONE ){
  45.             return TYPE_ONE;
  46.         }else if (bean.type == TYPE_TWO){
  47.             return TYPE_TWO;
  48.         }else {
  49.             return TYPE_THREE;
  50.         }
  51.     }
  52.  
  53.     class ItemOneViewHolder extends RecyclerView.ViewHolder{
  54.  
  55.         public ItemOneViewHolder(@NonNull View itemView) {
  56.             super(itemView);
  57.         }
  58.     }
  59.  
  60.     class ItemTwoViewHolder extends RecyclerView.ViewHolder{
  61.  
  62.         public ItemTwoViewHolder(@NonNull View itemView) {
  63.             super(itemView);
  64.         }
  65.     }
  66.  
  67.     class ItemTreeViewHolder extends RecyclerView.ViewHolder{
  68.  
  69.         public ItemTreeViewHolder(@NonNull View itemView) {
  70.             super(itemView);
  71.         }
  72.     }
  73. }

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

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="wrap_content"
  4.     android:orientation="vertical"
  5.  
  6.     >
  7.     <LinearLayout
  8.         android:layout_width="match_parent"
  9.         android:padding="7dp"
  10.         android:background="#fff"
  11.         android:orientation="vertical"
  12.         android:layout_height="wrap_content">
  13.         <TextView
  14.             android:layout_width="wrap_content"
  15.             android:layout_height="wrap_content"
  16.             android:textColor="#000"
  17.             android:text="1111111111111111111111111111111111111111111111111111111"
  18.             android:textSize="16sp"
  19.             />
  20.         <ImageView
  21.             android:layout_width="match_parent"
  22.             android:layout_height="150dp"
  23.             android:background="@mipmap/ic_launcher"
  24.             android:scaleType="fitXY"
  25.             />
  26.     </LinearLayout>
  27.     <View
  28.         android:layout_marginTop="3dp"
  29.         android:layout_width="match_parent"
  30.         android:layout_height="1dp"
  31.         android:background="#d3d3d3"
  32.         />
  33. </LinearLayout>
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="wrap_content"
  4.     android:orientation="vertical"
  5.     >
  6.  
  7.     <LinearLayout
  8.         android:orientation="vertical"
  9.         android:layout_width="match_parent"
  10.         android:background="#fff"
  11.         android:padding="7sp"
  12.         android:layout_height="wrap_content">
  13.         <TextView
  14.             android:layout_width="match_parent"
  15.             android:layout_height="wrap_content"
  16.             android:text="33333333333333333333333333333333333333333333333333333333333333333333333333333333333333"
  17.             android:textColor="#000"
  18.             android:textSize="16sp" />
  19.  
  20.         <LinearLayout
  21.             android:layout_width="match_parent"
  22.             android:layout_height="wrap_content"
  23.             android:orientation="horizontal">
  24.  
  25.             <ImageView
  26.                 android:layout_width="0dp"
  27.                 android:layout_height="80dp"
  28.                 android:layout_weight="1"
  29.                 android:scaleType="fitXY"
  30.  
  31.                 android:src="@mipmap/ic_launcher" />
  32.             <View
  33.                 android:layout_width="6dp"
  34.                 android:layout_height="0dp"/>
  35.  
  36.             <ImageView
  37.                 android:layout_width="0dp"
  38.                 android:layout_height="80dp"
  39.                 android:layout_weight="1"
  40.                 android:scaleType="fitXY"
  41.                 android:src="@mipmap/ic_launcher" />
  42.             <View
  43.                 android:layout_width="6dp"
  44.                 android:layout_height="0dp"/>
  45.             <ImageView
  46.                 android:layout_width="0dp"
  47.                 android:layout_height="80dp"
  48.                 android:layout_weight="1"
  49.                 android:scaleType="fitXY"
  50.                 android:src="@mipmap/ic_launcher" />
  51.  
  52.  
  53.         </LinearLayout>
  54.  
  55.  
  56.     </LinearLayout>
  57.     <View
  58.         android:layout_marginTop="3dp"
  59.         android:background="#d3d3d3"
  60.         android:layout_width="match_parent"
  61.         android:layout_height="1dp"/>
  62. </LinearLayout>
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="100dp"
  4.     android:orientation="vertical"
  5.  
  6.     >
  7.  
  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:background="#fff"
  12.         android:orientation="horizontal"
  13.         android:padding="7dp">
  14.  
  15.         <TextView
  16.             android:layout_width="0dp"
  17.             android:layout_height="wrap_content"
  18.             android:layout_weight="1"
  19.             android:text="2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222"
  20.             android:textColor="#000"
  21.             android:textSize="16sp" />
  22.  
  23.         <ImageView
  24.             android:layout_width="120dp"
  25.             android:layout_height="90dp"
  26.             android:background="@mipmap/ic_launcher" />
  27.     </LinearLayout>
  28.     <View
  29.         android:layout_marginTop="3dp"
  30.         android:layout_width="match_parent"
  31.         android:layout_height="1dp"
  32.         android:background="#d3d3d3"
  33.         />
  34. </LinearLayout>

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

  1.  private void initRecyclerView() {
  2.  
  3.         recyclerView.setLayoutManager(new LinearLayoutManager(this));
  4.         RecyclerViewAdapter adapter = new RecyclerViewAdapter(this,datas);
  5.         recyclerView.setAdapter(adapter);
  6.     }

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/174940
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号