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

RecyclerView 多布局使用_android recyclerview实现多布局效果

作者：weixin_40725706 | 2024-03-01 15:17:48

赞

踩

android recyclerview实现多布局效果

RecyclerView 使用了很久了，一直是简单的和ListView 一样的效果。其实RecyclerView 的强大之处在于实现一线复杂的布局，这是ListView 不能做到的。对于基本的RecyclerView 使用我们都很熟悉了，今天写一个多布局的实现。先看需求图：


需求如上：对于“历史选择”这个条目以上的部分我们可以写一个LinearLayout 就处理了。“历史选择”一下的部分我们用RecyclerView 去实现。（以前的思路我们可能是ScrollView 加listView 嵌套来实现这个需求）

我们看上图画了一些框，“历史选择”为一行，位置的信息如：嘉峪关则一行有四个格子，下面的灰色分割线也是占满了一行，还有“选择省份”也是一行，下面的省份的名称如“甘肃”，也是一行。大概我们就可以看明白了有五种不同的布局要处理，历史选择，地点名称的小格子，灰色分割线，选择省份一行，省份名称一行，他们占的padding是不同的，我们只能用多个布局来处理。这样我们就可以开始写布局了。

历史选择：就一个TextView

  1.  <TextView
  2.         android:id="@+id/tv_selectHistoryTitle"
  3.         tools:text="历史选择:"
  4.         android:textColor="@color/black"
  5.         android:padding="@dimen/padding_10dp"
  6.         android:paddingLeft="@dimen/padding_15dp"
  7.         android:layout_width="match_parent"
  8.         android:layout_height="wrap_content" />
显示地名的小格子布局： 

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:gravity="center"
  5.     android:id="@+id/ll_content"
  6.     android:background="@color/white"
  7.     android:layout_height="wrap_content"
  8.     android:layout_marginLeft="@dimen/margin_4dp"
  9.     android:layout_marginRight="@dimen/margin_4dp"
  10.     android:layout_marginTop="@dimen/margin_5dp"
  11.     android:layout_marginBottom="@dimen/margin_5dp">
  12.  
  13.     <TextView
  14.         android:id="@+id/tv_selectPlaceContent"
  15.         android:layout_width="match_parent"
  16.         android:layout_height="wrap_content"
  17.         android:gravity="center"
  18.         android:background="@drawable/bg_bit_gray_hollow_rounded_rectangle"
  19.         android:ellipsize="end"
  20.         android:lines="1"
  21.         android:paddingLeft="@dimen/padding_6dp"
  22.         android:paddingRight="@dimen/padding_6dp"
  23.         android:paddingTop="@dimen/padding_6dp"
  24.         android:paddingBottom="@dimen/padding_6dp"
  25.         android:textColor="@color/black"
  26.         tools:text="历史选择的的" />
  27.  
  28. </LinearLayout>
其中给TextView 添加一个drawable ，也就是一个shape就可以成为途中的椭圆的样子了。

下面是选择省份这个标题，也是一个TextView

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5.     android:background="@color/lightgray"
  6.     android:orientation="vertical">
  7.  
  8.     <TextView
  9.         android:id="@+id/tv_selectProvinceTitle"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content"
  12.         android:background="@color/white"
  13.         android:paddingLeft="@dimen/padding_10dp"
  14.         android:paddingRight="@dimen/padding_10dp"
  15.         android:paddingTop="@dimen/padding_10dp"
  16.         android:textColor="@color/black"
  17.         tools:text="选择省粉:" />
  18.  
  19. </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:background="@color/white"
  5.     android:paddingBottom="@dimen/padding_5dp"
  6.     android:paddingTop="@dimen/padding_5dp"
  7.     xmlns:tools="http://schemas.android.com/tools">
  8.  
  9.     <TextView
  10.         android:id="@+id/tv_selectProvinceName"
  11.         tools:text="甘肃"
  12.         android:textColor="@color/black"
  13.         android:layout_marginLeft="@dimen/margin_10dp"
  14.         android:layout_width="wrap_content"
  15.         android:layout_height="wrap_content" />
  16. </LinearLayout>
