RecyclerView 多布局使用

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

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

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

历史选择：就一个TextView

 <TextView
        android:id="@+id/tv_selectHistoryTitle"
        tools:text="历史选择:"
        android:textColor="@color/black"
        android:padding="@dimen/padding_10dp"
        android:paddingLeft="@dimen/padding_15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

显示地名的小格子布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:gravity="center"
    android:id="@+id/ll_content"
    android:background="@color/white"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/margin_4dp"
    android:layout_marginRight="@dimen/margin_4dp"
    android:layout_marginTop="@dimen/margin_5dp"
    android:layout_marginBottom="@dimen/margin_5dp">

    <TextView
        android:id="@+id/tv_selectPlaceContent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@drawable/bg_bit_gray_hollow_rounded_rectangle"
        android:ellipsize="end"
        android:lines="1"
        android:paddingLeft="@dimen/padding_6dp"
        android:paddingRight="@dimen/padding_6dp"
        android:paddingTop="@dimen/padding_6dp"
        android:paddingBottom="@dimen/padding_6dp"
        android:textColor="@color/black"
        tools:text="历史选择的的" />

</LinearLayout>

其中给TextView 添加一个drawable ，也就是一个shape就可以成为途中的椭圆的样子了。

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

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

    <TextView
        android:id="@+id/tv_selectProvinceTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:paddingLeft="@dimen/padding_10dp"
        android:paddingRight="@dimen/padding_10dp"
        android:paddingTop="@dimen/padding_10dp"
        android:textColor="@color/black"
        tools:text="选择省粉:" />

</LinearLayout>

最后是显示省份名称的布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:paddingBottom="@dimen/padding_5dp"
    android:paddingTop="@dimen/padding_5dp"
    xmlns:tools="http://schemas.android.com/tools">

    <TextView
        android:id="@+id/tv_selectProvinceName"
        tools:text="甘肃"
        android:textColor="@color/black"
        android:layout_marginLeft="@dimen/margin_10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

这样就完成了上面分析的布局的编写。

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

public int getItemViewType(int position)

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

gridLayoutManager.setSpanSizeLookup（）

这个就是用来设置显示几列的方法。

