1. 程式人生 > >如何給recyclerView瀑布流設定均等間距

如何給recyclerView瀑布流設定均等間距

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地址