Di Compose, Anda dapat menggabungkan beberapa pengubah untuk mengubah tampilan dan nuansa composable. Rantai pengubah ini dapat memengaruhi batasan yang diteruskan ke composable, yang menentukan batas lebar dan tinggi.
Halaman ini menjelaskan cara pengubah berantai memengaruhi batasan dan, pada akhirnya, pengukuran dan penempatan composable.
Pengubah di hierarki UI
Untuk memahami pengaruh pengubah satu sama lain, sebaiknya visualisasikan tampilannya di hierarki UI, yang dihasilkan selama fase komposisi. Untuk mengetahui informasi selengkapnya, lihat bagian Komposisi.
Dalam hierarki UI, Anda dapat memvisualisasikan pengubah sebagai node wrapper untuk node tata letak:
Menambahkan lebih dari satu pengubah ke composable akan membuat rantai pengubah. Saat
Anda merangkai beberapa pengubah, setiap node pengubah akan menggabungkan sisa rantai
dan node tata letak di dalamnya. Misalnya, saat Anda merangkai clip
dan
pengubah size
, node pengubah clip
akan menggabungkan node pengubah size
,
yang kemudian menggabungkan node tata letak Image
.
Pada fase tata letak, algoritma yang berjalan pada hierarki tetap sama, tetapi setiap node pengubah juga akan dikunjungi. Dengan cara ini, pengubah dapat mengubah persyaratan ukuran dan penempatan pengubah atau node tata letak yang digabungkan.
Seperti yang ditunjukkan pada Gambar 2, penerapan composable Image
dan Text
sendiri terdiri dari rantai pengubah yang menggabungkan satu node tata letak. Implementasi
Row
dan Column
hanyalah node tata letak yang menjelaskan cara
membuat tata letak turunannya.
Ringkasnya:
- Pengubah menggabungkan satu pengubah atau node tata letak.
- Node tata letak dapat menata letak beberapa node turunan.
Bagian berikut menjelaskan cara menggunakan model mental ini untuk menjelaskan rantai pengubah dan pengaruhnya terhadap ukuran composable.
Batasan dalam fase tata letak
Fase tata letak mengikuti algoritma tiga langkah untuk menemukan setiap lebar, tinggi, dan koordinat x, y node tata letak:
- Mengukur turunan: Node mengukur turunannya, jika ada.
- Menentukan ukuran sendiri: Berdasarkan pengukuran tersebut, node memutuskan ukurannya sendiri.
- Tempatkan turunan: Setiap node turunan ditempatkan sesuai dengan posisi node itu sendiri.
Constraints
membantu menemukan ukuran yang tepat untuk node selama dua langkah
pertama algoritme. Batasan menentukan batas minimum dan maksimum untuk
lebar dan tinggi node. Ketika node memutuskan ukurannya, ukuran terukurnya
harus berada dalam rentang ukuran ini.
Jenis batasan
Batasan bisa berupa salah satu dari hal berikut:
- Terikat: Node memiliki lebar dan tinggi maksimum dan minimum.
- Tidak dibatasi: Node tidak dibatasi ke ukuran apa pun. Batas lebar dan tinggi maksimum ditetapkan ke tak terbatas.
- Persis: Node diminta untuk mengikuti persyaratan ukuran yang tepat. Batas minimum dan maksimum ditetapkan ke nilai yang sama.
- Kombinasi: Node mengikuti kombinasi dari jenis batasan di atas. Misalnya, batasan dapat membatasi lebar sekaligus mengizinkan tinggi maksimum tanpa batas, atau menetapkan lebar yang tepat, tetapi memberikan tinggi terbatas.
Bagian berikutnya menjelaskan cara batasan ini diteruskan dari induk ke turunan.
Cara batasan diteruskan dari induk ke turunan
Selama langkah pertama algoritme yang dijelaskan dalam Batasan dalam fase tata letak, batasan diturunkan dari induk ke turunan dalam hierarki UI.
Saat mengukur turunannya, node induk akan memberikan batasan ini kepada setiap turunannya agar mereka mengetahui seberapa besar atau kecil ukuran yang diperbolehkan. Kemudian, saat menentukan ukurannya sendiri, model juga mematuhi batasan yang diteruskan oleh induknya sendiri.
Pada tingkat tinggi, algoritma bekerja dengan cara berikut:
- Untuk menentukan ukuran yang benar-benar ingin diisi, node root dalam hierarki UI mengukur turunannya dan meneruskan batasan yang sama ke turunan pertamanya.
- Jika turunan adalah pengubah yang tidak memengaruhi pengukuran, turunan akan meneruskan batasan ke pengubah berikutnya. Batasan diteruskan ke rantai pengubah apa adanya kecuali pengubah yang memengaruhi pengukuran tercapai. Selanjutnya, batasan tersebut akan diubah ukurannya.
- Setelah node tercapai yang tidak memiliki turunan (disebut sebagai "node daun"), node ini memutuskan ukurannya berdasarkan batasan yang diteruskan, dan menampilkan ukuran yang telah di-resolve ini ke induknya.
- Induk menyesuaikan batasannya berdasarkan pengukuran turunan ini, dan memanggil turunan berikutnya dengan batasan yang disesuaikan ini.
- Setelah semua turunan induk diukur, node induk memutuskan ukurannya sendiri dan mengomunikasikannya ke induknya.
- Dengan cara ini, seluruh pohon akan dilintasi lebih dulu. Akhirnya, semua node telah menentukan ukurannya, dan langkah pengukuran selesai.
Untuk contoh yang lebih mendalam, lihat video Batasan dan urutan pengubah.
Pengubah yang memengaruhi batasan
Anda telah mempelajari di bagian sebelumnya bahwa beberapa pengubah dapat memengaruhi ukuran batasan. Bagian berikut menjelaskan pengubah tertentu yang memengaruhi batasan.
Pengubah size
Pengubah size
mendeklarasikan ukuran konten yang diinginkan.
Misalnya, hierarki UI berikut harus dirender dalam penampung 300dp
oleh 200dp
. Batasannya dibatasi, yang mengizinkan lebar antara 100dp
dan
300dp
, serta tinggi antara 100dp
dan 200dp
:
Pengubah size
menyesuaikan batasan yang masuk agar cocok dengan nilai yang diteruskan ke pengubah tersebut.
Dalam contoh ini, nilainya adalah 150dp
:
Jika lebar dan tinggi lebih kecil dari batasan terkecil yang dibatasi, atau lebih besar dari batas batasan terbesar, pengubah akan mencocokkan dengan batasan yang diteruskan sedekat mungkin sambil tetap mematuhi batasan yang diteruskan dalam:
Perhatikan bahwa membuat rantai beberapa pengubah size
tidak berfungsi. Pengubah size
pertama menetapkan batasan minimum dan maksimum ke nilai tetap. Meskipun
pengubah ukuran kedua meminta ukuran yang lebih kecil atau lebih besar, pengubah tetap harus
mematuhi batas persis yang diteruskan sehingga tidak akan mengganti nilai tersebut:
Pengubah requiredSize
Gunakan pengubah requiredSize
, bukan size
jika Anda memerlukan
node untuk mengganti batasan yang masuk. Pengubah requiredSize
menggantikan
batasan yang masuk dan meneruskan ukuran yang Anda tentukan sebagai batas yang tepat.
Ketika ukuran diteruskan kembali ke hierarki, node turunan akan dipusatkan di ruang yang tersedia:
Pengubah width
dan height
Pengubah size
menyesuaikan lebar dan tinggi batasan. Dengan
pengubah width
, Anda dapat menetapkan lebar tetap, tetapi tingginya tidak ditentukan.
Demikian pula, dengan pengubah height
, Anda dapat menetapkan tinggi tetap, tetapi
lebarnya tidak ditentukan:
Pengubah sizeIn
Pengubah sizeIn
memungkinkan Anda menetapkan batasan minimum dan maksimum yang tepat
untuk lebar dan tinggi. Gunakan pengubah sizeIn
jika Anda memerlukan kontrol mendetail
atas batasan.
Contoh
Bagian ini menampilkan dan menjelaskan output dari beberapa cuplikan kode dengan pengubah berantai.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
Cuplikan ini menghasilkan output berikut:
- Pengubah
fillMaxSize
mengubah batasan untuk menetapkan lebar dan tinggi minimum ke nilai maksimum — lebar300dp
dan tinggi200dp
. - Meskipun pengubah
size
ingin menggunakan ukuran50dp
, pengubah tersebut masih harus mematuhi batasan minimum yang masuk. Jadi, pengubahsize
juga akan menghasilkan batas batasan yang tepat, yaitu300
sebanyak200
, sehingga secara efektif mengabaikan nilai yang diberikan dalam pengubahsize
. Image
mengikuti batas ini dan melaporkan ukuran300
oleh200
, yang diteruskan ke atas hingga hierarki.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
Cuplikan ini menghasilkan output berikut:
- Pengubah
fillMaxSize
menyesuaikan batasan untuk menetapkan lebar dan tinggi minimum ke nilai maksimum — lebar300dp
dan tinggi200dp
. - Pengubah
wrapContentSize
mereset batasan minimum. Jadi, meskipunfillMaxSize
menghasilkan batasan tetap,wrapContentSize
meresetnya kembali ke batasan terikat. Node berikut kini dapat menggunakan kembali seluruh ruang, atau menjadi lebih kecil dari seluruh ruang. - Pengubah
size
menetapkan batasan ke batas minimum dan maksimum50
. Image
me-resolve ke ukuran50
sebesar50
, dan pengubahsize
meneruskannya.- Pengubah
wrapContentSize
memiliki properti khusus. Fungsi ini mengambil turunannya dan menempatkannya di tengah batas minimum yang tersedia yang diteruskan ke sana. Ukuran yang dikomunikasikan kepada induknya sama dengan batas minimum yang diteruskan ke dalamnya.
Dengan menggabungkan hanya tiga pengubah, Anda dapat menentukan ukuran composable dan memusatkannya di induknya.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .clip(CircleShape) .padding(10.dp) .size(100.dp) )
Cuplikan ini menghasilkan output berikut:
- Pengubah
clip
tidak mengubah batasan.- Pengubah
padding
menurunkan batasan maksimum. - Pengubah
size
menetapkan semua batasan ke100dp
. Image
mematuhi batasan tersebut dan melaporkan ukuran100
berdasarkan100dp
.- Pengubah
padding
menambahkan10dp
di semua ukuran, sehingga meningkatkan lebar dan tinggi yang dilaporkan sebesar20dp
. - Sekarang dalam fase menggambar, pengubah
clip
berfungsi pada kanvas120
dengan120dp
. Dengan demikian, model ini akan membuat mask lingkaran dengan ukuran tersebut. - Pengubah
padding
kemudian menyisipkan kontennya sebesar10dp
pada semua ukuran, sehingga akan menurunkan ukuran kanvas menjadi100
sebesar100dp
. Image
digambar di kanvas tersebut. Gambar dipotong berdasarkan lingkaran asli120dp
, sehingga outputnya adalah hasil non-bulat.
- Pengubah