devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【详细】实现多布局的recyclerview_recyclerview.getitemviewtype 例子

作者：从前慢现在也慢 | 2024-03-01 15:14:12

赞

踩

recyclerview.getitemviewtype 例子

前言

在项目中基本上都会用到的 多种item(条目)的加载 比如大家常见的app( <网易新闻>app的新闻的列表,<新闻头条>app的新闻列表) 都是采用了加载多种item的布局。例如下图：

 

        但是我们要如何实现这种功能呢？很多人说用recycleview嵌套recycleview，但是事实上，种方法并不理想，理由是一方面recycleview嵌套会产生冲突；另一方面作为前端有时候后端的接口传值并不能满足我们两个recycleview嵌套。因此我们需要采用recycleview的多布局实现这类功能。

           看了很多例子，说其实最关键的是要复写RecyclerView的Adapter中的getItemViewType()方法 这个方法就根据条件返回条目的类型，然后onCreateViewHolder里根据viewtype来判断 所引用的item布局类型 这样每一条item就会不一样了，但是种方法不好维护。我就用了另一种方法，使用自定义View实现。

 

第一层：显示页面

1. Bean存储类型(AdapterBean)

  1. public class AdapterBean implements MultiItemEntity {
  2.  
  3. //第一个布局
  4. public static final int LEARNRECORD_ONE = 1;
  5. //第二个布局
  6. public static final int LEARNRECORD_TWO = 2;
  7. //第三个布局
  8. public static final int LEARNRECORD_Three = 3;
  9. //第四个布局
  10. public static final int LEARNRECORD_FLOUR = 4;
  11.  
  12. public int itemType;
  13.  
  14. public LearnRecordAdapterBean(int type) {
  15.  
  16.   itemType = type;
  17.  
  18. }
  19.  
  20. @Override
  21.  
  22. public int getItemType() {
  23.  
  24.     return itemType;
  25.     }
  26. }

2. 显示页面布局 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="#FFFFFFF"
  7.     android:orientation="vertical">
  8.  
  9.     <RelativeLayout
  10.         android:layout_width="wrap_content"
  11.         android:layout_height="wrap_content">
  12.  
  13.         <com.scwang.smartrefresh.layout.SmartRefreshLayout
  14.             android:id="@+id/refresh_layout"
  15.             android:layout_width="match_parent"
  16.             android:layout_height="match_parent"
  17.             app:srlEnableLoadMore="false">
  18.  
  19.             <android.support.v7.widget.RecyclerView
  20.                 android:id="@+id/rl_learnrecord"
  21.                 android:layout_width="match_parent"
  22.                 android:layout_height="wrap_content" />
  23.         </com.scwang.smartrefresh.layout.SmartRefreshLayout>
  24.  
  25.     </RelativeLayout>
  26.  
  27. </LinearLayout>

