概述
RecyclerView(一)使用完全指南
RecyclerView(二)之萬能分割線
RecyclerView之瀑布流(三)
RecyclerView提供了三種布局管理器：
- LinerLayoutManager 以垂直或者水平列表方式展示Item
- GridLayoutManager 以網格方式展示Item
- StaggeredGridLayoutManager 以瀑布流方式展示Item
瀑布流樣式
RecyclerView的瀑布流布局管理器是taggeredGridLayoutManager，它最常用的構造函數就一個，StaggeredGridLayoutManager(int spanCount, int orientation)，spanCount代表每行或每列的Item個數，orientation代表列表的方向，豎直或者水平。
看在代碼中的使用。
// 初始化布局管理器
mLayoutManager = new StaggeredGridLayoutManager(2, OrientationHelper.VERTICAL);
// 設置布局管理器
mRecyclerView.setLayoutManager(mLayoutManager);
// 設置adapter
mRecyclerView.setAdapter(mAdapter);
// 設置間隔樣式
mRecyclerView.addItemDecoration(new MDStaggeredRvDividerDecotation(this));
要實現瀑布流效果（僅討論豎直方向的瀑布流樣式），每一個Item的高度要有所差別，如果所有的item的高度相同，就和網格樣式是一樣的展示效果。示例中就實現兩中不同高度的Item，一個高度為80dp,一個高度為100dp。
view_rv_staggered_item.xml布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="80dp">
<TextView
android:id="@+id/item_tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:text="item"/>
</LinearLayout>
view_rv_staggered_item_two.xml布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="100dp">
<TextView
android:id="@+id/item_tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:text="item"/>
</LinearLayout>
Item不同的布局是在Adapter里面綁定的，看一下Adapter的實現。
public class MDStaggeredRvAdapter extends RecyclerView.Adapter<MDStaggeredRvAdapter.ViewHolder> {
/**
* 展示數據
*/
private ArrayList<String> mData;
public MDStaggeredRvAdapter(ArrayList<String> data) {
this.mData = data;
}
public void updateData(ArrayList<String> data) {
this.mData = data;
notifyDataSetChanged();
}
@Override
public int getItemViewType(int position) {
// 瀑布流樣式外部設置spanCount為2，在這列設置兩個不同的item type，以區分不同的布局
return position % 2;
}
@Override
public MDStaggeredRvAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
// 實例化展示的view
View v;
if(viewType == 1) {
v = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_rv_staggered_item, parent, false);
} else {
v = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_rv_staggered_item_two, parent, false);
}
// 實例化viewholder
ViewHolder viewHolder = new ViewHolder(v);
return viewHolder;
}
@Override
public void onBindViewHolder(MDStaggeredRvAdapter.ViewHolder holder, int position) {
// 綁定數據
holder.mTv.setText(mData.get(position));
}
@Override
public int getItemCount() {
return mData == null ? 0 : mData.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder {
TextView mTv;
public ViewHolder(View itemView) {
super(itemView);
mTv = (TextView) itemView.findViewById(R.id.item_tv);
}
}
}
接下來是設置瀑布流樣式的間隔線樣式的，上面代碼中使用的是MDStaggeredRvDividerDecotation
類，其實是直接拷貝的網格樣式的間隔線繪制類。看一下運行效果。
很奇怪，間隔線并沒有按照我們想象中的方式繪制，仔細看瀑布流中Item的分布，發現瀑布流樣式的Item分布和網格樣式的Item分布有些不同。對比一下兩者Item的分布，如下圖。
網格樣式的Item分布規律很明顯，豎直方向的網格，Item是從左向右從上到下依次按順序排列分布。
瀑布流樣式的Item分布也是從上到下，從左到右的順序排列，但是有一個高度的優先級，如果某一列中有一個高度最低的位置為空，最優先在此處添加Item?？吹谌龔垐D的3 item，因為該位置最低，優先在此處添加Item。
分析出了瀑布流樣式的Item的分布規律，就會發現，按照以往列表樣式或者網格樣式去設置間隔線是有問題的，因為不知道Item具體的位置，上下左右間隔線是否需要繪制不確定，參考第二張圖，其實第三張圖的間隔線也有問題，向上滑動就會展示出來。
目前能考慮到的瀑布流添加間隔線的思路：
- Item布局中設置四周間隔padding/margin
- 代碼中動態修改ItemView的間隔padding/margin
設置間隔有兩個方法：
- 上下左右都設置間隔
- 相鄰兩邊設置間隔（左上/左下/右上/右下）
第一種設置間隔的方法會導致相鄰的Item間距是間隔的兩倍，第二種設置間隔的方法會導致Item某一個方向上的與父布局邊緣無間隔，但是另一個方向與父布局邊緣有間隔，例如左上相鄰兩邊設置了間隔，最左邊一列的Item左邊與父布局邊緣有間隔，但是最右邊一列Item右邊與父布局無間隔，第一行和最后一行的Item也會出現這種情況。
要解決上面的問題，父布局RecyclerView也需要根據相應的情況設置padding讓整個布局的間隔都一致。下面的例子是選擇在Item布局中設置間隔，因為可以自己在布局文件中控制顏色比較方便，選擇右下兩邊設置間隔。
首先修改兩個Item的布局文件。
view_rv_staggered_item.xml修改背景色和外層間距背景色。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="@dimen/md_common_view_height"
android:background="@color/md_divider"
android:paddingBottom="5dp"
android:paddingRight="5dp">
<TextView
android:id="@+id/item_tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@color/md_white"
tools:text="item"/>
</LinearLayout>
同樣修改view_rv_staggered_item_two.xml。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="100dp"
android:paddingBottom="5dp"
android:paddingRight="5dp"
android:background="@color/md_divider">
<TextView
android:id="@+id/item_tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@color/md_white"
tools:text="item"/>
</LinearLayout>
運行一下，看看最后的效果。
差不多完美的解決了間隔線的問題，有細心的同學可能發現，在RecyclerView滑動的時候上面一直有一條灰色的間隔線，這個可以通過取消xml布局文件中RecyclerView的paddingTop屬性去掉頂部灰色的間隔線。
總結
本篇文章主要介紹網格樣式和瀑布流樣式的RecyclerView，列表樣式、網格樣式和瀑布流樣式在某種程度上是可以轉換的。
- 網格樣式的布局管理器的spanCount設置為1，就是列表樣式
- 瀑布流樣式如果Item的布局文件是等高，豎直方向，就是豎直方向的網格樣式；如果Item是等寬，水平方向，那就是水平方向的網絡樣式
- 如果瀑布流樣式的布局管理器spanCount設置為1，豎直方向，是豎直方向的列表；水平方向，就是水平方向的列表
