android RecyclerView GridLayoutManager 多布局（每个Item带标题）

Posted 2023-03-03

参考技术A 先上效果图（改图比较简陋，用Axure RP Pro 7.0画的见谅哈）：

程序猿看到类似这样的设计图的话都会在大脑里思考该如何布局。对于此图更多的是前半段是用viewpager进行广告图片的自动切换，下半部分是用 RecyclerView 的GridLayoutManager 多布局实现。其实呢，整体来说 ，都可以用一个RecyclerView来实现。下面进行简述RecyclerView 简单实现。

先从adapter里面实现：多布局的话首先会想到：getItemViewType
@Override
public int getItemViewType(int position)
if(null==appShopMgr||appShopMgr.getTagAppHisVs().size()==0)
return 0;
else if (this.coverShopMgr == null)
//return VIEW_TYPE_ITEM;
return noGallery(position);
else if (this.coverShopMgr .hasCover() == false)
//return VIEW_TYPE_ITEM;
return noGallery(position);
else
return position == 0 ? VIEW_TYPE_GALLERY :appShopMgr.getTagAppHisVs().get(position-1).type ;

分析下各种viewType，也就是分三部分，第一部分就是广告图片，第二是title,第三部分就是网格显示。

再看onCreateViewHolder和 onBindViewHolder
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
if (viewType == VIEW_TYPE_GALLERY)
return new ShopCoverHolder(mInflater.inflate(
R.layout.holder_item_shop_cover_layout, parent, false));
else if(viewType == RecycleViewModelType.TITLEITEM)
return new TitleViewHolder(mInflater.inflate(
R.layout.activity_app_shop_title_layout, parent, false));
else if (viewType == RecycleViewModelType.GRALLYITEM)
return new SetupAppHolder(mInflater.inflate(
R.layout.item_setup_app_layout, parent, false));

return null;


@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position)
int type= getItemViewType(position);
if(type==VIEW_TYPE_GALLERY)
onBindGallery((ShopCoverHolder) holder);
else if(type==RecycleViewModelType.TITLEITEM)
position = position - (this.hasCover() ? 1 : 0);
MpTagAppHisV mpTagAppHisV= appMgr.getAppTagByIndex(position);
((TitleViewHolder) holder).titleTv.setText(mpTagAppHisV.title);
else if(type==RecycleViewModelType.GRALLYITEM)
position = position - (this.hasCover() ? 1 : 0);
MpTagAppHisV mpTagAppHisV= appMgr.getAppTagByIndex(position);
if(mpTagAppHisV.isAdd)
onBindAddItem((SetupAppHolder) holder);
else
onBindItem((SetupAppHolder) holder, position, mpTagAppHisV.mpAppHisV);




以上都是通用而且比较容易理解的。接下来就得讲下主要的部分了。

public static class BaseAppColSpanLookup extends
GridLayoutManager.SpanSizeLookup
protected GridLayoutManager layoutManager = null;
protected BaseShopAppAdapter adapter;

我们给RecyclerView设置一个列数为6的GridLayoutManager，然后再动态地为不同部位的item分别设置SpanSize为6（铺满）、3（1/2）、2（1/3）就行了,下图：

设置一个列数为6的GridLayoutManager：
recyclerView.setLayoutManager(new GridLayoutManager(recyclerView.
getContext(), 6, GridLayoutManager.VERTICAL, false));

到此就基本完成了。

补充：StaggeredGridLayoutManager.LayoutParams中提供了这样一个方法：
LayoutParams.setFullSpan(true);
作用是把当前item的宽度设为full（填满），也就是说如果使用StaggeredGridLayoutManager要么不设置，要么就只能填满，所以无法完成图上的效果。