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就可以了。
这样，大体上的效果我们就可以看到了：
基本上实现了需求，有一些细节的地方可能需求按自己的要求修改一下。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