这样就完成了上面分析的布局的编写。

然后写RecyclerView 和Adapter适配器。对于多布局的实现，主要是要对数据进行分类，我们根据不同的类别在Adapter中返回不同的ViewHoler就可以了。和其他的Adapter相比，我们需要多写一个方法

public int getItemViewType(int position)
进行一个分类。
其实前面我们可以看出来这个对于RecyclerView 来说我们要使用一个GridLayoutManager 布局管理器，让他显示为四列的样子，对于那些标题部分显示的是一列，我们可以重写一个方法，让在这个类型的布局的时候显示一列就有可以了。所以说这个多布局中主要还有一个方法： 

gridLayoutManager.setSpanSizeLookup（）
这个就是用来设置显示几列的方法。

下面看代码：

  1.  private Context context;
  2.  
  3.     private List<PlaceItem> list;
  4.  
  5.     private final int SPAN_SIZE_HISTORY_CHOICE = 1001;//，历史选择
  6.  
  7.     private final int SPAN_SIZE_CHOICE_PROVINCE = 1002;//标题，选择省
  8.  
  9.     private final int SPAN_SIZE_PROVINCE_NAME = 1003;//选择的省名称
  10.  
  11.     private final int SPAN_SIZE_CONTENT = 1004;//位置数据
  12.  
  13.     private final int SPAN_SIZE_GRAY_SEPARATE = 1005;//灰色分割条
  14.  
  15.     private OnPlaceItemClickListener onPlaceItemClickListener;
  16.  
  17.     public void setOnPlaceItemClickListener(OnPlaceItemClickListener onPlaceItemClickListener) {
  18.         this.onPlaceItemClickListener = onPlaceItemClickListener;
  19.     }
  20.  
  21.     public SelectPlaceAdapter(Context context, List<PlaceItem> list) {
  22.         this.context = context;
  23.         this.list = list;
  24.     }
  25.  
  26.     @Override
  27.     public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  28.         if(viewType == SPAN_SIZE_GRAY_SEPARATE){
  29.             View separateView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_gray_bg, parent, false);
  30.             SelectPlaceGraybgViewHolder viewHolder = new SelectPlaceGraybgViewHolder(separateView);
  31.             return viewHolder;
  32.         }else if (viewType == SPAN_SIZE_HISTORY_CHOICE) {
  33.             View historyView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_history_select_title, parent, false);
  34.             SelectHistoryTitleViewHolder viewHolder = new SelectHistoryTitleViewHolder(historyView);
  35.             return viewHolder;
  36.         } else if (viewType == SPAN_SIZE_CHOICE_PROVINCE) {
  37.             View provinceTitleView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_select_province_title, parent, false);
  38.             SelectProvinceTitleViewHolder viewHolder = new SelectProvinceTitleViewHolder(provinceTitleView);
  39.             return viewHolder;
  40.         } else if (viewType == SPAN_SIZE_PROVINCE_NAME) {
  41.             View provinceNameView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_subtitle, parent, false);
  42.             SelectProvinceNameViewHolder viewHolder = new SelectProvinceNameViewHolder(provinceNameView);
  43.             return viewHolder;
  44.         } else if (viewType == SPAN_SIZE_CONTENT) {
  45.             View contentView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_content, parent, false);
  46.             SelectPlaceContentViewHoder viewHolder = new SelectPlaceContentViewHoder(contentView);
  47.             return viewHolder;
  48.         }
  49.         return null;
  50.     }
  51.  
  52.     @Override
  53.     public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
  54.         int type = getItemViewType(position);
  55.         Log.e("TAG", "bindViewHolder type-" + type);
  56.         switch (type) {
  57.             case SPAN_SIZE_GRAY_SEPARATE:{
  58.                 SelectPlaceGraybgViewHolder selectPlaceGraybgViewHolder = (SelectPlaceGraybgViewHolder) holder;
  59.                 GridLayoutManager.LayoutParams layoutParams = (GridLayoutManager.LayoutParams) selectPlaceGraybgViewHolder.llSelectPlaceGraybg.getLayoutParams();
  60.                 DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
  61.                 layoutParams.width = displayMetrics.widthPixels;
  62.                 layoutParams.setMarginStart(DensityUtil.dp2px(context,-10));//设置左边移动，从（0,0）开始
  63.                 selectPlaceGraybgViewHolder.llSelectPlaceGraybg.setLayoutParams(layoutParams);
  64.                 selectPlaceGraybgViewHolder.llSelectPlaceGraybg.requestLayout();
  65.                 break;
  66.             }
  67.             case SPAN_SIZE_HISTORY_CHOICE: {
  68.                 SelectHistoryTitleViewHolder historyTitleViewHolder = (SelectHistoryTitleViewHolder) holder;
  69.                 historyTitleViewHolder.tvSelectHistoryTitle.setText("历史选择title");
  70.                 break;
  71.             }
  72.             case SPAN_SIZE_CHOICE_PROVINCE: {
  73.                 SelectProvinceTitleViewHolder provinceTitleViewHolder = (SelectProvinceTitleViewHolder) holder;
  74.                 provinceTitleViewHolder.tvSlectProvinceTitdle.setText("选择省份：");
  75.                 break;
  76.             }
  77.             case SPAN_SIZE_PROVINCE_NAME: {
  78.                 SelectProvinceNameViewHolder provinceNameViewHolder = (SelectProvinceNameViewHolder) holder;
  79.                 provinceNameViewHolder.tvSelectProvinceName.setText("甘肃省");
  80.                 break;
  81.             }
  82.             case SPAN_SIZE_CONTENT: {
  83.                 SelectPlaceContentViewHoder contentViewHoder = (SelectPlaceContentViewHoder) holder;
  84.                 contentViewHoder.itemView.setOnClickListener(v -> {
  85.                     if(onPlaceItemClickListener!=null){
  86.                         onPlaceItemClickListener.onItemClick(contentViewHoder.itemView,position);
  87.                     }
  88.                 });
  89.                 contentViewHoder.tvSelectPlaceContent.setText(list.get(position).getItemContent());
  90.                 break;
  91.             }
  92.         }
  93.     }
  94.  
  95.     @Override
  96.     public int getItemCount() {
  97.         return list.size();
  98.     }
  99.  
  100.     @Override
  101.     public int getItemViewType(int position) {
  102.         if (list.get(position).getItemType() == 1) {
  103.             return SPAN_SIZE_HISTORY_CHOICE;//1001
  104.         } else if (list.get(position).getItemType() == 2) {
  105.             return SPAN_SIZE_CHOICE_PROVINCE;//1002
  106.         } else if (list.get(position).getItemType() == 3) {
  107.             return SPAN_SIZE_PROVINCE_NAME;//1003
  108.         } else if (list.get(position).getItemType() == 4) {
  109.             return SPAN_SIZE_CONTENT;//1004
  110.         } else if(list.get(position).getItemType() == 5){
  111.             return SPAN_SIZE_GRAY_SEPARATE;
  112.         }else{
  113.             return SPAN_SIZE_CONTENT;//默认是内容返回
  114.         }
  115.     }
  116.  
  117.     /**
  118.      * 位置点击
  119.      */
  120.     public interface OnPlaceItemClickListener{
  121.         void onItemClick(View view,int postion);
  122.     }
  123.  
  124.     /**
  125.      * 历史选择 标题
  126.      */
  127.     public class SelectHistoryTitleViewHolder extends RecyclerView.ViewHolder {
  128.  
  129.         @BindView(R.id.tv_selectHistoryTitle)
  130.         TextView tvSelectHistoryTitle;
  131.  
  132.         public SelectHistoryTitleViewHolder(View itemView) {
  133.             super(itemView);
  134.             ButterKnife.bind(this, itemView);
  135.         }
  136.     }
  137.  
  138.     /**
  139.      * 选择省粉 标题
  140.      */
  141.     public class SelectProvinceTitleViewHolder extends RecyclerView.ViewHolder {
  142.  
  143.         @BindView(R.id.tv_selectProvinceTitle)
  144.         TextView tvSlectProvinceTitdle;
  145.         public SelectProvinceTitleViewHolder(View itemView) {
  146.             super(itemView);
  147.             ButterKnife.bind(this, itemView);
  148.         }
  149.     }
  150.  
  151.     /**
  152.      * 省份名称显示
  153.      */
  154.     public class SelectProvinceNameViewHolder extends RecyclerView.ViewHolder {
  155.  
  156.         @BindView(R.id.tv_selectProvinceName)
  157.         TextView tvSelectProvinceName;
  158.  
  159.         public SelectProvinceNameViewHolder(View itemView) {
  160.             super(itemView);
  161.             ButterKnife.bind(this, itemView);
  162.         }
  163.     }
  164.  
  165.     /**
  166.      * 地点显示
  167.      */
  168.     public class SelectPlaceContentViewHoder extends RecyclerView.ViewHolder {
  169.  
  170.         @BindView(R.id.tv_selectPlaceContent)
  171.         TextView tvSelectPlaceContent;
  172.  
  173.         @BindView(R.id.ll_content)
  174.         LinearLayout llContent;
  175.         public SelectPlaceContentViewHoder(View itemView) {
  176.             super(itemView);
  177.             ButterKnife.bind(this, itemView);
  178.         }
  179.     }
  180.  
  181.     /**
  182.      * 灰色条
  183.      */
  184.      public class SelectPlaceGraybgViewHolder extends RecyclerView.ViewHolder{
  185.  
  186.          @BindView(R.id.ll_selectPlaceGraybg)
  187.          LinearLayout llSelectPlaceGraybg;
  188.  
  189.          public SelectPlaceGraybgViewHolder(View itemView) {
  190.              super(itemView);
  191.              ButterKnife.bind(this,itemView);
  192.          }
  193.      }

