Sobes.tech
Middle

Wat is ItemDecoration en hoe wordt het gebruikt in Android?

sobes.tech AI

Antwoord van AI

ItemDecoration wordt gebruikt om decoraties te tekenen rond individuele elementen van RecyclerView of over het hele canvas van RecyclerView.

Belangrijkste functies:

  • Scheiders tekenen tussen elementen (lijnen, marges).
  • Achtergronden of kaders tekenen voor de elementen.
  • Marges (padding) toevoegen rond de elementen zonder de layout-parameters van het element zelf te wijzigen.

Hoe te gebruiken:

  1. Maak een klasse die erft van RecyclerView.ItemDecoration.
  2. Overschrijf de benodigde methoden:
    • onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) voor het tekenen van decoraties onder de elementen.
    • onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) voor het tekenen van decoraties boven de elementen.
    • getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) voor het toevoegen van marges aan de randen van het element.
  3. Maak een instantie van de klasse ItemDecoration.
  4. Voeg deze toe aan RecyclerView met addItemDecoration(ItemDecoration decoration).

Voorbeeld van gebruik van getItemOffsets om een marge toe te voegen:

class SpaceItemDecoration(private val spaceHeight: Int) : RecyclerView.ItemDecoration() {
    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
        with(outRect) {
            if (parent.getChildAdapterPosition(view) == 0) {
                top = spaceHeight // marge bovenaan alleen voor het eerste element
            }
            left =  spaceHeight
            right = spaceHeight
            bottom = spaceHeight
        }
    }
}

// In de code waar RecyclerView wordt ingesteld:
// val recyclerView = findViewById<RecyclerView>(R.id.my_recycler_view)
// recyclerView.addItemDecoration(SpaceItemDecoration(resources.getDimensionPixelSize(R.dimen.item_space)))

Voorbeeld van gebruik van onDraw om een scheiding te tekenen:

class DividerItemDecoration(private val dividerHeight: Int, private val dividerColor: Int) : RecyclerView.ItemDecoration() {
    private val paint = Paint().apply {
        color = dividerColor
        style = Paint.Style.FILL
    }

    override fun onDraw(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        val left = parent.paddingLeft
        val right = parent.width - parent.paddingRight

        for (i in 0 until parent.childCount - 1) { // itereren tot de voorlaatste
            val child = parent.getChildAt(i)
            val top = child.bottom
            val bottom = top + dividerHeight
            canvas.drawRect(left.toFloat(), top.toFloat(), right.toFloat(), bottom.toFloat(), paint)
        }
    }

    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
        // ruimte toevoegen voor scheiding, tenzij het het laatste element is
        if (parent.getChildAdapterPosition(view) != parent.adapter?.itemCount?.minus(1)) {
            outRect.bottom = dividerHeight
        }
    }
}

// In de code waar RecyclerView wordt ingesteld:
// val recyclerView = findViewById<RecyclerView>(R.id.my_recycler_view)
// recyclerView.addItemDecoration(DividerItemDecoration(resources.getDimensionPixelSize(R.dimen.divider_height), ContextCompat.getColor(this, R.color.divider_color)))

Het is belangrijk te begrijpen dat ItemDecoration de afmetingen of de layout van de elementen zelf niet wijzigt, maar alleen de weergave en marges eromheen beïnvloedt.