3. recyclerview的adapter

  1. public class LearnRecordAdapter extends BaseMultiItemQuickAdapter<LearnRecordAdapterBean, BaseViewHolder> {
  2.  
  3.     private LearnOneView OneView;
  4.     private LearnTwoView TwoView;
  5.     private LearnThreeView ThreeView;
  6.     private LearnFourView FourView;
  7.  
  8.     public LearnRecordAdapter(List<AdapterBean> data) {
  9.         super(data);
  10.             addItemType(AdapterBean.LEARNRECORD_ONE, R.layout.openhome_learnrecord_item_head);  
  11.             addItemType(AdapterBean.LEARNRECORD_TWO, R.layout.openhome_learnrecord_item_learnweek); 
  12.             addItemType(AdapterBean.LEARNRECORD_THREE,
  13.             R.layout.openhome_learnrecord_item_errorstop); 
  14.             addItemType(AdapterBean.LEARNRECORD_FOUR,
  15.             R.layout.openhome_learnrecord_item_errorstop)
  16.  
  17.     }
  18.  
  19.     @Override
  20.     protected void convert(BaseViewHolder helper, AdapterBean item) {
  21.         switch (helper.getItemViewType()){
  22.             case AdapterBean.LEARNRECORD_ONE:
  23.                 OneView = helper.getView(R.id.headview);
  24.                 OneView.setData();
  25.                 break;
  26.             case AdapterBean.LEARNRECORD_TWO:
  27.                 TwoView = helper.getView(R.id.learnweekview);
  28.                 TwoView.setData();
  29.                 break;
  30.             case AdapterBean.LEARNRECORD_THREE:
  31.                 ThreeView = helper.getView(R.id.errorstopview) ;
  32.                 ThreeView.setData();
  33.                 break;
  34.             case AdapterBean.LEARNRECORD_FOUR:
  35.                 FourView = helper.getView(R.id.errorstopview) ;
  36.                 FourView.setData();
  37.                 break；
  38.             default:
  39.                 break;
  40.         }
  41.     }
  42. }

 4. 显示页面activity

  1. public class LearnRecordActivity extends BaseActivity {
  2.  
  3.     public LearnRecordAdapter learnRecordAdapter;
  4.     private RecyclerView recyclerView;
  5.     private List<AdapterBean> learnRecorddata = new ArrayList<>();
  6.  
  7.     @Override
  8.     protected void onCreate(Bundle savedInstanceState) {
  9.         super.onCreate(savedInstanceState);
  10.         setContentView(R.layout.mainactivity);    
  11.         initData();
  12.         initAdapter();
  13.       
  14.     }
  15.  
  16.     /**
  17.      * 初始化数据
  18.      */
  19.     private void initData(){
  20.         if (learnRecorddata!=null&&learnRecorddata.size()>0){
  21.             learnRecorddata.clear();
  22.         }
  23.         // 绑定数据
  24. learnRecorddata.add(new AdapterBean(AdapterBean.LEARNRECORD_ONE));
  25. learnRecorddata.add(new AdapterBean(AdapterBean.LEARNRECORD_TWO));
  26. learnRecorddata.add(new AdapterBean(AdapterBean.LEARNRECORD_THREE));
  27. learnRecorddata.add(new AdapterBean(AdapterBean.LEARNRECORD_FOUR));
  28.  
  29.         if (learnRecordAdapter != null) {
  30.             learnRecordAdapter.notifyDataSetChanged();
  31.         }
  32.     }
  33.  
  34.     /**
  35.      * 初始化适配器
  36.      */
  37.     private void initAdapter() {
  38.        
  39.         // recyclerview绑定adapter
  40.         LinearLayoutManager manager = new LinearLayoutManager(this);
  41.         manager.setOrientation(LinearLayoutManager.VERTICAL);
  42.         recyclerView.setLayoutManager(manager);
  43.         learnRecordAdapter = new LearnRecordAdapter(learnRecorddata);
  44.         recyclerView.setAdapter(learnRecordAdapter);
  45.     }
  46.  
  47. }

 

第二层：各个item的布局（自定义view）

