公司动态

RecyclerView实现混合布局

📅 2026/8/27 12:49:59
RecyclerView实现混合布局
RecyclerView的混合布局界面的实现。如下图。。。像这些布局可以用listview来实现也可以RecyclerView来实现每个布局文件都是不一样的第一张图上面是一行三个图下面是一行四个图。第二张图一行分左右。作为一个新手来说估计就有点难以招架了不过用recyclerview就比较好实现了只要指定Type来加载不同的布局就可以。下面来简单实现一个简单点的。有一行两个数据有一行一个数据界面。我们可以看到这个RecyclerView中有多种item显示出来那么具体怎么实现呢其实在RecyclerView中我们可以重写方法getItemViewType()这个方法会传进一个参数position表示当前是第几个Item然后我们可以通过position拿到当前的Item对象然后判断这个item对象需要那种视图返回一个int类型的视图标志然后在onCreatViewHolder方法中给引入布局这样就能够实现多种item显示了我们先来看一下一共要实现多少方法他们分别是什么我都加了注释。/** * 加载视图 * */OverridepublicRecyclerView.ViewHolderonCreateViewHolder(ViewGroup parent,int viewType){returnnull;}/** * 加载数据 * */OverridepublicvoidonBindViewHolder(RecyclerView.ViewHolder holder,int position){}/** * 返回数据数量 * */OverridepublicintgetItemCount(){return0;}/** * 返回数据类型 * */OverridepublicintgetItemViewType(int position){returnsuper.getItemViewType(position);}我们一般情况下会在上面这些方法中做一些具体操作所以只要掌握了上面这几个方法就完全OK了。步骤1item的布局文件xml2item的bean类第二个方法写一个3:自定义ViewHolder类继承RecyclerView.ViewHolder4:自定义adapter继承RecyclerView.AdapterRecyclerView.ViewHoldera:getItemViewType返回type值b:onCreateViewHolder加载不同的视图c:onBindViewHolder绑定数据5:主文件中设置recyclerview的布局样式赋值调试1Item xml布局文件和Bean类ViewHolder创建。注bean因demo简洁并没有用到bean类。一共两个布局这里只给出一个类似写出即可。LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentTextViewandroid:layout_widthmatch_parentandroid:layout_height50dpandroid:gravitycenterandroid:backgroundcolor/colorPrimaryandroid:idid/id_one_tv1//LinearLayoutpublicclassTypeViewHolderOneextendsRecyclerView.ViewHolder{publicTextView textView;publicTypeViewHolderOne(View itemView){super(itemView);textViewitemView.findViewById(R.id.id_one_tv1);}}2方法讲解注意一般情况下后天会给移动端返回一串JSON字符串里面有一些数据是需要自己来专门跳出来的方法你可以写多个list来存放不同的数据但是如果是多个的话返回的数据就一串字符串你不仅要挑出来还要存放在多个list里面下次下拉刷新时还要在多个list中累加数据这样就有点麻烦了不挑出来直接就只判断type然后根据type去调用不同的layout然后在绑定数据的方法中再次判断是不是自己想要的ViewHolder最后赋值显示。返回type类型方法//返回类型有单列显示还是双列显示OverridepublicintgetItemViewType(int position){returnmList.get(position).getType();}我们重写了getItemViewType()方法后就要写不同的item布局文件,然后在onCreatViewHolder方法引入布局。这里的类型就简单直接写的1和2。NonNull OverridepublicRecyclerView.ViewHolderonCreateViewHolder(ViewGroup parent,int viewType){//视图显示//创建view视图switch(viewType){case1:returnnewTypeViewHolderOne(layoutInflater.inflate(R.layout.model_view1,parent,false));case2:returnnewTypeViewHolderTwo(layoutInflater.inflate(R.layout.model_view2,parent,false));}returnnull;}我们看到的TypeViewHolderOneView view这个方法是自定义的需要继承RecyclerView.ViewHolderpublicclassTypeViewHolderOneextendsRecyclerView.ViewHolder{publicTextView textView;publicTypeViewHolderOne(View itemView){super(itemView);textViewitemView.findViewById(R.id.id_one_tv1);}}写到这里布局有了viewholder有了数据的判断类型有了就差展示了所以重写onBindViewHolder方法/** * 方法作用绑定数据 * 方法描述根据holder对控件进行赋值同时如果有回调接口在该方法中写。 */OverridepublicvoidonBindViewHolder(RecyclerView.ViewHolder holder,int position){//优化 绑定数据if(holderinstanceofTypeViewHolderOne){//判断是哪个对象TypeViewHolderOne viewHolderOne(TypeViewHolderOne)holder;viewHolderOne.textView.setText(mList.get(position).getName());}elseif(holderinstanceofTypeViewHolderTwo){TypeViewHolderTwo viewHolderTwo(TypeViewHolderTwo)holder;viewHolderTwo.textView1.setText(mList.get(position).getName());viewHolderTwo.textView2.setText(类型mList.get(position).getType());}}所有预备工作已经做完了开始赋值。recyclerViewAdapternewRecyclerViewAdapter2(this,list);recyclerView.setAdapter(recyclerViewAdapter);//本地模拟数据publicvoidaddData(){int a(int)(Math.random()*10);TypeBean typeBean;for(int i0;i10;i){typeBeannewTypeBean();typeBean.setName(样式(i1));typeBean.setType(1);if(ia){typeBean.setType(2);}list.add(typeBean);}recyclerViewAdapter.notifyDataSetChanged();}现在还不能运行因为还没有给recyclerview指定一个布局格式下面是指定了布局格式一共两列获取一开始咱们设置的type如果type2则要让他独自占2列也就是说他自己一行。final GridLayoutManager gridLayoutManagernewGridLayoutManager(this,2);gridLayoutManager.setSpanSizeLookup(newGridLayoutManager.SpanSizeLookup(){OverridepublicintgetSpanSize(int position){int itemViewTyperecyclerView.getAdapter().getItemViewType(position);if(itemViewType2){return2;}return1;}});装饰可写可不写//设置各个item的装饰如间距大小等可写可不写不写可以在xml文件中设置。recyclerView.addItemDecoration(newRecyclerView.ItemDecoration(){OverridepublicvoidgetItemOffsets(Rect outRect,View view,RecyclerView parent,RecyclerView.State state){//super.getItemOffsets(outRect, view, parent, state);//拿到Grid管理器GridLayoutManager.LayoutParams layoutParams(GridLayoutManager.LayoutParams)view.getLayoutParams();//拿到grid管理器所设置的总列数int spanSizelayoutParams.getSpanSize();//拿到当前所在列数int spanIndexlayoutParams.getSpanIndex();//设置顶部间距outRect.top20;if(spanSize!gridLayoutManager.getSpanCount()){if(spanIndex1){outRect.left10;}else{outRect.right10;}}}});recyclerView.setLayoutManager(gridLayoutManager);现在运行试试吧总结1使用RecyclerView必须要写的就是适配器要继承RecyclerView.AdapterRecyclerView.ViewHolder当然这里面你也可以自定义。2加载多个布局文件时item需要加入Type字段去判断是哪一个item。在activity中加载recyclerview时要加入布局样式比如说普通的LinearLayoutManager或者GridLayoutManagerStaggeredGridLayoutManager。不加是不显示的。最后这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶资料》帮助大家将杂乱、零散、碎片化的知识进行体系化的整理让大家系统而高效地掌握Android开发的各个知识点。由于文章内容比较多篇幅有限资料已经被整理成了PDF文档有需要《Android八大模块进阶资料》完整文档的可以加微信 即可免费领取!PS:文末还有使用ChatGPT机器人小福利哦大家不要错过《Android八大模块进阶笔记》相对于我们平时看的碎片化内容这份笔记的知识点更系统化更容易理解和记忆是严格按照知识体系编排的。全套视频资料一、面试合集二、源码解析合集三、开源框架合集同时这里还搭建了一个基于chatGPT的微信群聊机器人24小时为大家解答疑难技术问题。