美文网首页
RecyclerView分割线-ItemDecoration

RecyclerView分割线-ItemDecoration

作者: Crocutax | 来源:发表于2017-05-12 22:47 被阅读1140次

    版权声明:本文来自 Crocutax 的博客 , 转载请注明出处 http://www.crocutax.com

    在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);
    

    效果图如下:

    相关文章

      网友评论

          本文标题:RecyclerView分割线-ItemDecoration

          本文链接:https://www.haomeiwen.com/subject/vhvtxxtx.html