下面看代码：

 private Context context;

    private List<PlaceItem> list;

    private final int SPAN_SIZE_HISTORY_CHOICE = 1001;//，历史选择

    private final int SPAN_SIZE_CHOICE_PROVINCE = 1002;//标题，选择省

    private final int SPAN_SIZE_PROVINCE_NAME = 1003;//选择的省名称

    private final int SPAN_SIZE_CONTENT = 1004;//位置数据

    private final int SPAN_SIZE_GRAY_SEPARATE = 1005;//灰色分割条

    private OnPlaceItemClickListener onPlaceItemClickListener;

    public void setOnPlaceItemClickListener(OnPlaceItemClickListener onPlaceItemClickListener) {
        this.onPlaceItemClickListener = onPlaceItemClickListener;
    }

    public SelectPlaceAdapter(Context context, List<PlaceItem> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(viewType == SPAN_SIZE_GRAY_SEPARATE){
            View separateView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_gray_bg, parent, false);
            SelectPlaceGraybgViewHolder viewHolder = new SelectPlaceGraybgViewHolder(separateView);
            return viewHolder;
        }else if (viewType == SPAN_SIZE_HISTORY_CHOICE) {
            View historyView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_history_select_title, parent, false);
            SelectHistoryTitleViewHolder viewHolder = new SelectHistoryTitleViewHolder(historyView);
            return viewHolder;
        } else if (viewType == SPAN_SIZE_CHOICE_PROVINCE) {
            View provinceTitleView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_select_province_title, parent, false);
            SelectProvinceTitleViewHolder viewHolder = new SelectProvinceTitleViewHolder(provinceTitleView);
            return viewHolder;
        } else if (viewType == SPAN_SIZE_PROVINCE_NAME) {
            View provinceNameView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_subtitle, parent, false);
            SelectProvinceNameViewHolder viewHolder = new SelectProvinceNameViewHolder(provinceNameView);
            return viewHolder;
        } else if (viewType == SPAN_SIZE_CONTENT) {
            View contentView = LayoutInflater.from(context).inflate(R.layout.recycle_select_place_item_content, parent, false);
            SelectPlaceContentViewHoder viewHolder = new SelectPlaceContentViewHoder(contentView);
            return viewHolder;
        }
        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        int type = getItemViewType(position);
        Log.e("TAG", "bindViewHolder type-" + type);
        switch (type) {
            case SPAN_SIZE_GRAY_SEPARATE:{
                SelectPlaceGraybgViewHolder selectPlaceGraybgViewHolder = (SelectPlaceGraybgViewHolder) holder;
                GridLayoutManager.LayoutParams layoutParams = (GridLayoutManager.LayoutParams) selectPlaceGraybgViewHolder.llSelectPlaceGraybg.getLayoutParams();
                DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
                layoutParams.width = displayMetrics.widthPixels;
                layoutParams.setMarginStart(DensityUtil.dp2px(context,-10));//设置左边移动，从（0,0）开始
                selectPlaceGraybgViewHolder.llSelectPlaceGraybg.setLayoutParams(layoutParams);
                selectPlaceGraybgViewHolder.llSelectPlaceGraybg.requestLayout();
                break;
            }
            case SPAN_SIZE_HISTORY_CHOICE: {
                SelectHistoryTitleViewHolder historyTitleViewHolder = (SelectHistoryTitleViewHolder) holder;
                historyTitleViewHolder.tvSelectHistoryTitle.setText("历史选择title");
                break;
            }
            case SPAN_SIZE_CHOICE_PROVINCE: {
                SelectProvinceTitleViewHolder provinceTitleViewHolder = (SelectProvinceTitleViewHolder) holder;
                provinceTitleViewHolder.tvSlectProvinceTitdle.setText("选择省份：");
                break;
            }
            case SPAN_SIZE_PROVINCE_NAME: {
                SelectProvinceNameViewHolder provinceNameViewHolder = (SelectProvinceNameViewHolder) holder;
                provinceNameViewHolder.tvSelectProvinceName.setText("甘肃省");
                break;
            }
            case SPAN_SIZE_CONTENT: {
                SelectPlaceContentViewHoder contentViewHoder = (SelectPlaceContentViewHoder) holder;
                contentViewHoder.itemView.setOnClickListener(v -> {
                    if(onPlaceItemClickListener!=null){
                        onPlaceItemClickListener.onItemClick(contentViewHoder.itemView,position);
                    }
                });
                contentViewHoder.tvSelectPlaceContent.setText(list.get(position).getItemContent());
                break;
            }
        }
    }

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

    @Override
    public int getItemViewType(int position) {
        if (list.get(position).getItemType() == 1) {
            return SPAN_SIZE_HISTORY_CHOICE;//1001
        } else if (list.get(position).getItemType() == 2) {
            return SPAN_SIZE_CHOICE_PROVINCE;//1002
        } else if (list.get(position).getItemType() == 3) {
            return SPAN_SIZE_PROVINCE_NAME;//1003
        } else if (list.get(position).getItemType() == 4) {
            return SPAN_SIZE_CONTENT;//1004
        } else if(list.get(position).getItemType() == 5){
            return SPAN_SIZE_GRAY_SEPARATE;
        }else{
            return SPAN_SIZE_CONTENT;//默认是内容返回
        }
    }

    /**
     * 位置点击
     */
    public interface OnPlaceItemClickListener{
        void onItemClick(View view,int postion);
    }

    /**
     * 历史选择 标题
     */
    public class SelectHistoryTitleViewHolder extends RecyclerView.ViewHolder {

        @BindView(R.id.tv_selectHistoryTitle)
        TextView tvSelectHistoryTitle;

        public SelectHistoryTitleViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    /**
     * 选择省粉 标题
     */
    public class SelectProvinceTitleViewHolder extends RecyclerView.ViewHolder {

        @BindView(R.id.tv_selectProvinceTitle)
        TextView tvSlectProvinceTitdle;
        public SelectProvinceTitleViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    /**
     * 省份名称显示
     */
    public class SelectProvinceNameViewHolder extends RecyclerView.ViewHolder {

        @BindView(R.id.tv_selectProvinceName)
        TextView tvSelectProvinceName;

        public SelectProvinceNameViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    /**
     * 地点显示
     */
    public class SelectPlaceContentViewHoder extends RecyclerView.ViewHolder {

        @BindView(R.id.tv_selectPlaceContent)
        TextView tvSelectPlaceContent;

        @BindView(R.id.ll_content)
        LinearLayout llContent;
        public SelectPlaceContentViewHoder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    /**
     * 灰色条
     */
     public class SelectPlaceGraybgViewHolder extends RecyclerView.ViewHolder{

         @BindView(R.id.ll_selectPlaceGraybg)
         LinearLayout llSelectPlaceGraybg;

         public SelectPlaceGraybgViewHolder(View itemView) {
             super(itemView);
             ButterKnife.bind(this,itemView);
         }
     }

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

 gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                int type = recycleSelectPlace.getAdapter().getItemViewType(position);
               switch (type){
                   case 1004:{
                       return 1;//占1格
                   }
                   case 1001:{
                       return 4;
                   }
                   case 1002:{
                       return 4;
                   }
                   case 1003:{
                       return 4;
                   }
                   case 1005:{
                       return 4;
                   }
               }
               return 4;
            }
        });

代码很简单，就是根据type，return 要占的格子数就好了。其中的type值和Adapter中的类型对应。

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

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

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