如何给recyclerView瀑布流设置均等间距

2016-06-18 11:17 6928人阅读 评论(12) 收藏 举报

 分类：

解决方案（11） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

recyclerVIew 默认是不带间距的，但是我们可以通过SpacesItemDecoration方法给其设置间距，但是这样问题来了这样设置的间距如果有两列的话 中间的间距是你设置的间距的2倍，至于为什么会这样，是SpacesItemDecoration方法中设置间距的方式是给itemview的四周加上间距 所以左右会叠加. 
这时候我就会去在代码中设置recyclerview的padding（设置的padding是想要设置的间距的一半，当然如果这样的话SpacesItemDecoration（间距也是目标间距的一半）），发现最外层的间距就更大了 。后来才想到问题所在 ，在代码中设置的距离是px 在xml文件中设置的间距是dp，所以后来索性都在代码中设置距离让其格式统一这样间距就相同了 
 
下面看代码 
MainActivity中设置

  //控件实例化        jRecyclerView = (JRecyclerView) findViewById(R.id.jrecyclerview);        jRecyclerView.setPadding(8,8,8,8);        //设置layoutmanager,设置为纵向一行两个item的列表        jRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));        SpacesItemDecoration decoration = new SpacesItemDecoration(8);        jRecyclerView.addItemDecoration(decoration);        //实例化适配器        imageAdapter = new ImageAdapter(this);        //设置适配器        jRecyclerView.setAdapter(imageAdapter);
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

适配器中设置瀑布流imavgeview的宽高

/** * 图片适配器 * 关于 同等间距的recycleView * 我们在xml文件里设置的距离是dp 在代码里设置的距离是px * 所以都在代码中设置统一格式就是同等编剧的recyclerview * Created by wuxubaiyang on 16/5/6. */public class ImageAdapter extends RecyclerAdapter<ImageModel> {    private boolean isScroll = false;    private int itemWidth;    public ImageAdapter(Activity activity) {        super(activity);        //计算item的宽度        itemWidth = (DeviceUtils.getScreenWidth(activity)-48) / 2;    }    public void setScroll(boolean scroll) {        isScroll = scroll;        if (!isScroll) {            notifyDataSetChanged();        }    }    @Override    public View createView(LayoutInflater layoutInflater, ViewGroup viewGroup, int i) {        return layoutInflater.inflate(R.layout.view_item, viewGroup, false);    }    @Override    public void convert(RecyclerHolder recyclerHolder, ImageModel imageModel, int i) {        ImageView imageView = recyclerHolder.getView(R.id.imageview);        //等比缩放        double ratio = (itemWidth * 1.0) / imageModel.getWidth();        int height = (int) (imageModel.getHeight() * ratio);        ViewGroup.LayoutParams layoutParams = imageView.getLayoutParams();        layoutParams.width = itemWidth;        layoutParams.height = height;        imageView.setLayoutParams(layoutParams);        //显示图片//        if (isScroll) {//            imageView.setImageResource(R.mipmap.ic_launcher);//        } else {            Glide.with(getActivity()).load(imageModel.getUrl()).placeholder(R.mipmap.ic_launcher).into(imageView);//        }    }}
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
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

最后是设置间距的方法

/** * Created by 赵梦阳 on 2016/5/7. */public class SpacesItemDecoration extends RecyclerView.ItemDecoration {    private int space;    public SpacesItemDecoration(int space) {        this.space=space;    }    @Override    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {        outRect.left=space;        outRect.right=space;        outRect.bottom=space;        //注释这两行是为了上下间距相同//        if(parent.getChildAdapterPosition(view)==0){            outRect.top=space;//        }    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

最后在说下我理解的等间距的原理 
比如我想给间距设置成20 
那我们考虑到上面说的叠加 设置间距我只设置一半 就是10 
在代码里在给recyclerview设置一个10的内边距 
这样就间距就都是20了

下面附上demo链接可以看下

dmo地址