RecyclerView 進階文章 - ItemDecoration(範例 section ore group)

【Android】RecyclerView 進階文章 - ItemDecoration(範例 分隔線)

以下圖片 code來自https://github.com/thinkSky1206。

為RecyclerView添加分隔線

主頁面layout布局很基本的。

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/md_grey_300">  //設定灰色背景







    <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content">




        <android.support.v7.widget.Toolbar

            android:id="@+id/toolbar"

            android:layout_width="match_parent"

            android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary"

            app:layout_scrollFlags="scroll|enterAlways"/>




    </android.support.design.widget.AppBarLayout>




    <android.support.v7.widget.RecyclerView

        android:id="@+id/recycler_view"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>




</android.support.design.widget.CoordinatorLayout>

宣告class去繼承RecyclerView.ItemDecoration，改寫getItemOffsets方法

public class SimplePaddingDecoration extends RecyclerView.ItemDecoration {




    private int dividerHeight;







    public SimplePaddingDecoration(Context context) {

        Resource res = context.getResources();

        dividerHeight = res.getDimensionPixelSize(R.dimen.divider_height);

    }




    @Override

    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

        super.getItemOffsets(outRect, view, parent, state);

        outRect.bottom = dividerHeight;  //為itemView添加長度為dividerHeight的間隔(留白)

    }

}

使用自定義的itemDecoration

recyclerView.addItemDecoration(new SimplePaddingDecoration(this));

結果：

這樣就完成一個簡單的帶有分隔線的view。

缺點：

分隔線的顏色是因為背景色，若我們想分隔線和背景為不同顏色，此方法不可行。

public class SimpleDividerDecoration extends RecyclerView.ItemDecoration {



    private int dividerHeight;  //分隔線高度

    private Paint dividerPaint; //繪製分隔線的paint




    public SimpleDividerDecoration(Context context) {

        Resource res = context.getResources();

        dividerPaint = new Paint();

        dividerPaint.setColor(context.getResources().getColor(R.color.colorAccent));

        dividerHeight = res.getDimensionPixelSize(R.dimen.divider_height);

    }



    @Override

    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

        super.getItemOffsets(outRect, view, parent, state);

        outRect.bottom = dividerHeight;

    }




    @Override

    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {

        /**

         * childCount : 取得recycleView所擁有的itemView總數

         * left : RecyclerView 的左邊界加上 paddingLeft距離 後的坐標位置

         * right : RecyclerView 的右邊界減去 paddingRight 後的坐標位置

         */

        int childCount = parent.getChildCount();

        int left = parent.getPaddingLeft();

        int right = parent.getWidth() - parent.getPaddingRight();




        //

        for (int i = 0; i < childCount - 1; i++) {

            View view = parent.getChildAt(i);

            float top = view.getBottom();

            float bottom = view.getBottom() + dividerHeight;

            c.drawRect(left, top, right, bottom, dividerPaint);

        }

    }

}

結果：