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