Di Compose, Anda dapat menggabungkan beberapa pengubah untuk mengubah tampilan dan dari composable. Rantai pengubah ini dapat memengaruhi batasan yang diteruskan ke composable, yang menentukan batas lebar dan tinggi.
Halaman ini menjelaskan bagaimana pengubah berantai memengaruhi batasan dan, pada gilirannya, pengukuran dan penempatan composable.
Pengubah di hierarki UI
Untuk memahami bagaimana pengubah saling mempengaruhi, sebaiknya visualisasikan bagaimana akan muncul di hierarki UI, yang dihasilkan selama fase komposisi. Sebagai mengetahui informasi selengkapnya, lihat bagian Komposisi.
Pada hierarki UI, Anda dapat memvisualisasikan pengubah sebagai node wrapper untuk tata letak node:
![Kode untuk composable dan pengubah, serta representasi visualnya sebagai hierarki UI.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/modifier-wrapping.png?authuser=9&hl=id)
Menambahkan lebih dari satu pengubah ke composable akan membuat rantai pengubah. Kapan
Anda merangkai beberapa pengubah, setiap node pengubah menggabungkan sisa rantai
dan node tata letak di dalamnya. Misalnya, saat Anda membuat rantai clip
dan
Pengubah size
, node pengubah clip
menggabungkan node pengubah size
,
yang kemudian menggabungkan node tata letak Image
.
Dalam fase tata letak, algoritma yang berjalan pada hierarki tetap sama, tetapi setiap node pengubah juga dikunjungi. Dengan cara ini, pengubah dapat mengubah ukuran persyaratan dan penempatan node pengubah atau tata letak yang digabungkannya.
Seperti yang ditunjukkan dalam Gambar 2, implementasi composable Image
dan Text
sendiri terdiri dari rantai pengubah yang menggabungkan satu node tata letak. Tujuan
implementasi Row
dan Column
hanyalah node tata letak yang menjelaskan cara
untuk mengatur tata letak anak-anak mereka.
![Struktur pohon dari penggunaan sebelumnya, tetapi sekarang setiap node hanyalah tata letak sederhana, dengan banyak pengubah yang menggabungkan node di sekitarnya.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/composables-modifiers.png?authuser=9&hl=id)
Ringkasnya:
- Pengubah menggabungkan satu pengubah atau node tata letak.
- Node tata letak dapat menata letak beberapa node turunan.
Bagian berikut menjelaskan bagaimana menggunakan model mental ini untuk berpikir tentang perantaian pengubah dan pengaruhnya terhadap ukuran composable.
Batasan dalam fase tata letak
Fase tata letak mengikuti algoritma tiga langkah untuk menemukan setiap tata letak lebar, tinggi, serta koordinat x, y dari node:
- Mengukur turunan: Node mengukur turunannya, jika ada.
- Menentukan ukuran sendiri: Berdasarkan pengukuran tersebut, node memutuskan sendiri ukuran.
- Turunan tempat: Setiap node turunan ditempatkan relatif terhadap node sendiri posisi Anda.
Constraints
membantu menemukan ukuran yang tepat untuk node selama dua node pertama
langkah-langkah algoritma. {i>Contraints<i} menentukan batas minimum dan maksimum untuk
untuk lebar dan tinggi node. Saat node memutuskan ukurannya, ukuran yang diukurnya
harus berada
dalam rentang ukuran ini.
Jenis-jenis batasan
Batasan dapat berupa salah satu dari hal berikut:
- Berbatas: Node memiliki lebar dan tinggi maksimum dan minimum.
![Batasan berbatas dari berbagai ukuran dalam satu container.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/bounded-constraints.png?authuser=9&hl=id)
- Tidak dibatasi: Node tidak dibatasi dalam ukuran apa pun. Lebar maksimum dan batas tinggi ditetapkan ke tak terhingga.
![Batasan tak terbatas yang memiliki lebar dan tinggi yang ditetapkan ke tak terhingga. Batasan melampaui container.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/unbounded-constraints.png?authuser=9&hl=id)
- Persis: Node diminta untuk mengikuti persyaratan ukuran yang tepat. Minimum dan batas maksimum ditetapkan ke nilai yang sama.
![Batasan persis yang sesuai dengan persyaratan ukuran yang tepat dalam penampung.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/exact-constraints.png?authuser=9&hl=id)
- Kombinasi: Node mengikuti kombinasi jenis batasan di atas. Misalnya, batasan bisa membatasi lebar sekaligus memungkinkan tinggi maksimum tidak terbatas, atau menetapkan lebar yang tepat, tetapi memberikan tinggi terbatas.
![Dua penampung yang menampilkan kombinasi batasan terbatas dan tidak terbatas serta lebar dan tinggi yang tepat.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/combination-constraints.png?authuser=9&hl=id)
Bagian berikutnya akan menjelaskan cara batasan ini diteruskan dari induk ke anak.
Cara penerusan batasan dari induk ke turunan
Selama langkah pertama algoritma yang dijelaskan di Batasan dalam tata letak , batasan diturunkan dari induk ke turunan dalam hierarki UI.
Saat node induk mengukur turunannya, node tersebut memberikan batasan ini untuk setiap anak untuk memberi tahu mereka seberapa besar atau kecil yang diizinkan untuk mereka. Kemudian, ketika menentukan ukurannya sendiri, model tersebut juga mengikuti batasan yang diberikan oleh orang tuanya sendiri.
Pada level tinggi, algoritma bekerja dengan cara berikut:
- Untuk menentukan ukuran yang benar-benar ingin ditempati, node root di hierarki UI mengukur turunannya dan meneruskan batasan yang sama ke turunan pertamanya.
- Jika turunan adalah pengubah yang tidak memengaruhi pengukuran, maka akan meneruskan ke pengubah berikutnya. Batasan diturunkan dari pengubah rantai apa adanya kecuali jika pengubah yang memengaruhi pengukuran tercapai. Tujuan batasan tersebut kemudian diukur dan disesuaikan ukurannya.
- Setelah node yang tidak memiliki turunan tercapai (disebut sebagai "leaf" "), node ini memutuskan ukurannya berdasarkan batasan yang diteruskan, dan mengembalikan ukuran yang di-resolve ini ke induknya.
- Induk menyesuaikan batasannya berdasarkan pengukuran turunan ini, dan memanggil turunan berikutnya dengan batasan yang disesuaikan ini.
- Setelah semua turunan dari induk diukur, node induk akan memutuskan ukurannya sendiri dan mengomunikasikannya kepada induknya.
- Dengan cara ini, seluruh pohon akan dilalui kedalaman terlebih dahulu. Akhirnya, semua {i>node<i} telah memutuskan ukurannya, dan langkah pengukuran selesai.
Untuk contoh yang lebih mendalam, lihat Batasan dan urutan pengubah video Anda.
Pengubah yang memengaruhi batasan
Anda telah mempelajari di bagian sebelumnya bahwa beberapa pengubah dapat memengaruhi batasan ukuran. Bagian berikut menjelaskan pengubah khusus yang memengaruhi batasan data.
Pengubah size
Pengubah size
mendeklarasikan ukuran konten yang diinginkan.
Misalnya, hierarki UI berikut harus dirender dalam penampung 300dp
paling lambat 200dp
. Batasan dibatasi, sehingga lebar antara 100dp
dan
300dp
, dan tinggi antara 100dp
dan 200dp
:
![Bagian dari hierarki UI dengan pengubah ukuran yang menggabungkan node tata letak, dan
representasi dari batasan terbatas yang ditetapkan oleh pengubah ukuran dalam penampung.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier.png?authuser=9&hl=id)
Pengubah size
menyesuaikan batasan masuk agar cocok dengan nilai yang diteruskan ke nilai tersebut.
Dalam contoh ini, nilainya adalah 150dp
:
![Sama seperti Gambar 7, kecuali dengan pengubah ukuran yang menyesuaikan batasan masuk agar sesuai dengan nilai yang diteruskan ke nilai.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-2.png?authuser=9&hl=id)
size
menyesuaikan batasan ke 150dp
.Jika lebar dan tinggi lebih kecil dari batas batasan terkecil, atau lebih besar dari batas batasan terbesar, pengubah akan cocok dengan parameter yang mungkin dibatasi sambil tetap mematuhi batasan yang dalam:
![Dua hierarki UI dan representasinya yang sesuai dalam container. Pada langkah pertama,
pengubah ukuran menerima batasan penyertaan; Dalam tampilan kedua, pengubah ukuran akan menyesuaikan dengan
yang terlalu besar semirip mungkin, sehingga menghasilkan batasan yang mengisi container.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-3.png?authuser=9&hl=id)
size
yang mengikuti batasan yang diteruskan hampir
sebaik mungkin.Perhatikan bahwa membuat rantai beberapa pengubah size
tidak akan berfungsi. size
pertama
pengubah menetapkan batasan minimum dan maksimum ke nilai tetap. Meskipun jika
pengubah ukuran kedua meminta ukuran yang lebih kecil atau lebih besar, pengubah tetap harus
mematuhi batas yang tepat yang diteruskan, sehingga tidak akan mengganti nilai tersebut:
![Rantai dua pengubah ukuran di hierarki UI dan representasinya dalam penampung,
yang merupakan hasil dari nilai pertama
yang diteruskan dan bukan nilai kedua.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-4.png?authuser=9&hl=id)
size
, tempat nilai kedua diteruskan
di (50dp
) tidak menggantikan nilai pertama (100dp
).Pengubah requiredSize
Gunakan pengubah requiredSize
, bukan size
, jika Anda memerlukan
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 pohon, node turunan akan dipusatkan ruang yang tersedia:
![Ukuran dan pengubah requiredSize dirantai dalam hierarki UI, dan atribut
di dalam container. Batasan pengubah requiredSize mengganti pengubah ukuran
batasan data.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/requiredsize-modifier.png?authuser=9&hl=id)
requiredSize
menggantikan batasan yang masuk dari
pengubah size
.Pengubah width
dan height
Pengubah size
menyesuaikan lebar dan tinggi batasan. Dengan
pengubah width
, Anda dapat menetapkan lebar tetap, tetapi tidak menentukan tingginya.
Demikian pula, dengan pengubah height
, Anda dapat menyetel tinggi tetap, tetapi membiarkan
lebar belum ditentukan:
![Dua hierarki UI, satu dengan pengubah lebar dan representasi container-nya, dan yang lain
dengan pengubah tinggi dan representasinya.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/width-height-modifier.png?authuser=9&hl=id)
width
dan pengubah height
menyetel lebar tetap
dan tingginya.Pengubah sizeIn
Pengubah sizeIn
memungkinkan Anda menetapkan batasan minimum dan maksimum yang tepat
untuk lebar dan tinggi. Gunakan pengubah sizeIn
jika Anda memerlukan kontrol yang lebih mendetail
melampaui batasan.
![Hierarki UI dengan pengubah sizeIn dengan lebar dan tinggi minimum dan maksimum yang ditetapkan,
dan representasinya di dalam container.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/sizein-modifier.png?authuser=9&hl=id)
sizeIn
dengan minWidth
, maxWidth
, minHeight
, dan
maxHeight
siap.Contoh
Bagian ini menunjukkan dan menjelaskan {i>output<i} 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 hingga nilai maksimum — lebar300dp
dan200dp
tingginya. - Meskipun ingin menggunakan ukuran
50dp
, pengubahsize
tetap memerlukan untuk mematuhi batasan minimum yang masuk. Jadi, pengubahsize
akan juga menghasilkan batas batasan yang tepat dari300
oleh200
, yang secara efektif mengabaikan nilai yang diberikan dalam pengubahsize
. Image
mengikuti batas ini dan melaporkan ukuran300
kali200
, yang dilewati jauh di atas pohon.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
Cuplikan ini menghasilkan output berikut:
- Pengubah
fillMaxSize
menyesuaikan batasan untuk menetapkan nilai minimum lebar dan tinggi hingga nilai maksimum — lebar300dp
dan200dp
inci tinggi. - Pengubah
wrapContentSize
mereset batasan minimum. Jadi, meskipunfillMaxSize
menghasilkan batasan tetap,wrapContentSize
meresetnya kembali ke batasan terbatas. Node berikut sekarang dapat menggunakan seluruh ruang penyimpanan lagi, atau lebih kecil dari keseluruhan ruang. - Pengubah
size
menetapkan batasan ke batas minimum dan maksimum50
. Image
me-resolve ke ukuran50
x50
, dan pengubahsize
meneruskannya.- Pengubah
wrapContentSize
memiliki properti khusus. Dibutuhkan dan menempatkannya di tengah batas minimum yang tersedia yang yang diteruskan ke subnet tersebut. Dengan demikian, ukuran yang dikomunikasikan kepada induknya sama dengan batas minimum yang diteruskan ke dalamnya.
Dengan hanya menggabungkan tiga pengubah, Anda dapat menentukan ukuran untuk 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
dengan100dp
.- Pengubah
padding
menambahkan10dp
di semua ukuran, sehingga meningkatkan lebar dan tinggi sebanyak20dp
. - Sekarang dalam fase menggambar, pengubah
clip
bertindak pada kanvas120
dengan120dp
. Jadi, fungsi membuat mask lingkaran dengan ukuran tersebut. - Kemudian, pengubah
padding
menyisipkan kontennya dengan10dp
di semua ukuran, sehingga menurunkan ukuran kanvas menjadi100
sebesar100dp
. Image
digambar dalam kanvas tersebut. Gambar ini diklip berdasarkan lingkaran asli120dp
sehingga output-nya adalah hasil non-bulat.
- Pengubah