Sınırlamalar ve değiştirici sırası

Oluşturma bölümünde, bir bileşenin görünümünü ve tarzını değiştirmek için birden fazla değiştiriciyi birbirine bağlayabilirsiniz. Bu değiştirici zincirleri, genişlik ve yükseklik sınırlarını tanımlayan composable'lara iletilen kısıtlamaları etkileyebilir.

Bu sayfada zincirli değiştiricilerin, kısıtlamaları ve dolayısıyla composable'ların ölçülmesini ve yerleşimini nasıl etkilediği açıklanmaktadır.

Kullanıcı arayüzü ağacındaki değiştiriciler

Değiştiricilerin birbirini nasıl etkilediğini anlamak için, derleme aşamasında oluşturulan kullanıcı arayüzü ağacında nasıl göründüklerini görselleştirmek faydalıdır. 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üğümler olarak görselleştirebilirsiniz:

Şekil 1. Kullanıcı arayüzü ağacında düzen düğümlerini sarmalayan değiştiriciler.

Bir composable'a birden fazla değiştirici eklendiğinde bir değiştirici zinciri oluşturulur. Birden fazla değiştirici zinciriniz istediğinizde her değiştirici düğüm, zincirin geri kalanını ve içindeki düzen düğümünü sarmalar. Örneğin, bir clip ve size değiştiriciyi zincirlediğinizde clip değiştirici düğümü, size değiştirici düğümünü sarar. Bu düğüm de Image düzen düğümünü sarar.

Düzenleme aşamasında, ağacı gezen algoritma aynı kalır ancak her değiştirici düğümü de ziyaret edilir. Bu sayede, değiştirici, sarmaladığı değiştiricinin veya düzen düğümünün boyut koşullarını ve yerleşimini değiştirebilir.

Şekil 2'de gösterildiği gibi, Image ve Text bileşenlerinin kendileri tek bir düzen düğümünü sarmalayan bir değiştirici zincirinden oluşur. Row ve Column'ün uygulamaları, alt öğelerinin nasıl yerleştirileceğini açıklayan basit düzen düğümleridir.

Şekil 2. Şekil 1'dekiyle aynı ağaç yapısına sahiptir ancak kullanıcı arayüzü ağacındaki composable'lar, değiştirici zincirleri olarak görselleştirilmiştir.

Özetlemek gerekirse:

• Değiştiriciler tek bir değiştiriciyi veya düzen düğümünü sarar.
• Düzenleme düğümleri birden fazla alt düğüm düzenleyebilir.

Aşağıdaki bölümlerde, bu zihinsel modelin değiştirici zincirleme hakkında akıl yürütmek için nasıl kullanılacağı ve bu modelin birleştirilebilir öğelerin boyutunu nasıl etkilediği açıklanmaktadır.

Düzenleme aşamasındaki kısıtlamalar

Düzenleme 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 algoritma izler:

1. Alt öğeleri ölçme: Bir düğüm, varsa alt öğelerini ölçer.
2. Kendi boyutuna karar verme: Bir düğüm, bu ölçümlere göre kendi boyutuna karar verir.
3. Alt öğeleri yerleştirme: Her alt öğe, bir öğenin 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. Kısıtlamalar, 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ığına girmelidir.

Kısıtlama türleri

Kısıtlamalar aşağıdakilerden biri olabilir:

• Sınırlı: Düğümün maksimum ve minimum genişlik ve yüksekliği vardır.

Şekil 3. Sınırlı kısıtlamalar.

• Sınırsız: Düğüm herhangi bir boyutla sınırlandırılmaz. Maksimum genişlik ve yükseklik sınırları sonsuz olarak ayarlanır.

Şekil 4. Sınırsız kısıtlamalar.

• Tam: Nod'dan tam bir boyut koşuluna uyması istenir. Minimum ve maksimum sınırlar aynı değere ayarlanır.

Şekil 5. Tam kısıtlamalar.

• Kombinasyon: Düğüm, yukarıdaki kısıtlama türlerinin bir kombinasyonunu izler. Örneğin, bir kısıtlama, sınırsız maksimum yüksekliğe izin verirken genişliği sınırlayabilir veya tam bir genişlik ayarlayabilir ancak sınırlı bir yükseklik sağlayabilir.

Şekil 6. Sınırlı ve sınırsız kısıtlamaların ve tam genişlik ve yüksekliklerin kombinasyonları.

