android RecyclerView GridLayoutM

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

appshop.png

程序猿看到类似这样的设计图的话都会在大脑里思考该如何布局。对于此图更多的是前半段是用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,第三部分就是网格显示。

144.png

再看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;

    public BaseAppColSpanLookup (BaseShopAppAdapter adapter,
                                 GridLayoutManager layoutManager) {
        this.adapter = adapter;
        this.layoutManager = layoutManager;
    }

    @Override
    public int getSpanSize(int position) {
        int viewType = adapter.getItemViewType(position);
        switch (viewType){
            case 1://广告
                return 6;
            case 2://标题
                return 6;
            case 3://表格app
                return 2;
            default:
                return 6;
        }
    }
}

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

444.png

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

到此就基本完成了。

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