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萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章