Oluşturma'da birden çok değiştiriciyi bir araya getirerek görünümü ve hissi veriyor. Bu değiştirici zincirleri, iletilen kısıtlamaları etkileyebilir. composable'lara aktarıyor.
Bu sayfada zincirli değiştiricilerin kısıtlamaları nasıl etkilediği açıklanmaktadır. Bu da composable'ların ölçümü ve yerleştirilmesi.
Kullanıcı arayüzü ağacındaki değiştiriciler
Değiştiricilerin birbirlerini nasıl etkilediğini anlamak için bunlar beste aşamasında oluşturulan kullanıcı arayüzü ağacında görünür. Örneğin, daha fazla bilgi için Beste bölümüne bakın.
Kullanıcı arayüzü ağacında, değiştiricileri düzen için sarmalayıcı düğümleri olarak görselleştirebilirsiniz. düğümler:
![composable'ları ve değiştiricileri kodlama ve kullanıcı arayüzü ağacı olarak görsel temsilleri.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/modifier-wrapping.png?authuser=3&hl=tr)
Bir composable'a birden fazla değiştirici eklendiğinde bir değiştirici zinciri oluşturulur. Zaman
birden çok değiştirici zinciriniz varsa, her değiştirici düğüm zincirin geri kalanını sarmalar
ve içindeki düzen düğümünü bulun. Örneğin, bir clip
ve bir
size
değiştiricisi, clip
değiştiricisi düğüm, size
değiştirici düğümünü sarmalar.
Bu, Image
düzen düğümünü sarmalar.
Düzen aşamasında, ağaçta yürüyen algoritma aynı kalır ancak her değiştirici düğüm de ziyaret edilir. Böylece, bir değiştirici, boyutu gereksinimleri ve sarmaladığı değiştiricinin veya düzen düğümünün yerleşimi.
Şekil 2'de gösterildiği gibi Image
ve Text
composable'larının uygulanması
kendileri tek bir düzen düğümünü saran bir değiştirici zincirinden oluşur. İlgili içeriği oluşturmak için kullanılan
Row
ve Column
uygulamaları, basitçe ele aldığımız düzen düğümleridir:
yerleştiriyorlar.
![Daha önceki ağaç yapısında, artık her düğüm daha basit bir düzende bulunuyor ve etrafında çok sayıda değiştirici düğümleniyor.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/composables-modifiers.png?authuser=3&hl=tr)
Özetlemek gerekirse:
- Değiştiriciler tek bir değiştirici veya düzen düğümünü sarmalar.
- Düzen düğümleri, birden çok alt düğüm yerleştirebilir.
Aşağıdaki bölümlerde zihinsel modelin projedeki riskleri ve composable'ların boyutunu nasıl etkilediği hakkında daha fazla bilgi edineceksiniz.
Düzen aşamasındaki kısıtlamalar
Düzen aşamasında her bir düzeni bulmak için üç adımlı bir algoritma kullanılır. düğümün genişliği, yüksekliği ve x, y koordinatı:
- Alt öğeleri ölç: Bir düğüm, varsa alt öğelerini ölçer.
- Kendi boyutuna karar verme: Bu ölçümlere göre düğüm kendi başına karar verir. seçin.
- Alt öğeleri yerleştir: Her alt düğüm, bir düğümün kendi öğesine göre yerleştirilir. dokunun.
Constraints
, ilk iki düğümde düğümler için doğru boyutların bulunmasına yardımcı olur.
adımlarında yardımcı olur. Kısıtlamalar, bir web sitesi için minimum ve maksimum sınırları
düğümün genişliği ve yüksekliğine ayarlanır. Düğüm boyutuna karar verdiğinde, ölçülen boyutu
bu boyut aralığında olmalıdır.
Kısıtlama türleri
Kısıtlama, aşağıdakilerden biri olabilir:
- Sınırlı: Düğümün maksimum ve minimum genişlik ve yüksekliği vardır.
![Bir kapsayıcı içindeki farklı boyutların sınırlı kısıtlamaları.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/bounded-constraints.png?authuser=3&hl=tr)
- Sınırsız: Düğüm herhangi bir boyutla sınırlandırılmaz. Maksimum genişlik ve yükseklik sınırları sonsuza ayarlanır.
![Genişlik ve yüksekliği sonsuz olarak ayarlanmış sınırsız kısıtlamalar. Kısıtlamalar, kapsayıcının dışına taşar.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/unbounded-constraints.png?authuser=3&hl=tr)
- Tam: Düğümün tam bir boyut gereksinimlerini karşılaması istenir. Minimum ve maksimum sınırlar aynı değere ayarlandı.
![Kapsayıcı içindeki tam boyut şartına uyan tam kısıtlamalar.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/exact-constraints.png?authuser=3&hl=tr)
- Kombinasyon: Düğüm, yukarıdaki kısıtlama türlerinin bir kombinasyonunu izler. Örneğin, bir sınırlama, genişliği sınırlandırırken sınırsız maksimum yükseklik oluşturabilir veya tam bir genişlik ayarlayabilir, ancak sınırlı bir yükseklik sağlayabilirsiniz.
![Sınırlı ve sınırsız kısıtlamaların yanı sıra tam genişlik ve yüksekliklerin kombinasyonlarını gösteren iki kapsayıcı.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/combination-constraints.png?authuser=3&hl=tr)
Sonraki bölümde, bu kısıtlamaların bir üst öğeden alt öğe olarak ayarlanır.
Kısıtlamalar üst öğeden alt öğeye nasıl aktarılır?
Düzendeki kısıtlamalar konusunda açıklanan algoritmanın ilk adımında aşamasında, kısıtlamalar üst öğeden alt kuruluşa aktarılır tıklayın.
Bir üst düğüm kendi alt öğelerini ölçtüğünde, her bir ne kadar büyük veya küçük olabilecekleri konusunda onları bilgilendirmesini isteyin. Böylece, kendi boyutuna karar verirse, zaman çizelgesinde geçirilen kısıtlamalara da anne ve babası olabilir.
Algoritma genel olarak aşağıdaki şekilde çalışır:
- Gerçekte işgal etmek istediği boyuta karar vermek için kullanıcı arayüzü ağacındaki kök düğüm alt öğelerini ölçer ve aynı kısıtlamaları ilk alt öğesine iletir.
- Alt öğe, ölçümü etkilemeyen bir değiştiriciyse kısıtlanmasını sağlar. Kısıtlamalar değiştiriciye aktarılır zincirini olduğu gibi kullanabilirsiniz. İlgili içeriği oluşturmak için kullanılan kısıtlamalar uygun şekilde yeniden boyutlandırılır.
- Hiç alt öğesi olmayan bir düğüme ulaşıldığında ("yaprak " olarak adlandırılır) düğüm"), verilen kısıtlamalara bağlı olarak boyutunu belirler ve bu çözümlenen boyutu üst öğesine döndürür.
- Ana yayıncı, kısıtlamalarını bu çocuğun ölçümlerine göre uyarlar ve uyarlanan bu kısıtlamalarla bir sonraki alt öğesini çağırır.
- Bir üst öğenin tüm alt öğeleri ölçüldükten sonra, üst düğüm kendi anne veya babasına iletir.
- Bu şekilde, derinlikten önce tüm ağaç geçilir. Sonunda tüm düğümlerin boyutlarına karar vermiş ve ölçüm adımı tamamlanmış olacaktır.
Daha ayrıntılı bir örnek için Kısıtlamalar ve değiştirici sırası videosunu izleyin.
Kısıtlamaları etkileyen değiştiriciler
Önceki bölümde bazı değiştiricilerin kısıtlamayı etkileyebileceğini, seçin. Aşağıdaki bölümlerde, projenizin başarısını etkileyen kısıtlar.
size
değiştirici
size
değiştiricisi, içeriğin tercih edilen boyutunu bildirir.
Örneğin, aşağıdaki kullanıcı arayüzü ağacı, 300dp
kapsayıcısında oluşturulmalıdır
200dp
tarafından. Kısıtlamalar sınırlandırılmıştır. Bu sayede, 100dp
ile genişlikler için
300dp
ve 100dp
ile 200dp
arasındaki yükseklikler:
![Bir düzen düğümünü sarmalayan boyut değiştiriciye sahip kullanıcı arayüzü ağacı bölümü ve
bir kapsayıcıdaki boyut değiştirici tarafından ayarlanan sınırlı kısıtlamaların temsili.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier.png?authuser=3&hl=tr)
size
değiştiricisi, gelen kısıtlamaları kendisine geçirilen değerle eşleşecek şekilde uyarlar.
Bu örnekte 150dp
değeri kullanılmıştır:
![Şekil 7'deki gibidir. Tek fark, boyut değiştiricinin, kendisine iletilen değeri eşleştirmek için gelen kısıtlamaları uyarlayan olmasıdır.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-2.png?authuser=3&hl=tr)
150dp
olarak ayarlayan size
değiştiricisi.Genişlik ve yükseklik en küçük kısıtlama sınırından küçükse veya en büyük sınırlama sınırından daha büyükse, değiştirici, iletilen mümkün olduğunca yakın bir şekilde sınırlamalarına kadar içinde:
![İki kullanıcı arayüzü ağacı ve kapsayıcılardaki karşılıkları. İlk olarak,
boyut değiştirici artan kısıtlamaları kabul eder; boyut değiştiricisi, ikincisinde de
kısıtlamaların olabildiğince yakın olmasına neden olarak, kapsayıcıyı dolduran kısıtlamalara neden olur.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-3.png?authuser=3&hl=tr)
size
değiştirici
yardımcı olmaktır.Birden fazla size
değiştiriciyi zincirlemenin işe yaramadığını unutmayın. İlk size
değiştiricisi hem minimum hem de maksimum kısıtlamaları sabit bir değere ayarlar. Hatta
ikinci boyut değiştirici daha küçük veya daha büyük bir boyut istese de
geçen tam sınırlara bağlı kalarak bu değerleri geçersiz kılmaz:
![Kullanıcı arayüzü ağacındaki iki boyut değiştiriciden oluşan bir zincir ve bunun bir kapsayıcıdaki gösterimi
Bu, ikinci değerin değil, iletilen ilk değerin sonucudur.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-4.png?authuser=3&hl=tr)
size
değiştiriciden oluşan ve ikinci değerin geçtiği zincir
(50dp
) değerindeki değer ilk değeri (100dp
) geçersiz kılmaz.requiredSize
değiştirici
Aşağıdakilere ihtiyacınız varsa size
yerine requiredSize
değiştiricisini kullanın
düğümünü değiştirin. requiredSize
değiştiricisi,
gelen kısıtlamaları uygular ve belirttiğiniz boyutu tam sınırlar olarak aktarır.
Boyut, ağaçta tekrar iletildiğinde alt düğüm, kullanılabilir alan:
![Kullanıcı arayüzü ağacında zincirlenmiş boyut ve requiredSize değiştirici ve karşılık gelen
temsil eder. requiredSize değiştirici kısıtlamaları, boyut değiştiriciyi geçersiz kılar
kısıtlar.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/requiredsize-modifier.png?authuser=3&hl=tr)
requiredSize
değiştiricisi:
size
değiştiricisi var.width
ve height
değiştiriciler
size
değiştiricisi, kısıtlamaların hem genişliğini hem de yüksekliğini uyarlar. Entegre
width
değiştiricisi kullanıyorsanız sabit bir genişlik ayarlayabilir ancak yüksekliği karar vermeden bırakabilirsiniz.
Benzer şekilde, height
değiştiricisiyle sabit bir yükseklik ayarlayabilirsiniz ancak
genişlik kararsız:
![Biri genişlik değiştirici, kapsayıcı gösterimi ve diğeri olan iki kullanıcı arayüzü ağacı
temsiliyle birlikte değiştirebilirsiniz.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/width-height-modifier.png?authuser=3&hl=tr)
width
değiştiricisi ve height
değiştiricisi sabit bir genişlik ayarı yapıyor
yüksekliğini görebilirsiniz.sizeIn
değiştirici
sizeIn
değiştiricisi, tam olarak minimum ve maksimum sınırlamalar ayarlamanızı sağlar
seçin. Daha ayrıntılı kontrole ihtiyacınız varsa sizeIn
değiştiricisini kullanın
tercih edebilirsiniz.
![SizeIn değiştiricisinde minimum ve maksimum genişlik ve yüksekliklerin ayarlandığı bir kullanıcı arayüzü ağacı,
bir kapsayıcı içindeki temsilidir.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/constraints-modifiers/sizein-modifier.png?authuser=3&hl=tr)
minWidth
, maxWidth
, minHeight
vesizeIn
maxHeight
sete katıldı.Örnekler
Bu bölümde, birden çok kod snippet'inden elde edilen çıktılar zincirleme değiştiricileridir.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
Bu snippet aşağıdaki çıkışı üretir:
fillMaxSize
değiştiricisi, hem minimum genişlik ve yükseklik maksimum değere:300dp
genişlik ve200dp
emin olun.size
değiştiricisi50dp
boyutunu kullanmak istese de gelen minimum kısıtlamalara uymanız gerekir. Dolayısıylasize
değiştiricisi, aynı zamanda,200
kadar etkili bir şekilde300
için tam kısıtlama sınırlarını da verir.size
değiştiricisinde sağlanan değer yok sayılıyor.Image
, bu sınırları izler ve200
x300
boyutunda bir boyut bildirir. ağaçta enine boyuna kadar geçiyor.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
Bu snippet aşağıdaki çıkışı üretir:
fillMaxSize
değiştiricisi, kısıtlamaları hem minimum değeri ayarlayacak şekilde uyarlar genişlik ve yüksekliği maksimum değere göre —300dp
genişlik ve200dp
inç yükseklik.wrapContentSize
değiştiricisi minimum kısıtlamaları sıfırlar. Şimdi,fillMaxSize
sabit kısıtlamalara neden oldu,wrapContentSize
kısıtlamaları tekrar sıfırlar sınırlı değildir. Aşağıdaki düğüm artık tüm alanı kaplayabilir veya alanın tamamından daha küçük olmalıdır.size
değiştiricisi, kısıtlamaları50
.Image
,50
başına50
vesize
değiştiricisine dönüşür o da budur.wrapContentSize
değiştiricisinin özel bir özelliği vardır. Her bir alt öğesi olan alt öğeleri içerir ve mevcut minimum sınırların işleyeceğiz. Üst öğeleri ile iletişim kurduğu boyut, emin olun.
Sadece üç değiştiriciyi birleştirerek, composable ve üst öğesi içinde ortala.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .clip(CircleShape) .padding(10.dp) .size(100.dp) )
Bu snippet aşağıdaki çıkışı üretir:
clip
değiştirici kısıtlamaları değiştirmez.padding
değiştiricisi maksimum kısıtlamaları azaltır.size
değiştiricisi tüm kısıtlamaları100dp
olarak ayarlar.Image
bu kısıtlamalara uyar ve boyut olarak100
100dp
.padding
değiştiricisi tüm boyutlara10dp
ekleyerek raporlanan sayıyı artırır20dp
genişliği ve yüksekliği.- Çizim aşamasında,
clip
değiştiricisi120
tuvalinde şu şekilde çalışır:120dp
. Dolayısıyla, o boyutta bir daire maskesi oluşturur. - Daha sonra
padding
değiştiricisi, içeriğini tüm boyutlarda10dp
oranında ekler. Böylece tuval boyutunu100dp
x100
olacak şekilde düşürür. Image
bu tuvalde çizilir. Resim,120dp
değerinde bir orijinal daire, yani çıkış yuvarlak olmayan bir sonuçtur.