onLayout(): apa itu, algoritma penempatan dan parameter metode

Apa itu onLayout()?

onLayout(boolean changed, int l, int t, int r, int b) — adalah metode protected dari kelas ViewGroup yang dipanggil oleh sistem untuk menempatkan View anak di dalam kontainer induk. Pengembang menimpa metode ini ketika membuat ViewGroup kustom dengan tata letak elemen yang tidak standar: bertingkat, grid, pola kotak-kotak, atau menurut koordinat sembarang. Setiap View anak menerima batas akhirnya melalui panggilan child.layout().

Parameter changed menunjukkan apakah posisi atau ukuran ViewGroup itu sendiri telah berubah sejak layout terakhir. Jika changed bernilai true, semua elemen anak kemungkinan juga perlu diposisikan ulang. Parameter l, t, r, b adalah koordinat sudut kiri atas dan kanan bawah ViewGroup dalam sistem koordinat induknya. Di dalam onLayout, pengembang menggunakan nilai-nilai ini sebagai koordinat awal untuk menempatkan anak.

ViewGroup — adalah satu-satunya kelas yang menimpa onLayout. View biasa (bukan ViewGroup) tidak memiliki elemen anak dan tidak memerlukan onLayout — penempatannya sendiri ditangani oleh kontainer induk. Bahkan jika View biasa menimpa onLayout, sistem tidak akan memanggilnya. Ini adalah perbedaan mendasar antara onLayout dan onMeasure, yang dipanggil untuk setiap View.

Alur eksekusi fase layout

Fase layout dimulai dengan pemanggilan metode publik layout(int l, int t, int r, int b) pada View akar. Metode ini menetapkan koordinat akhir View itu sendiri dan memanggil onLayout jika View adalah ViewGroup. Kemudian onLayout secara rekursif memanggil child.layout() untuk setiap elemen anak, dan proses berulang ke bawah hierarki. Dengan demikian, layout menyebar dari akar ke daun.

Sebelum pemanggilan onLayout, sistem memeriksa apakah ukuran View telah berubah dibandingkan siklus sebelumnya. Jika ukuran tidak berubah dan requestLayout tidak dipanggil, onLayout mungkin tidak dipanggil — sistem menggunakan hasil layout sebelumnya. Ini adalah optimasi yang mencegah perhitungan ulang posisi yang tidak perlu selama animasi atau scroll, ketika hanya konten yang berubah, bukan ukuran.

requestLayout() — adalah metode View yang memberi tahu sistem bahwa layout View sudah usang dan perlu dihitung ulang. Pemanggilan requestLayout menghasilkan siklus lengkap: pertama onMeasure dipanggil, kemudian onLayout, lalu onDraw. Berbeda dengan invalidate yang hanya memulai penggambaran ulang, requestLayout memulai perhitungan ulang lengkap ukuran dan posisi. Pemanggilan berlebihan requestLayout adalah penyebab umum masalah kinerja.

Parameter onLayout: l, t, r, b

l (left) — koordinat X tepi kiri ViewGroup dalam sistem koordinat induknya. t (top) — koordinat Y tepi atas. r (right) — koordinat X tepi kanan. b (bottom) — koordinat Y tepi bawah. Lebar ViewGroup dihitung sebagai r - l, tinggi sebagai b - t. Koordinat ini sudah mencakup semua padding ViewGroup itu sendiri.

Di dalam onLayout, pengembang memanggil child.layout(int childLeft, int childTop, int childRight, int childBottom) untuk setiap View anak. Koordinat yang diteruskan ke child.layout harus dalam sistem koordinat ViewGroup induk. Biasanya, childLeft dan childTop dihitung dengan mempertimbangkan padding induk: childLeft = l + paddingLeft + offsetX, childTop = t + paddingTop + offsetY.

Perhitungan koordinat untuk elemen anak

Koordinat anak dihitung dengan rumus: childLeft = l + paddingLeft + (marginLeft if present), childRight = childLeft + child.getMeasuredWidth(). Demikian pula untuk vertikal: childTop = t + paddingTop + (marginTop), childBottom = childTop + child.getMeasuredHeight(). Setelah keempat nilai ini dihitung, child.layout(childLeft, childTop, childRight, childBottom) dipanggil.

Contoh ViewGroup kustom dengan onLayout di Kotlin

Mari buat FlowLayout — ViewGroup kustom yang menempatkan View anak dalam baris, memindahkan elemen ke baris baru ketika baris saat ini penuh. Ini adalah analog Flexbox dengan wrap dalam satu bidang. onLayout mengiterasi semua View anak, menghitung posisi untuk masing-masing dan memanggil child.layout() dengan batas yang benar.

