RecyclerView设置Item的边距

2,404 阅读1分钟

一,通过继承RecyclerView.ItemDecoration

RecyclerView有三种布局即:LinearLayoutManager 线性布局、StaggeredGridLayoutManager瀑布流布局、GridLayoutManager网格布局。LinearLayoutManager布局和其他两种布局实现设置RecyclerView的Item间距不太一样;以下分别给出实现方法;

1.1,LinearLayoutManager 布局

实现方式1:上下左右间距可以分开设置,也可以设置一样的参数

a,继承RecyclerView.ItemDecoration重写getItemOffsets方法

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
        private HashMap<String, Integer> spaceValue;
      
        public static final String TOP_SPACE = "top_space";
        public static final String BOTTOM_SPACE = "bottom_space";
        public static final String LEFT_SPACE = "left_space";
        public static final String RIGHT_SPACE = "right_space";

        public SpacesItemDecoration(HashMap spaceValue) {
            this.spaceValue = spaceValue;          
        }

        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            if (spaceValue.get(LEFT_SPACE) != null)
                outRect.left = spaceValue.get(LEFT_SPACE);
            if (spaceValue.get(RIGHT_SPACE) != null)
                outRect.right = spaceValue.get(RIGHT_SPACE);
            if (spaceValue.get(BOTTOM_SPACE) != null)
                outRect.bottom = spaceValue.get(BOTTOM_SPACE);
            if (spaceValue.get(TOP_SPACE) != null)
                outRect.top = spaceValue.get(TOP_SPACE);
        }
    }

b,设置item间距

HashMap<String, Integer> spacesVelue = new HashMap<>();
spacesVelue.put(SpacesItemDecoration.TOP_SPACE, 10);
spacesVelue.put(SpacesItemDecoration.BOTTOM_SPACE, 20);
spacesVelue.put(SpacesItemDecoration.LEFT_SPACE, 0);
spacesVelue.put(SpacesItemDecoration.RIGHT_SPACE, 0);
recyclerView.addItemDecoration(new SpacesItemDecoration(spacesVelue));

实现方式2:设置是否包含四周边距;上下左右间距可以分开设置,也可以设置一样的参数;

a,继承RecyclerView.ItemDecoration重写getItemOffsets方法

public class SpacesItemDecoration2 extends RecyclerView.ItemDecoration {
        private HashMap<String, Integer> spaceValue; //间隔
        private boolean includeEdge; //是否包含四周边距

        public static final String TOP_SPACE = "top_space";
        public static final String BOTTOM_SPACE = "bottom_space";
        public static final String LEFT_SPACE = "left_space";
        public static final String RIGHT_SPACE = "right_space";
        public SpacesItemDecoration2(HashMap spaceValue, boolean includeEdge) {
            this.spaceValue = spaceValue;
            this.includeEdge = includeEdge;
        }

        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();
            if (includeEdge) {
                if (spaceValue.get(LEFT_SPACE) != null)
                    outRect.left = spaceValue.get(LEFT_SPACE);
                if (spaceValue.get(RIGHT_SPACE) != null)
                    outRect.right = spaceValue.get(RIGHT_SPACE);
                if (spaceValue.get(BOTTOM_SPACE) != null)
                    outRect.bottom = spaceValue.get(BOTTOM_SPACE);
                if (spaceValue.get(TOP_SPACE) != null)
                    outRect.top = spaceValue.get(TOP_SPACE);
            } else {
                if (layoutManager.getOrientation() == LinearLayoutManager.HORIZONTAL) {
                    if (parent.getChildAdapterPosition(view) == 0)
                        outRect.left = 0;
                    if (parent.getChildAdapterPosition(view) == layoutManager.getItemCount() - 1)
                        outRect.right = 0;
                }
                if (layoutManager.getOrientation() == LinearLayoutManager.VERTICAL) {
                    if (parent.getChildAdapterPosition(view) == 0)
                        outRect.top = 0;
                    if (parent.getChildAdapterPosition(view) == layoutManager.getItemCount() - 1)
                        outRect.bottom = 0;
                }
            }
        }
    }

b,设置间距:

HashMap<String, Integer> spacesVelue = new HashMap<>();
spacesVelue.put(SpacesItemDecoration.TOP_SPACE, 10); //item上边距
spacesVelue.put(SpacesItemDecoration.BOTTOM_SPACE, 20); //item下边距
spacesVelue.put(SpacesItemDecoration.LEFT_SPACE, 0); //item左边距
spacesVelue.put(SpacesItemDecoration.RIGHT_SPACE, 0); //item 右边距
recyclerView.addItemDecoration(new SpacesItemDecoration(spacesVelue,true)); //true代表有边距,false表示没有边距

1.2,网格布局和瀑布流布局解决办法:

    public class SpacesItemDecoration extends RecyclerView.ItemDecoration {

        private HashMap<String, Integer> spaceValue; //间隔
        private boolean includeEdge; //是否包含四周边距
        private int spanCount; //列数


        public static final String TOP_SPACE = "top_space";
        public static final String BOTTOM_SPACE = "bottom_space";
        public static final String LEFT_SPACE = "left_space";
        public static final String RIGHT_SPACE = "right_space";

        public SpacesItemDecoration(int spanCount, HashMap<String, Integer> spaceValue, boolean includeEdge) {
            this.spanCount = spanCount;
            this.spaceValue = spaceValue;
            this.includeEdge = includeEdge;
        }

        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

            //这里是关键,需要根据你有几列来判断
            int position = parent.getChildAdapterPosition(view); // item position
            int column = position % spanCount; // item column


            if (includeEdge) {
                outRect.left = spaceValue.get(LEFT_SPACE) - column * spaceValue.get(LEFT_SPACE) / spanCount; 
                outRect.right = (column + 1) * spaceValue.get(RIGHT_SPACE) / spanCount; 
                if (position < spanCount) { // top edge 判断是首行
                    outRect.top = spaceValue.get(TOP_SPACE);
                }
                outRect.bottom = spaceValue.get(BOTTOM_SPACE); // item bottom
            } else {
                outRect.left = column * spaceValue.get(LEFT_SPACE) / spanCount; 
                outRect.right = spaceValue.get(RIGHT_SPACE) - (column + 1) * spaceValue.get(RIGHT_SPACE) / spanCount; 
                if (position >= spanCount) {//不是首行
                    outRect.top = spaceValue.get(TOP_SPACE); // item top
                }
                //只有首行设置上边距
                //if (position >= spanCount) {//不是首行
                //   outRect.top = spaceValue.get(TOP_SPACE); // item top
                //}else {
                //   outRect.top = 20; //首行
                //}

                //只有下边距
//                if (position > (parent.getAdapter().getItemCount() - spanCount)-1) {
//                    outRect.bottom = 100;
//                }
            }
        }
    }

设置item边距:

HashMap<String, Integer> spacesVelue = new HashMap<>();
        spacesVelue.put(SpacesItemDecoration.TOP_SPACE, 10);
        spacesVelue.put(SpacesItemDecoration.BOTTOM_SPACE, 20);
        spacesVelue.put(SpacesItemDecoration.LEFT_SPACE, 0);
        spacesVelue.put(SpacesItemDecoration.RIGHT_SPACE, 0);

        recyclerView.addItemDecoration(new SpacesItemDecoration(2,spacesVelue, false));

本文参考:www.jianshu.com/p/e372cec81…