Compose'da birden fazla değiştiriciyi zincirleyerek bir composable'ın görünümünü ve tarzını değiştirebilirsiniz. Bu değiştirici zincirleri, composable'lara iletilen, genişlik ve yükseklik sınırlarını tanımlayan kısıtlamaları etkileyebilir.
Bu sayfada, zincirleme değiştiricilerin kısıtlamaları ve dolayısıyla composable'ların ölçümünü ve yerleşimini nasıl etkilediği açıklanmaktadır.
Kullanıcı arayüzü ağacındaki değiştiriciler
Değiştiricilerin birbirlerini nasıl etkilediğini anlamak için, bileşim aşamasında oluşturulan kullanıcı arayüzü ağacında nasıl göründüklerini görselleştirmek faydalı olur. Daha fazla bilgi için Beste bölümüne bakın.
Kullanıcı arayüzü ağacında, değiştiricileri düzen düğümleri için sarmalayıcı düğümleri olarak görselleştirebilirsiniz:
Bir composable'a birden fazla değiştirici eklemek, bir değiştirici zinciri oluşturur. Birden fazla değiştiriciyi zincirlediğinizde her bir değiştirici düğüm, zincirliğin geri kalanını ve içindeki düzen düğümünü sarmalar. Örneğin, bir clip
ve bir size
değiştiricisini zincirlediğinizde clip
değiştirici düğümü size
değiştirici düğümünü, daha sonra da Image
düzen düğümünü sarmalar.
Düzen aşamasında, ağacı atan algoritma aynı kalır ancak her değiştirici düğüm de ziyaret edilir. Bu şekilde bir değiştirici, sarmaladığı değiştirici veya düzen düğümünün boyut gereksinimlerini ve yerleşimini değiştirebilir.
Şekil 2'de gösterildiği gibi Image
ve Text
composable'ları, tek bir düzen düğümünü sarmalayan bir değiştirici zincirinden oluşur. Row
ve Column
uygulamaları, alt öğelerinin nasıl yerleştirileceğini açıklayan düzen düğümleridir.
Ö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 düzenleyebilir.
Aşağıdaki bölümlerde, bu zihinsel modelin düzenleyici zincirleme olarak nasıl kullanılacağı ve composable'ların boyutunu nasıl etkilediği açıklanmaktadır.
Düzen aşamasındaki kısıtlamalar
Düzen aşaması, her düzen düğümünün genişliğini, yüksekliğini ve x, y koordinatını bulmak için üç adımlı bir algoritmayı izler:
- Alt öğeleri ölçme: Düğüm, varsa alt öğelerini ölçer.
- Kendi boyutuna karar verme: Düğüm, bu ölçümlere göre kendi boyutuna karar verir.
- Alt öğeleri yerleştir: Her alt düğüm, düğümün kendi konumuna göre yerleştirilir.
Constraints
, algoritmanın ilk iki adımında düğümler için doğru boyutları bulmanıza yardımcı olur. Sınırlamalar, bir düğümün genişliği ve yüksekliği için minimum ve maksimum sınırları tanımlar. 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şliği ve yüksekliği vardır.
- Sınırsız: Düğüm herhangi bir boyutla sınırlı değildir. Maksimum genişlik ve yükseklik sınırları sonsuza ayarlanır.
- Tam: Düğümün tam boyut gereksinimine uyması istenir. Minimum ve maksimum sınırlar aynı değere ayarlanır.
- Kombinasyon: Düğüm, yukarıdaki kısıtlama türlerinin bir kombinasyonunu uygular. Örneğin, bir kısıtlama sınırsız bir maksimum yüksekliğe izin verirken genişliği sınırlayabilir veya tam bir genişlik ayarlayıp sınırlı bir yükseklik sağlayabilir.
Sonraki bölümde, bu kısıtlamaların bir üst öğeden alt öğeye nasıl geçirildiği açıklanmaktadır.
Kısıtlamalar üst öğeden alt öğeye nasıl aktarılır?
Algoritmanın Düzen aşamasındaki kısıtlamalar bölümünde açıklanan ilk adımı sırasında kısıtlamalar, kullanıcı arayüzü ağacında üst öğeden alt öğeye geçirilir.
Bir üst düğüm, alt öğelerini ölçtüğünde, her alt düğüme bu kısıtlamaları uygulayarak ne kadar büyük veya küçük olduklarını bilmelerini sağlar. Daha sonra, kendi boyutuna karar verirken kendi üst kuruluşunun getirdiği kısıtlamalara da uyar.
Genel olarak, algoritma aşağıdaki şekilde çalışır:
- Gerçekte işgal etmek istediği boyutu belirlemek 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ıtlamaları bir sonraki değiştiriciye yönlendirir. Kısıtlamalar, ölçümü etkileyen bir değiştiriciye ulaşılmadığı sürece değiştirici zincirine olduğu gibi aktarılır. Kısıtlamalar daha sonra uygun şekilde yeniden boyutlandırılır.
- Alt öğesi olmayan bir düğüme ("yaprak düğümü" olarak anılır.) ulaşıldığında, bu düğüm, aktarılan kısıtlamalara göre boyutunu belirler ve bu çözümlenmiş boyutu üst kuruluşuna döndürür.
- Ebeveyn, kısıtlamalarını bu çocuğun ölçümlerine göre uyarlar ve ayarlanmış bu kısıtlamalarla bir sonraki çocuğunu arar.
- Bir üst öğenin tüm alt öğeleri ölçüldüğünde, üst düğüm kendi boyutuna karar verir ve bunu kendi üst düğümüne iletir.
- Bu şekilde, ilk önce derinlikten başlayarak ağacın tamamı geçer. En sonunda, tüm düğümler boyutlarına karar vermiş ve ölçüm adımı tamamlanmıştır.
Ayrıntılı bir örnek için Sınırlamalar ve değiştirici sırası videosuna bakın.
Kısıtlamaları etkileyen değiştiriciler
Önceki bölümde, bazı değiştiricilerin sınırlama boyutunu etkileyebileceğini öğrenmiştiniz. Aşağıdaki bölümlerde, kısıtlamaları etkileyen belirli değiştiriciler açıklanmaktadır.
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ı, 200dp
tarafından 300dp
kapsayıcısında oluşturulmalıdır. Kısıtlamalar sınırlı olup 100dp
ile 300dp
arasında genişliklere ve 100dp
ile 200dp
arasında yüksekliklere izin verir:
size
değiştiricisi, gelen kısıtlamaları kendisine iletilen değerle eşleşecek şekilde uyarlar.
Bu örnekte değer 150dp
'tır:
Genişlik ve yükseklik en küçük kısıtlama sınırından küçük veya en büyük kısıtlama sınırından daha büyükse değiştirici, iletilen kısıtlamalara uymaya devam ederken aktarılan kısıtlamaları en yakın şekilde eşleştirir:
Birden çok size
değiştiricisini 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. İkinci boyut değiştiricisi daha küçük veya daha büyük bir boyut istese bile, iletilen sınırlara yine de uyması gerekir. Böylece bu değerleri geçersiz kılmaz:
requiredSize
değiştirici
Düğümünüzün gelen kısıtlamaları geçersiz kılmasına ihtiyacınız varsa size
yerine requiredSize
değiştiricisini kullanın. requiredSize
değiştiricisi, gelen kısıtlamaları değiştirir ve belirttiğiniz boyutu tam sınırlar olarak aktarır.
Boyut ağaçtan yukarıya iletildiğinde, alt düğüm kullanılabilir alanda ortalanır:
width
ve height
değiştiriciler
size
değiştiricisi, kısıtlamaların hem genişliğini hem de yüksekliğini uyarlar. width
değiştiricisini kullanarak sabit bir genişlik ayarlayabilir, ancak yüksekliği kararsız bırakabilirsiniz.
Benzer şekilde, height
değiştiricisini kullanarak sabit bir yükseklik ayarlayabilir, ancak genişliği kararsız bırakabilirsiniz:
sizeIn
değiştirici
sizeIn
değiştiricisi, genişlik ve yükseklik için kesin minimum ve maksimum kısıtlamalar ayarlamanıza olanak tanır. Kısıtlamalar üzerinde daha ayrıntılı kontrole ihtiyacınız varsa sizeIn
değiştiricisini kullanın.
Örnekler
Bu bölümde, zincirleme değiştiricilere sahip birkaç kod snippet'inin çıkışı gösterilmektedir.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
Bu snippet aşağıdaki çıkışı üretir:
fillMaxSize
değiştiricisi, kısıtlamaları değiştirerek minimum genişlik ve yüksekliği maksimum değere (genişlik300dp
ve yükseklik olarak200dp
) ayarlar.size
değiştiricisi,50dp
boyutunu kullanmak istese de gelen minimum kısıtlamalara uyması gerekir. Bu nedenlesize
değiştiricisi,size
değiştiricisinde sağlanan değeri etkin bir şekilde yok sayarak300
değerinin tam sınırlama sınırlarını200
x çıktısına çıkarır.Image
, bu sınırları izler ve200
x300
boyutunda bir değer bildirir. Bu boyut, ağacın en sonuna kadar geçirilir.
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 genişliği hem de yüksekliği maksimum değere (genişlik:300dp
, yükseklik:200dp
) ayarlayacak şekilde uyarlar.wrapContentSize
değiştiricisi, minimum kısıtlamaları sıfırlar. Bu nedenle,fillMaxSize
sabit kısıtlamalarla sonuçlanırkenwrapContentSize
, sınırlı kısıtlamalara geri döndürür. Aşağıdaki düğüm artık tüm alanı kaplayabilir veya tüm alandan daha küçük olabilir.size
değiştiricisi, kısıtlamaları50
olan minimum ve maksimum sınırlara ayarlar.Image
,50
x50
boyutuna çözümlenir vesize
değiştiricisi bunu yönlendirir.wrapContentSize
değiştiricisinin özel bir özelliği vardır. Alt öğesini alır ve kendisine iletilen mevcut minimum sınırların ortasına yerleştirir. Dolayısıyla üst öğelerine aktardığı boyut, kendisine geçirilen minimum sınırlara eşit olur.
Yalnızca üç değiştiriciyi birleştirerek composable için bir boyut tanımlayabilir ve composable'ı üst öğede ortalayabilirsiniz.
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ştiricisi, 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 ve100
x100dp
boyutunda bir boyut raporlar.padding
değiştiricisi, tüm boyutlara10dp
eklendiğinden bildirilen genişlik ve yüksekliği20dp
artırır.- Şimdi çizim aşamasında,
clip
değiştiricisi120dp
adlı tuval üzerinde120
işlevi görür. Dolayısıyla, bu boyutta bir daire maskesi oluşturur. - Daha sonra
padding
değiştiricisi, içeriğini tüm boyutlarda10dp
oranında ekler ve böylece tuval boyutunu100dp
oranında100
olacak şekilde düşürür. - Bu tuvalde
Image
çizilir. Resim, orijinal120dp
dairesine göre kırpılır. Dolayısıyla çıktı, yuvarlak olmayan bir sonuçtur.