class FlowLayout(context: Context)
    : ViewGroup(context) {

    private val horizontalSpacing = 12
    private val verticalSpacing = 8

    override fun onMeasure(widthMeasureSpec: Int,
                       heightMeasureSpec: Int) {
        val parentWidth =
            MeasureSpec.getSize(widthMeasureSpec)
        var rowX = paddingLeft
        var rowY = paddingTop
        var maxRowHeight = 0

        for (i in 0 until childCount) {
            val child = getChildAt(i)
            measureChildWithMargins(child,
                widthMeasureSpec, 0,
                heightMeasureSpec, 0)

            if (rowX + child.measuredWidth >
                parentWidth - paddingRight) {
                rowX = paddingLeft
                rowY += maxRowHeight + verticalSpacing
                maxRowHeight = 0
            }

            rowX += child.measuredWidth +
                horizontalSpacing
            maxRowHeight = maxOf(maxRowHeight,
                child.measuredHeight)
        }

        val totalHeight = rowY + maxRowHeight +
            paddingBottom
        setMeasuredDimension(
            resolveSize(parentWidth, widthMeasureSpec),
            resolveSize(totalHeight, heightMeasureSpec))
    }

    override fun onLayout(changed: Boolean,
                       l: Int, t: Int,
                       r: Int, b: Int) {
        val parentWidth = r - l
        var rowX = paddingLeft
        var rowY = paddingTop
        var maxRowHeight = 0

        for (i in 0 until childCount) {
            val child = getChildAt(i)
            val cw = child.measuredWidth
            val ch = child.measuredHeight

            if (rowX + cw >
                parentWidth - paddingRight) {
                rowX = paddingLeft
                rowY += maxRowHeight + verticalSpacing
                maxRowHeight = 0
            }

            child.layout(rowX, rowY,
                rowX + cw, rowY + ch)
            rowX += cw + horizontalSpacing
            maxRowHeight =
                maxOf(maxRowHeight, ch)
        }
    }

    override fun generateLayoutParams(attrs: AttributeSet?)
        : LayoutParams =
        MarginLayoutParams(context, attrs)
}

Perbedaan antara onLayout dan onMeasure

onMeasure dan onLayout — adalah dua fase berurutan dalam siklus hidup View yang melakukan tugas yang secara fundamental berbeda. onMeasure menentukan ukuran yang diinginkan (measured) View, sementara onLayout menetapkan koordinat dan ukuran aktual (actual). Perbedaan utama: dalam onMeasure, ukuran bisa bersifat sementara dan nantinya dikoreksi oleh induk, sedangkan dalam onLayout, posisi akhir setiap View anak ditetapkan.

onMeasure dipanggil untuk setiap View, termasuk View daun (TextView, ImageView, Button). onLayout dipanggil hanya untuk ViewGroup. Ini dijelaskan oleh fakta bahwa penempatan adalah tanggung jawab kontainer induk, bukan View itu sendiri. View daun menerima posisinya melalui layout() yang dipanggil dari onLayout induk.

getMeasuredWidth() dan getMeasuredHeight() tersedia setelah onMeasure, sedangkan getWidth() dan getHeight() — hanya setelah onLayout. Jika Anda mengakses getWidth() di dalam onMeasure, nilai dari siklus sebelumnya atau nol akan dikembalikan. Oleh karena itu, untuk menghitung ukuran dalam onMeasure, gunakan MeasureSpec dan children secara berurutan.

Kesalahan umum saat bekerja dengan onLayout

Penempatan tanpa memperhitungkan padding — kesalahan pertama saat mengimplementasikan onLayout. Pengembang sering lupa menambahkan paddingLeft dan paddingTop induk ke koordinat awal View anak. Akibatnya, children ditampilkan di tepi ViewGroup, mengabaikan jarak yang ditetapkan melalui setPadding() atau di XML. Perhitungan yang benar: childLeft = paddingLeft + offsetX.

Pemanggilan layout untuk anak yang tidak terlihat — masalah umum kedua. Jika ViewGroup berisi View anak dengan visibility sama dengan GONE, mereka tidak perlu diposisikan — mereka tidak memakan tempat. Namun, onLayout harus menangani kasus ini dengan benar, melewatkan anak GONE. Untuk anak INVISIBLE, layout tetap harus dipanggil — mereka mempertahankan tempatnya meskipun tidak ditampilkan.

Mengabaikan parameter changed — kesalahan ketiga. Parameter changed menunjukkan apakah ukuran atau posisi ViewGroup telah berubah. Jika changed == false, koordinat yang di-cache dapat digunakan tanpa menghitung ulang layout semua elemen anak. Namun, caching layout secara penuh adalah tugas yang sulit dan sebagian besar implementasi onLayout cukup menghitung ulang semua elemen setiap kali. Ini dapat diterima untuk jumlah anak yang sedikit.