由于四个item的应用大同小意，那么这里就仅仅介绍第一个item的实现。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content">
  5.  
  6.     <com.xes.cloudlearning.openhome.view.LearnRecordHeadView
  7.         android:id="@+id/headview"
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content" />
  10.  
  11. </LinearLayout>

 在这里可以看到，这里是一个自定义view，点击LearnRecordHeadView可以进去看到这个自定义view的布局。

  1. public class LearnRecordHeadView extends RelativeLayout {
  2.  
  3.    
  4.     @BindView(R2.id.tv_practice)
  5.     TextView tvPractice;
  6.     
  7.     @BindView(R2.id.tv_areadykeep)
  8.     TextView tvAreadykeep;
  9.     
  10.     @BindView(R2.id.tv_countnum)
  11.     TextView tvCountnum;
  12.     
  13.     @BindView(R2.id.tv_count)
  14.     TextView tvCount;
  15.     
  16.     @BindView(R2.id.tv_test)
  17.     TextView tvTest;
  18.     
  19.     @BindView(R2.id.tv_practicenum)
  20.     TextView tvPracticenum;
  21.     
  22.     @BindView(R2.id.tv_pk)
  23.     TextView tvPk;
  24.     
  25.     @BindView(R2.id.tv_pknum)
  26.     TextView tvPknum;
  27.  
  28.     private Context mContext;
  29.  
  30.     public LearnRecordHeadView(Context context) {
  31.         super(context);
  32.         mContext = context;
  33.         initView();
  34.     }
  35.  
  36.  
  37.     public LearnRecordHeadView(Context context, @Nullable AttributeSet attrs) {
  38.         super(context, attrs);
  39.         mContext = context;
  40.         initView();
  41.     }
  42.  
  43.     public LearnRecordHeadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  44.         super(context, attrs, defStyleAttr);
  45.         mContext = context;
  46.         initView();
  47.     }
  48.  
  49.     private void initView() {
  50.         View.inflate(mContext, R.layout.openhome_title_item_layout, this);
  51.         ButterKnife.bind(this);
  52.     }
  53.  
  54.     @SuppressLint("SetTextI18n")
  55.     public void setData() {
  56.         tvPractice.setText("80");
  57.         tvAreadykeep.setText("XXX");
  58.         tvCountnum.setText("800");
  59.         tvCount.setText("XXX");
  60.         tvTest.setText("XXXX");
  61.         tvPracticenum.setText("XX");
  62.         tvPk.setText("XX");
  63.         tvPknum.setText("XXX");
  64.  
  65.     }
  66. }

      在这里看到这里还有一个布局，也就是这个自定义view的布局openhome_title_item_layout。点击进去看。我们在这个view中处理这里的数据和逻辑。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="wrap_content“>
  8.     <LinearLayout
  9.         android:id="@+id/ll_headView"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content">
  13.         <RelativeLayout
  14.             android:layout_width="0dp"
  15.             android:layout_height="wrap_content"
  16.             android:layout_weight="1">
  18.             <LinearLayout
  19.                 android:layout_width="match_parent"
  20.                 android:layout_height="wrap_content">
  22.                 <TextView
  23.                     android:layout_width="match_parent"
  24.                     android:layout_height="wrap_content"
  25.                     android:gravity="center" />
  27.             </LinearLayout>
  29.             <LinearLayout
  30.                 android:layout_width="match_parent"
  31.                 android:layout_height="wrap_content
  32.                 android:layout_marginTop="8dp">
  33.  
  34.                 <TextView
  35.                     android:layout_width="match_parent"
  36.                     android:layout_height="wrap_content"
  37.                     android:gravity="center"/>
  38.             </LinearLayout>
  39.  
  40.         </RelativeLayout>
  41.  
  42.         <View
  43.             android:id="@+id/tv_right_line"
  44.             android:layout_width="1dp"
  45.             android:layout_height="33dp"
  46.             android:layout_alignParentRight="true"
  47.             android:layout_marginTop="40dp"
  48.             android:background="#E6E6E6"
  49.             app:layout_constraintBottom_toBottomOf="parent"
  50.             app:layout_constraintRight_toRightOf="parent"
  51.             app:layout_constraintTop_toTopOf="parent"
  52.             app:layout_constraintVertical_bias="0.5" />
  53.  
  54.         <RelativeLayout
  55.             android:layout_width="0dp"
  56.             android:layout_height="wrap_content"
  57.             android:layout_weight="1">
  58.  
  59.             <LinearLayout
  60.                 android:layout_width="match_parent"
  61.                 android:layout_height="wrap_content">
  62.  
  63.                 <TextView
  64.                     android:layout_width="match_parent"
  65.                     android:layout_height="wrap_content"
  66.                     android:gravity="center"
  67.                     android:singleLine="true"/>
  68.             </LinearLayout>
  69.  
  70.         </RelativeLayout>
  71.  
  72.     </LinearLayout>
  73.  
  74.  </RelativeLayout>

         这就是完整的流程，以后一个非常复杂的页面，完全可以用一个recycleview实现。

 

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

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

  

闽ICP备14008679号