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:
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.
Ö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.
- 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.
- Tam: Düğümün tam bir boyut gereksinimlerini karşılaması istenir. Minimum ve maksimum sınırlar aynı değere ayarlandı.
- 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.
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 tanımlar.
Ö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:
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:
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:
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:
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:
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:
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.
Ö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ç tepesine kadar geçirilmişti.
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.