1. 程式人生 > >Android元件RecyclerView新增分割線

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