每一个布局我们都写一个ViewHolder 总共有5个ViewHolder。上面我们重写了getItemViewType ()这个方法，主要是根据数据的类型返回不同的类型。然后在onCreateViewHolder 中根据类型判断穿件不同的ViewHolder.最后在onBindViewHolder()中绑定数据就可以了。接着来看看显示一行时候调用的方法： 

  1.  gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
  2.             @Override
  3.             public int getSpanSize(int position) {
  4.                 int type = recycleSelectPlace.getAdapter().getItemViewType(position);
  5.                switch (type){
  6.                    case 1004:{
  7.                        return 1;//占1格
  8.                    }
  9.                    case 1001:{
  10.                        return 4;
  11.                    }
  12.                    case 1002:{
  13.                        return 4;
  14.                    }
  15.                    case 1003:{
  16.                        return 4;
  17.                    }
  18.                    case 1005:{
  19.                        return 4;
  20.                    }
  21.                }
  22.                return 4;
  23.             }
  24.         });
代码很简单，就是根据type，return 要占的格子数就好了。其中的type值和Adapter中的类型对应。

数据部分：我们要按照图中从上到下（历史选择->历史选择的数据->选择省份：标题->省份名称->省份数据->省份名称...）的顺序处理好，在数据对象中添加一个type，然后添加到List 中传递进Adapter就可以了。

这样，大体上的效果我们就可以看到了：



基本上实现了需求，有一些细节的地方可能需求按自己的要求修改一下。




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

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

  

闽ICP备14008679号