Android组件RecyclerView添加分割线

一、利用背景颜色来绘制简单分割线:

   将RecyclerView的背景颜色设置为黑色(或其他跟adapter中颜色不一样的都可以),然后在adapter中的onBindViewHodler给item设置margin就能达到分割线的效果:

  

   RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) holder.itemView.getLayoutParams();
   params.topMargin = 2;
   holder.itemView.setLayoutParams(params);

二、利用ItemDicoration实现分割线,但其实也是利用背景颜色:

    类继承自ItemDicoration,覆写getItemOffsets():

   

public class MyDividerItemDecoration extends RecyclerView.ItemDecoration {
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        if (parent.getChildAdapterPosition(view) != 0) {
            outRect.top = 1;
        }
    }
}

先判断是否是第一个item,如果是则不设置margin,然后我们在activity添加上

rv.addItemDecoration(new MyDividerItemDecoration());

当然,还有一个更简单的方式,官方为我们提供了添加分割线的方法,只需要在activity中添加如下代码:

rv.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));

效果都是一样的,不过官方为我们提供的分割线可以更优雅的自定义分割线的样式
在drawable中新建一个xml
类型设置为shape:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <gradient
        android:centerColor="@color/colorPrimary"
        android:endColor="@color/colorPrimary"
        android:startColor="@color/colorPrimary"
        android:type="linear"/>
    <size android:height="2dp"/>
</shape>
然后在当前APP引用的style中添加如下属性
<item name="android:listDivider">@drawable/divider</item>
然后就大功告成了,效果图不贴了,有兴趣自己去试试吧
既然已经引出了ItemDecoration,那么就要好好介绍一下该类
官方的介绍是:An ItemDecoration allows the application to add a special drawing and layout offset to specific item views from the adapter’s data set. This can be useful for drawing dividers between items, highlights, visual grouping boundaries and more.
简单翻译一下,允许adapter设置特定的视图或偏移量。就是说可以自定义偏移量甚至是视图
那么我们来给每个item左边画个圆:

效果图

代码:

public class MyDividerItemDecoration extends RecyclerView.ItemDecoration {
    private Paint mPaint;
    private float mOffsetLeft;//距离左边的偏移量
    private float mOffsetTop;//距离顶端的偏移量
    private float radius;//圆的半径

public MyDividerItemDecoration(Context context) {
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setColor(Color.BLACK);
    mOffsetLeft = context.getResources().getDimension(R.dimen.offSetLeft);
    radius = context.getResources().getDimension(R.dimen.radius);
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    super.getItemOffsets(outRect, view, parent, state);
    if (parent.getChildAdapterPosition(view) != 0) {
        mOffsetTop = 1;
        outRect.top = 1;
    }
    outRect.left = (int) mOffsetLeft;
}

@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDraw(c, parent, state);
    int childCount = parent.getChildCount();
    for (int i = 0; i < childCount; i++) {
        View view = parent.getChildAt(i);
        int index = parent.getChildAdapterPosition(view);
        //y轴圆心必定是在高的中间,所以我们需要获取到top和bottom
        float left = view.getLeft();
        float bottom = view.getBottom();
        float top = view.getTop();
        if (i == 0) {
            top = mOffsetTop;
        }
        float cx = left / 2;
        float cy = top + (bottom - top) / 2;
        c.drawCircle(cx,cy,radius,mPaint);
    }
}

发布了53 篇原创文章 · 获赞 8 · 访问量 7万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章