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

先上效果图（改图比较简陋，用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要么不设置，要么就只能填满，所以无法完成图上的效果。

有两种使用RecyclerViewHeader的方法：

普通方法

(使用起来非常简单，但是它会添加额外的布局，因此效率略低于第二种方法):

为header创建一个xml布局（可以包括任意view或者ViewGroup）

<FrameLayout

android:layout_width="match_parent"

android:layout_height="100dp">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="header"/>

</FrameLayout>

使用静态初始方法从xml中创建RecyclerViewHeader

RecyclerViewHeader header = RecyclerViewHeader.fromXml(context, R.layout.header)

将RecyclerViewHeader Attach 到RecyclerView，搞定！

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view)

// set LayoutManager for your RecyclerView

header.attachTo(recyclerView)

Header-already-aligned approach (不会引入任何额外布局):

将RecyclerViewHeader布局放在RecyclerView的上层。

<FrameLayout

android:layout_width="match_parent"

android:layout_height="wrap_content">

<android.support.v7.widget.RecyclerView

android:id="@+id/recycler"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal|top" />

<com.bartoszlipinski.recyclerviewheader.RecyclerViewHeader

android:id="@+id/header"

android:layout_width="match_parent"

android:layout_height="100dp"

android:layout_gravity="center_horizontal|top">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="header"/>

</com.bartoszlipinski.recyclerviewheader.RecyclerViewHeader>

</FrameLayout>

获得RecyclerViewHeader对象：

RecyclerViewHeader header = (RecyclerViewHeader) findViewById(R.id.header)

把RecyclerViewHeader赋予RecyclerView

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view)

// set LayoutManager for your RecyclerView

header.attachTo(recyclerView, true)

注意事项

RecyclerViewHeader必须在RecyclerView设置了LayoutManager之后调用。

目前该库适用于LinearLayoutManager,GridLayoutManager和StaggeredGridLayoutManager布局的RecyclerViews。

只支持垂直布局LayoutManager

---