RecyclerViewで区切り線をカスタムする。

はじめに

RecyclerViewのアイテムごとの区切り線をカスタムします。
この記事で分かることは以下の3点です。

• 区切り線の幅(大きさ)を変更する。
• 区切り線の個数を決める。

実装

1.ItemDecoration()を継承したクラスを作成

class MyDecoration(): RecyclerView.ItemDecoration() {}

2.onDraw

• onDrawで描画されるコンテンツは各リサイクラービューのアイテムが描画される前に描画されます。
• ※描画のたびに呼ばれるため重たい処理はしないほうがよさそうです。

override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
    
    //描画するアイテムの色などを適当に決めてください。
    private bval paint = Paint().apply { color = Color.BLACK }
    
    //一番下のアイテムの下側のデコレーションはいらないので -1 とする
    val childCount = parent.childCount - 1;

    (0.until(childCount)).forEach { i ->
        val child = parent.getChildAt(i);
　　　　　
        //両端の幅を20pxずつ削ります。
        val left = parent.left + 20
        val right = parent.right - 20
                                   
 　　　　//自身のbottomから1pxの太さとします。
        val top = child.bottom
        val bottom = child.bottom+1
       
　　　　　c.drawRect(Rect(left, top, right, bottom), paint)
    }
    
    
}

3.その他

getItemOffsets

• 各アイテムにオフセット(余白)を付与できます。

override fun getItemOffsets() {
    super.getItemOffsets(outRect, view, parent, state)
    //上下に10pxの余白を付ける
    outRect.bottom = 10
    outRect.top = 10
}

参考

RecyclerView.LayoutMangerとRecyclerView.ItemDecoration