RecyclerView系列之二:添加分隔线

在上一篇RecyclerView系列之一:实现常见的ListView效果简单介绍了使用RecyclerView如何实现ListView的效果,但是我们也发现了,效果图中没有分隔线,今天将介绍如何为RecyclerView添加分隔线.

一、如何添加分隔线

嗯,首先有两种比较low的方式:
1、为item布局设置一个背景色,再为item根标签设置一个margin或者padding,这样就形成了分隔线的效果.
2、在Item布局文件最后加一条横线,为它设置一个背景色,形成分隔线的效果.

然后就是正式的写法了:
3、RecyclerView中可以通过addItemDecoration()方法添加分割线, 该方法的参数为RecyclerView.ItemDecoration,该类为抽象类,官方目前只提供了一个实现类DividerItemDecoration.

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private LinearLayoutManager layoutManager;
    private MainAdapter mAdapter;
    private List<String> mDatas;
    private DividerItemDecoration mDivider;//分隔线

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initData();
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        layoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
        mRecyclerView.setLayoutManager(layoutManager);

        //初始化分隔线、添加分隔线
        mDivider = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL);
        mRecyclerView.addItemDecoration(mDivider);

        mAdapter = new MainAdapter(this,mDatas);
        mRecyclerView.setAdapter(mAdapter);
    }

    private void initData() {
        mDatas = new ArrayList<>();
        for (int i = 'A'; i < 'Z'; i++) {
            mDatas.add("" + (char) i);
        }
    }
}

现在我们再来看一下效果图:


看起来还行,但是万一这种效果不是我们需要的怎么办?所以我们应该知道RecyclerView是如何画出分隔线的

二、抽象类RecyclerView.ItemDecoration源码

 public static abstract class ItemDecoration {
       
        public void onDraw(Canvas c, RecyclerView parent, State state) {
            onDraw(c, parent);
        }
        @Deprecated
        public void onDraw(Canvas c, RecyclerView parent) {
        }

        public void onDrawOver(Canvas c, RecyclerView parent, State state) {
            onDrawOver(c, parent);
        }
        @Deprecated
        public void onDrawOver(Canvas c, RecyclerView parent) {
        }


        @Deprecated
        public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
            outRect.set(0, 0, 0, 0);
        }
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
            getItemOffsets(outRect, ((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(),
                    parent);
        }
    }

当我们调用addItemDecoration()方法添加decoration的时候,RecyclerView就会调用该类的onDraw方法去绘制分隔线,也就是说:分隔线是绘制出来的. 下面来了解分隔线是如何绘制出来的.

三、理解分隔线是如何绘制的

系统默认实现类DividerItemDecoration涉及到clipToPadding属性、画布的裁剪一些知识,不太容易理解,也不方便修改,这里介绍网上通用的实现.
首先要理解一个概念:分隔线本质是一个矩形,这个“线”是有长度和宽度的.

/**
* 默认分隔线实现类只支持布局管理器为 LinearLayoutManager
*/
public class CommonItemDecoration extends RecyclerView.ItemDecoration {
    public static final int HORIZONTAL = LinearLayout.HORIZONTAL;
    public static final int VERTICAL = LinearLayout.VERTICAL;

    //使用系统主题中的R.attr.listDivider作为Item间的分割线
    private static final int[] ATTRS = new int[]{ android.R.attr.listDivider};

    private Drawable mDivider;

    private int mOrientation;//布局方向,决定绘制水平分隔线还是竖直分隔线

    private final Rect mBounds = new Rect();


    public CommonItemDecoration (Context context, int orientation) {
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
        setOrientation(orientation);
    }

    public void setOrientation(int orientation) {
        if (orientation != HORIZONTAL && orientation != VERTICAL) {
            throw new IllegalArgumentException(
                    "Invalid orientation. It should be either HORIZONTAL or VERTICAL");
        }
        mOrientation = orientation;
    }

    /**
     * 一个app中分隔线不可能完全一样,你可以通过这个方法传递一个Drawable 对象来定制分隔线
     */
    public void setDrawable(@NonNull Drawable drawable) {
        if (drawable == null) {
            throw new IllegalArgumentException("Drawable cannot be null.");
        }
        mDivider = drawable;
    }

    /**
     * 画分隔线
     */
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if (parent.getLayoutManager() == null) {
            return;
        }
        if (mOrientation == VERTICAL) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }

    /**
     * 在LinearLayoutManager方向为Vertical时,画分隔线
     */
    public void drawVertical(Canvas canvas, RecyclerView parent) {
        final int left = parent.getPaddingLeft();//★分隔线的左边 = paddingLeft值
        final int right = parent.getWidth() - parent.getPaddingRight();//★分隔线的右边 = RecyclerView 宽度-paddingRight值
//分隔线不在RecyclerView的padding那一部分绘制

        final int childCount = parent.getChildCount();//★分隔线数量=item数量
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);//确定是第几个item
            final RecyclerView.LayoutParams params =(RecyclerView.LayoutParams) child.getLayoutParams();
            final int top = child.getBottom() + params.bottomMargin;//★分隔线的上边 = item的底部 + item根标签的bottomMargin值 
            final int bottom = top + mDivider.getIntrinsicHeight();//★分隔线的下边 = 分隔线的上边 + 分隔线本身高度
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(canvas);
        }
    }


    /**
     * 在LinearLayoutManager方向为Horizontal时,画分隔线
     *      理解了上面drawVertical()方法这个方法也就理解了
     */
    public void drawHorizontal(Canvas canvas, RecyclerView parent) {
        final int top = parent.getPaddingTop();
        final int bottom = parent.getHeight() - parent.getPaddingBottom();

        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
            final int left = child.getRight() + params.rightMargin;
            final int right = left + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(canvas);
        }
    }

    /**
     *  获取Item偏移量
     *    此方法是为每个Item四周预留出空间,从而让分隔线的绘制在预留的空间内
     */
   @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
            RecyclerView.State state) {
        if (mOrientation == VERTICAL) {//竖直方向的分隔线:item向下偏移一个分隔线的高度
            outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
        } else {//水平方向的分隔线:item向右偏移一个分隔线的宽度
            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
        }
    }
}

四、更改分隔线的样式

DividerItemDecoration画的分割线是读取系统的属性android.R.attr.listDivider,使用系统的listDivider好处就是就是方便我们去随意的分隔线的样式

1、找到res/values/styles.xml,在其中声明android:listDivider属性,然后使用我们自己的样式
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:listDivider">@drawable/my_divider</item>
    </style>
</resources>
2、在res/drawable目录下声明我们自己的样式my_divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <gradient
        android:centerColor="#ff00ff"
        android:endColor="#00ff00"
        android:startColor="#0000ff"
        android:type="linear" />
    <size android:height="4dp"/>
</shape>

再来看一下效果图


3、当然,这样一修改就改变整个app中的分隔线效果了,如果只是想改变某个列表中的分隔线效果,完全可以通过分隔线的setDrawable方法来修改
mDivider = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL);
mDivider.setDrawable(getResources().getDrawable(R.drawable.my_divider));
mRecyclerView.addItemDecoration(mDivider);

这样一来,不同的列表就可以使用不同的分隔线效果了.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容