Android RecycleView 图片瀑布流的实现

布局文件

1
2
3
4
<android.support.v7.widget.RecyclerView
       android:id="@+id/vRecycleView"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

初始化RecycleView

1
2
3
4
5
6
7
private void initRecyclerView(RecyclerView recyclerView) {
       recyclerView.setHasFixedSize(true); // 设置固定大小
       initRecyclerLayoutManager(recyclerView); // 初始化布局
       initRecyclerAdapter(recyclerView); // 初始化适配器
       initItemDecoration(recyclerView); // 初始化装饰
       initItemAnimator(recyclerView); // 初始化动画效果
   }

初始化适配器

1
2
3
4
private void initRecyclerAdapter(RecyclerView recyclerView) {
       mAdapter = new MyImageAdapter(mGanHuoDataList,getContext());
       recyclerView.setAdapter(mAdapter);
   }

初始化布局

1
2
3
4
5
private void initRecyclerLayoutManager(RecyclerView recyclerView) {
        // 错列网格布局
        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,
                StaggeredGridLayoutManager.VERTICAL));
    }

初始化分割线

1
2
3
private void initItemDecoration(RecyclerView recyclerView) {
       recyclerView.addItemDecoration(new MyItemDecoration(getContext()));
   }

初始化动画效果

1
2
3
private void initItemAnimator(RecyclerView recyclerView) {
       recyclerView.setItemAnimator(new DefaultItemAnimator()); // 默认动画
   }

适配器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Override
   public void onBindViewHolder(MyViewHolder holder, int position) {
       GanHuoData ganHuoData=mGanHuoDataList.get(position);
       //随机高度模仿瀑布流
       if(mHeights.size()<=position){
           mHeights.add((int)(500+Math.random()*300));
       }
       ViewGroup.LayoutParams lp=holder.ivImage.getLayoutParams();
       lp.height=mHeights.get(position);
       holder.ivImage.setLayoutParams(lp);
       holder.itemView.setLayoutParams(lp);
       Glide.with(mContext).load(ganHuoData.url).placeholder(R.mipmap.small).into(holder.ivImage);

   }


   <ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:scaleType="centerCrop"
   android:id="@+id/ivImage"
   xmlns:android="http://schemas.android.com/apk/res/android"/>
   //注意 ScaleType要设定不然高度有问题

分割线装饰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
public class MyItemDecoration extends RecyclerView.ItemDecoration {

    private static final int[] ATTRS = new int[]{android.R.attr.listDivider};
    private Drawable mDivider;

    public MyItemDecoration(Context context) {
        final TypedArray array = context.obtainStyledAttributes(ATTRS);
        mDivider = array.getDrawable(0);
        array.recycle();
    }

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

    // 水平线
    public void drawHorizontal(Canvas c, RecyclerView parent) {

        final int childCount = parent.getChildCount();

        // 在每一个子控件的底部画线
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);

            final int left = child.getLeft() + child.getPaddingLeft();
            final int right = child.getWidth() + child.getLeft() - child.getPaddingRight();
            final int top = child.getBottom() - mDivider.getIntrinsicHeight() - child.getPaddingBottom();
            final int bottom = top + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.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);
            int right = child.getRight() - child.getPaddingRight();
            int left = right - mDivider.getIntrinsicWidth();
            final int top = child.getTop() + child.getPaddingTop();
            final int bottom = child.getTop() + child.getHeight() - child.getPaddingBottom();

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

    // Item之间的留白
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.set(0, 0, mDivider.getIntrinsicWidth(), mDivider.getIntrinsicHeight());
    }
}

项目地址

https://github.com/guosen/Volley