概述

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
類，其實是直接拷貝的網格樣式的間隔線繪制類。看一下運行效果。

RecyclerView-瀑布流2列.jpg

很奇怪，間隔線并沒有按照我們想象中的方式繪制，仔細看瀑布流中Item的分布，發現瀑布流樣式的Item分布和網格樣式的Item分布有些不同。對比一下兩者Item的分布，如下圖。

RecyclerView-對比.png

網格樣式的Item分布規律很明顯，豎直方向的網格，Item是從左向右從上到下依次按順序排列分布。

瀑布流樣式的Item分布也是從上到下，從左到右的順序排列，但是有一個高度的優先級，如果某一列中有一個高度最低的位置為空，最優先在此處添加Item。看第三張圖的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瀑布流.gif

差不多完美的解決了間隔線的問題，有細心的同學可能發現，在RecyclerView滑動的時候上面一直有一條灰色的間隔線，這個可以通過取消xml布局文件中RecyclerView的paddingTop屬性去掉頂部灰色的間隔線。

總結

本篇文章主要介紹網格樣式和瀑布流樣式的RecyclerView，列表樣式、網格樣式和瀑布流樣式在某種程度上是可以轉換的。

• 網格樣式的布局管理器的spanCount設置為1，就是列表樣式
• 瀑布流樣式如果Item的布局文件是等高，豎直方向，就是豎直方向的網格樣式；如果Item是等寬，水平方向，那就是水平方向的網絡樣式
• 如果瀑布流樣式的布局管理器spanCount設置為1，豎直方向，是豎直方向的列表；水平方向，就是水平方向的列表

RecyclerView(一)使用完全指南

RecyclerView(二)之萬能分割線