相信技术的力量

RecyclerView分割线-ItemDecoration

在ListView中,可以通过控件的divider属性直接进行设置其分割线,但是RecyclerView将控件、数据适配器、布局管理器都进行了解耦,分割线也同样如此。

所以需要我们自己去处理分割线问题,这里记录两个比较常用的形式:

  • 普通线条分割线
  • Item间距

普通线条分割线

直接使用系统提供的DividerItemDecoration即可

//创建分割线对象,第一个参数为上下文,第二个参数为RecyclerView排列方向
DividerItemDecoration decoration = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL);
//为RecyclerView添加分割线
mRecyclerView.addItemDecoration(decoration);

如果感觉对系统提供的分割线颜色值、高宽等不太满意,可以通过decoration.setDrawable() 方法传入自己定制的drawable,自定义分割线的样式。

效果图如下:

DividerItemDecoration

Item间距

正常情况下,我们需要RecyclerView的每个子Item之间都有一些间距,虽然可以通过普通的margin、padding实现,但是真正在日常开发时,有可能子Item定制的比较复杂,让上述实现Item间距的方式做起来略微有点麻烦,这时候就需要自定义ItemDecoration登场了。

系统提供的DividerItemDecoration是通过继承ItemDecoration类实现的,我们也一样,由于仅仅只需要做一个间距而已,所以会更加简单。

代码如下,只做了两件事:

  • dp to px转换
  • 从第二个条目开始,设置每个条目与上个条目的顶部距离
public class SpaceItemDecoration extends RecyclerView.ItemDecoration {

    private int mSpace;

    public SpaceItemDecoration(Context context,int dpValue) {
        mSpace = dp2px(context,dpValue);
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if(parent.getChildAdapterPosition(view) > 0) {
            //从第二个条目开始,距离上方Item的距离
            outRect.top = mSpace;
        }
    }

    /**
     * dp to px转换
     * @param context
     * @param dpValue
     * @return
     */
    private int dp2px(Context context,int dpValue){
        int pxValue = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, context.getResources().getDisplayMetrics());
        return pxValue;
    }
}

使用方式如下:

//直接传入dp值,比如10dp,就传入10,由SpaceItemDecoration负责像素转换
SpaceItemDecoration decoration = new SpaceItemDecoration(this, 10);
mRecyclerView.addItemDecoration(decoration);

效果图如下:

⬆️