Sonraki bölümde, bu kısıtlamaların bir üst öğeden alt öğeye nasıl aktarıldığı açıklanmaktadır.

Kısıtlamalar üst öğeden alt öğeye nasıl aktarılır?

Düzenleme aşamasındaki kısıtlamalar bölümünde açıklanan algoritmanın ilk adımında, kısıtlamalar kullanıcı arayüzü ağacında üst öğeden alt öğeye iletilir.

Bir üst öğe, alt öğelerini ölçerken her alt öğeye ne kadar büyük veya küçük olmalarına izin verildiğini bildirmek için bu kısıtlamaları sağlar. Ardından, kendi boyutuna karar verirken kendi ebeveynleri tarafından iletilen kısıtlamalara da uyar.

Algoritma genel olarak aşağıdaki şekilde çalışır:

1. Kullanıcı arayüzü ağacındaki kök düğüm, kaplamak istediği gerçek boyuta karar vermek için alt öğelerini ölçer ve aynı kısıtlamaları ilk alt öğesine iletir.
2. Alt öğe, ölçümü etkilemeyen bir değiştiriciyse kısıtlamaları bir sonraki değiştiriciye iletir. Ölçümü etkileyen bir değiştiriciye ulaşılmadıkça kısıtlamalar, değiştirici zincirine olduğu gibi iletilir. Daha sonra kısıtlamalar buna göre yeniden boyutlandırılır.
3. Alt öğesi olmayan bir düğüme ("yaprak düğüm" olarak adlandırılır) ulaşıldığında, düğüm boyutuna, iletilen kısıtlamalara göre karar verir ve bu çözüldü boyutu üst öğesine döndürür.
4. Üst öğe, kısıtlamalarını bu alt öğenin ölçümlerine göre uyarlar ve sonraki alt öğesini bu ayarlanmış kısıtlamalarla çağırır.
5. Bir üst öğenin tüm alt öğeleri ölçüldükten sonra üst öğe kendi boyutuna karar verir ve bunu kendi üst öğesine iletir.
6. Bu sayede ağacın tamamı derinlik öncelikli olarak taranabilir. Sonunda tüm düğümler boyutlarına karar verir ve ölçüm adımı tamamlanır.

Ayrıntılı bir örnek için Kısıtlamalar ve değiştirici sırası videosuna bakın.

Kısıtlamaları etkileyen değiştiriciler

Önceki bölümde, bazı değiştiricilerin kısıtlama boyutunu etkileyebileceğini öğrendiniz. Aşağıdaki bölümlerde, kısıtlamaları etkileyen belirli değiştiriciler açıklanmaktadır.

size değiştirici

size değiştirici, içeriğin tercih edilen boyutunu belirtir.

Örneğin, aşağıdaki kullanıcı arayüzü ağacı, 200dp tarafından 300dp öğesinin bir kapsayıcısında oluşturulmalıdır. Sınırlamalar, 100dp ile 300dp arasında genişlik ve 100dp ile 200dp arasında yükseklik değerlerine izin verecek şekilde belirlenmiştir:

Şekil 7. Kullanıcı arayüzü ağacındaki sınırlı kısıtlamalar ve bunun container'daki gösterimi.

size değiştiricisi, gelen kısıtlamaları kendisine iletilen değerle eşleşecek şekilde uyarlar. Bu örnekte değer 150dp'tür:

Şekil 8. Kısıtlamaları 150dp olarak ayarlayan size değiştirici.

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 büyükse değiştirici, iletilen kısıtlamalara mümkün olduğunca yakın bir şekilde eşleşirken iletilen kısıtlamalara da bağlı kalır:

Şekil 9. İletilen kısıtlamaya mümkün olduğunca yakın bir şekilde uyan size değiştirici.

Birden fazla size değiştiriciyi zincirleme işleminin işe yaramadığını unutmayın. İlk size değiştirici, hem minimum hem de maksimum kısıtlamaları sabit bir değere ayarlar. İkinci boyut değiştirici daha küçük veya daha büyük bir boyut istese bile iletilen tam sınırlara uyması gerekir. Bu nedenle, bu değerleri geçersiz kılmaz:

Şekil 10. İletilen ikinci değerin (50dp), ilk değeri (100dp) geçersiz kılmadığı iki size değiştirici zinciri.

requiredSize değiştirici

Nodunuzun gelen kısıtlamaları geçersiz kılması gerekiyorsa 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 iletir.

Boyut ağaca geri aktarıldığında alt düğüm, kullanılabilir alana ortalanır:

Şekil 11. requiredSize değiştirici, size değiştiriciden gelen kısıtlamaları geçersiz kılıyor.

width ve height değiştiricileri

size değiştiricisi, kısıtlamaların hem genişliğini hem de yüksekliğini uyarlar. width değiştiricisiyle sabit bir genişlik ayarlayabilir ancak yüksekliği kararsız bırakabilirsiniz. Benzer şekilde, height değiştiricisiyle sabit bir yükseklik ayarlayabilirsiniz ancak genişliği belirtmeden bırakabilirsiniz:

Şekil 12. Sırasıyla sabit genişlik ve yükseklik ayarlayan width düzenleyici ve height düzenleyici.

sizeIn değiştirici

sizeIn değiştiricisi, genişlik ve yükseklik için tam minimum ve maksimum sınırlamalar belirlemenize olanak tanır. Kısıtlamalar üzerinde ayrıntılı kontrole ihtiyacınız varsa sizeIn değiştiricisini kullanın.

Şekil 13. minWidth, maxWidth, minHeight ve maxHeight ayarlarıyla sizeIn değiştirici.

Örnekler

Bu bölümde zincirli değiştiricilere sahip çeşitli kod snippet'lerinden elde edilen çıktılar gösterilmektedir.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

Bu snippet aşağıdaki çıktıyı oluşturur:

• fillMaxSize değiştiricisi, hem minimum genişliği hem de yüksekliği maksimum değere (genişlikte 300dp ve yükseklikte 200dp) ayarlamak için kısıtlamaları değiştirir.
• size değiştiricisi 50dp boyutunu kullanmak istese de gelen minimum kısıtlamalara uyması gerekir. Bu nedenle size değiştirici, size değiştiricide sağlanan değeri etkili bir şekilde yok sayarak 300'un 200'ye göre tam kısıtlama sınırlarını da döndürür.
• Image bu sınırları izler ve 300x200 boyutunu raporlar. Bu boyut, ağacın en üst kısmına kadar iletilir.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

Bu snippet aşağıdaki çıktıyı oluşturur:

• fillMaxSize değiştirici, hem minimum genişliği hem de yüksekliği maksimum değere (genişlik için 300dp, yükseklik için 200dp) ayarlayacak şekilde kısıtlamaları uyarlar.
• wrapContentSize değiştiricisi minimum kısıtlamaları sıfırlar. Bu nedenle, fillMaxSize sabit kısıtlamalara neden olurken wrapContentSize sınırlanmış kısıtlamalara geri sıfırlar. Aşağıdaki düğüm artık alanın tamamını kaplayacak veya alanın tamamından daha küçük olacak şekilde ayarlanabilir.
• size değiştiricisi, 50 için minimum ve maksimum sınırları ayarlayarak kısıtlamaları belirler.
• Image, 50 başına 50 boyutuna dönüşür ve size değiştiricisi bunu yönlendirir.
• wrapContentSize değiştiricinin özel bir özelliği vardır. Çocuğunu alır ve kendisine iletilen kullanılabilir minimum sınırların ortasına yerleştirir. Üst kuruluşlarına ilettiği boyut, bu şekilde aktarılan minimum sınırlara eşittir.

Yalnızca üç değiştiriciyi birleştirerek composable için bir boyut tanımlayabilir ve üst öğesi içinde ortalayabilirsiniz.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .clip(CircleShape)
        .padding(10.dp)
        .size(100.dp)
)
ConstraintsModifiersSnippets.kt

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ı düşürür.
  • size değiştiricisi tüm kısıtlamaları 100dp olarak ayarlar.
  • Image bu kısıtlamalara uyar ve 100dp x 100 boyutunda bir boyut bildirir.
  • padding değiştiricisi tüm boyutlara 10dp ekler. Bu nedenle, bildirilen genişlik ve yüksekliği 20dp artırır.
  • Artık çizim aşamasında clip değiştirici, 120dp tarafından 120 kanvas üzerinde işlem yapar. Böylece bu boyutta bir daire maskesi oluşturur.
  • padding değiştiricisi, içeriğini tüm boyutlarda 10dp kadar içe yerleştirir. Böylece kanvas boyutunu 100dp kadar 100 olarak düşürür.
  • Image, bu tuvale çizilir. Resim, 120dp orijinal dairesine göre kırpılır. Bu nedenle, sonuç yuvarlak olmayan bir sonuçtur.