RecyclerView輕鬆實現瀑布流效果

今天項目中有一個界面需要用到瀑布流效果，經過考慮後決定使用RecyclerView實現。

RecyclerView的Adapter比ListView更加簡潔，它封裝了ViewHolder的回收利用，編寫Adapter面向的ViewHolder而不再是View，代碼如下：

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyViewHolder>{

    private ArrayList<String> mData;

    public RecyclerAdapter(ArrayList<String> mData) {
        this.mData = mData;
    }

    @Override
    public RecyclerAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        MyViewHolder myViewHolder = new MyViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.test_item , parent ,false));
         //return一個可供重複利用的ViewHolder
        return myViewHolder;
    }

    @Override
    public void onBindViewHolder(RecyclerAdapter.MyViewHolder holder, int position) {
    //對Item中的內容所做操作直接面向ViewHolder
        holder.tv_tests.setText(mData.get(position));
    }

    @Override
    public int getItemCount() {
    //與ListView一樣返回數據條數
        return mData.size();
    }

//繼承自ViewHolder類
    class MyViewHolder extends RecyclerView.ViewHolder{

        public TextView tv_tests;

        public MyViewHolder(View itemView) {
            super(itemView);
            tv_tests = (TextView) itemView.findViewById(R.id.tv_test);
        }
    }

}

RecyclerView並沒有爲我們提供默認的分割線，如果要想在item之間添加分割線的話，還需要實現ItemDecoration這個抽象類。

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

    private Drawable mDrawable;

    public DividerItemDecoration(Context context) {
        TypedArray typedArray = context.obtainStyledAttributes(new int[]{android.R.attr.listDivider});
        mDrawable = typedArray.getDrawable(0);
        typedArray.recycle();
    }

    public int getSapnCount(RecyclerView parent) {
        return ((StaggeredGridLayoutManager) parent.getLayoutManager()).getSpanCount();
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        drawHorizontal(c, parent);
        drawVertical(c, parent);
    }

    public void drawHorizontal(Canvas c, RecyclerView parent) {
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int left = child.getLeft() - params.leftMargin;
            final int right = child.getRight() + params.rightMargin
                    + mDrawable.getIntrinsicWidth();
            final int top = child.getBottom() + params.bottomMargin;
            final int bottom = top + mDrawable.getIntrinsicHeight();
            mDrawable.setBounds(left, top, right, bottom);
            mDrawable.draw(c);
        }
    }

    public void drawVertical(Canvas c, RecyclerView parent) {
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);

            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int top = child.getTop() - params.topMargin;
            final int bottom = child.getBottom() + params.bottomMargin;
            final int left = child.getRight() + params.rightMargin;
            final int right = left + mDrawable.getIntrinsicWidth();

            mDrawable.setBounds(left, top, right, bottom);
            mDrawable.draw(c);
        }
    }

    private boolean isLastColum(RecyclerView parent, int pos, int spanCount,
                                int childCount) {
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();

        int orientation = ((StaggeredGridLayoutManager) layoutManager)
                .getOrientation();
        if (orientation == StaggeredGridLayoutManager.VERTICAL) {
            if ((pos + 1) % spanCount == 0)// 如果是最後一列，則不需要繪製右邊
            {
                return true;
            }
        } else {
            childCount = childCount - childCount % spanCount;
            if (pos >= childCount)// 如果是最後一列，則不需要繪製右邊
                return true;
        }
        return false;
    }

    private boolean isLastRaw(RecyclerView parent, int pos, int spanCount,
                              int childCount) {
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        int orientation = ((StaggeredGridLayoutManager) layoutManager)
                .getOrientation();
        // StaggeredGridLayoutManager 且縱向滾動
        if (orientation == StaggeredGridLayoutManager.VERTICAL) {
            childCount = childCount - childCount % spanCount;
            // 如果是最後一行，則不需要繪製底部
            if (pos >= childCount)
                return true;
        } else
        // StaggeredGridLayoutManager 且橫向滾動
        {
            // 如果是最後一行，則不需要繪製底部
            if ((pos + 1) % spanCount == 0) {
                return true;
            }
        }

        return false;
    }

    @Override
    public void getItemOffsets(Rect outRect, int itemPosition,
                               RecyclerView parent) {
        int spanCount = getSapnCount(parent);
        int childCount = parent.getAdapter().getItemCount();
        if (isLastRaw(parent, itemPosition, spanCount, childCount))// 如果是最後一行，則不需要繪製底部
        {
            outRect.set(0, 0, mDrawable.getIntrinsicWidth(), 0);
        } else if (isLastColum(parent, itemPosition, spanCount, childCount))// 如果是最後一列，則不需要繪製右邊
        {
            outRect.set(0, 0, 0, mDrawable.getIntrinsicHeight());
        } else {
            outRect.set(0, 0, mDrawable.getIntrinsicWidth(),
                    mDrawable.getIntrinsicHeight());
        }
    }

}

RecyclerView.LayoutManager是一個抽象類，系統爲我們提供了三個實現類
①LinearLayoutManager即線性佈局，這個是在上面的例子中我們用到的佈局
②GridLayoutManager即表格佈局
③StaggeredGridLayoutManager即流式佈局，如瀑布流效果
這裏我們直接使用StaggeredGridLayoutManager就可以了

recyclerView = (RecyclerView)findViewById(R.id.rv_test);
        staggeredGridLayoutManager = new StaggeredGridLayoutManager(2 , StaggeredGridLayoutManager.VERTICAL);
//        //設置瀑布流佈局
        recyclerView.setLayoutManager(staggeredGridLayoutManager);
//        //設置適配器
        recyclerView.setAdapter(new RecyclerAdapter(mData));
        //添加分割線
        recyclerView.addItemDecoration(new DividerItemDecoration(this));

到這裏瀑布流效果就實現了
源碼地址：https://github.com/GameT/RecyclerViewFlow