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

Compose'da, bir composable'ın 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, composable'lara iletilen ve genişlik ile 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 oluşturma 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 Oluşturma 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:

Birleştirilebilir öğeler ve değiştiriciler için kod ve bunların kullanıcı arayüzü ağacı olarak görsel temsili.
Şekil 1. Kullanıcı arayüzü ağacındaki düzen düğümlerini sarmalayan değiştiriciler.

Bir composable'a birden fazla değiştirici eklediğinizde değiştirici zinciri oluşturulur. Birden fazla değiştiriciyi zincirlediğ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 bir size değiştiriciyi zincirlediğinizde clip değiştirici düğümü, size değiştirici düğümünü sarmalar. Bu düğüm de Image düzen düğümünü sarmalar.

Düzen aşamasında, ağaçta gezinen 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 gereksinimlerini ve yerleşimini değiştirebilir.

Şekil 2'de gösterildiği gibi, Image ve Text composable'larının uygulanması, tek bir düzen düğümünü sarmalayan bir değiştirici zincirinden oluşur.

Row ve Column uygulamaları, alt öğelerinin nasıl düzenleneceğini açıklayan düzen düğümleridir.

Önceki ağaç yapısı, ancak artık her düğüm, etrafında çok sayıda değiştirici sarmalama düğümü bulunan basit bir düzenden ibaret.
Şekil 2. Şekil 1'deki ağaç yapısının aynısı ancak kullanıcı arayüzü ağacındaki composable'lar değiştirici zincirleri olarak gösteriliyor.

Özetlemek gerekirse:

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

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

Yerleşim 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 algoritma kullanır:

  1. Alt öğeleri ölçme: Düğüm, varsa alt öğelerini ölçer.
  2. Kendi boyutuna karar verme: Düğüm, bu ölçümlere göre kendi boyutuna karar verir.
  3. Alt öğeleri yerleştirme: Her alt düğüm, bir düğümün kendi konumuna göre yerleştirilir.

Constraints, algoritmanın ilk iki adımında düğümler için doğru boyutların bulunmasına 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ığı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.
Bir kapsayıcı içinde farklı boyutlarda sınırlı kısıtlamalar.
Şekil 3. Sınırlı kısıtlamalar.
  • Sınırsız: Düğüm herhangi bir boyutla sınırlı değildir. Maksimum genişlik ve yükseklik sınırları sonsuz olarak ayarlanır.
Genişlik ve yükseklik değerleri sonsuz olarak ayarlanmış sınırsız kısıtlamalar. Kısıtlamalar kapsayıcının dışına taşıyor.
Şekil 4. Sınırsız kısıtlamalar.
  • Tam: Düğümden tam bir boyut koşuluna uyması istenir. Minimum ve maksimum sınırlar aynı değere ayarlanmıştır.
Kapsayıcı içindeki tam boyut koşuluna uyan tam kısıtlamalar.
Şekil 5. Tam kısıtlamalar.
  • Kombinasyon: Düğüm, önceki kısıtlama türlerinin bir kombinasyonunu izler. Örneğin, bir kısıtlama genişliği sınırlarken sınırsız bir maksimum yüksekliğe izin verebilir veya tam bir genişlik ayarlayabilir ancak sınırlı bir yükseklik sağlayabilir.
Sınırlı ve sınırsız kısıtlamaların yanı sıra tam genişlik ve yükseklik kombinasyonlarını gösteren iki kapsayıcı.
Şekil 6. Sınırlı ve sınırsız kısıtlamaların ve tam genişlik ve yüksekliklerin kombinasyonları.

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

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

Düzen 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 aktarılır.

Bir üst düğüm, alt öğelerini ölçerken her bir alt öğeye bu kısıtlamaları sağlayarak ne kadar büyük veya küçük olmalarına izin verildiğini bildirir. Ardından, kendi boyutuna karar verirken kendi üst öğeleri tarafından iletilen kısıtlamalara da uyar.

Algoritma genel olarak şu şekilde çalışır:

  1. Kullanıcı arayüzü ağacındaki kök düğüm, kaplamak istediği 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. 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 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, iletilen kısıtlamalara göre boyutuna karar verir ve bu çözümlenmiş boyutu üst öğesine döndürür.
  4. Üst öğe, kısıtlamalarını bu alt öğenin ölçümlerine göre uyarlar ve bir sonraki alt öğesini bu ayarlanmış kısıtlamalarla çağırır.
  5. Bir üst öğenin tüm alt öğeleri ölçüldükten sonra üst düğüm kendi boyutuna karar verir ve bunu kendi üst öğesine iletir.
  6. Bu şekilde, tüm ağaç derinlik öncelikli olarak taranır. 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ı videosunu izleyin.

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ştiricisi

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

Örneğin, aşağıdaki kullanıcı arayüzü ağacı 300dp x 200dp boyutunda bir kapsayıcıda oluşturulmalıdır. Sınırlamalar, 100dp ile 300dp arasındaki genişliklere ve 100dp ile 200dp arasındaki yüksekliklere izin verir:

Bir düzen düğümünü sarmalayan boyut değiştiriciye sahip bir kullanıcı arayüzü ağacı bölümü ve bir kapsayıcıda boyut değiştirici tarafından ayarlanan sınırlı kısıtlamaların temsili.
Şekil 7. Kullanıcı arayüzü ağacındaki sınırlı kısıtlamalar ve bunların bir kapsayıcıdaki temsili.

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

Şekil 7 ile aynıdır ancak boyut değiştirici, gelen kısıtlamaları kendisine iletilen değerle eşleşecek şekilde uyarlar.
Şekil 8. size değiştiricisi, kısıtlamaları 150dp olarak ayarlıyor.

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 uymaya devam ederken iletilen kısıtlamalarla mümkün olduğunca eşleşir:

İki kullanıcı arayüzü ağacı ve bunların kapsayıcılardaki karşılık gelen temsilleri. İlkinde, boyut değiştirici gelen kısıtlamaları kabul eder. İkincisinde ise boyut değiştirici, çok büyük kısıtlamalara mümkün olduğunca yakın bir şekilde uyum sağlayarak kapsayıcıyı dolduran kısıtlamalar oluşturur.
Şekil 9. Geçirilen kısıtlamaya mümkün olduğunca uyan size değiştirici.

Birden fazla size değiştiricisini zincirlemenin işe yaramayacağı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:

Kullanıcı arayüzü ağacındaki iki boyut değiştiriciden oluşan bir zincir ve bunun bir kapsayıcıdaki temsili. Bu, ikinci değerin değil, iletilen ilk değerin sonucudur.
Şekil 10. İki size değiştiriciden oluşan bir zincir. Bu zincirde, iletilen ikinci değer (50dp) ilk değerin (100dp) üzerine yazılmaz.

requiredSize değiştiricisi

Düğümünüzün 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ğaçta yukarı doğru iletildiğinde alt düğüm, kullanılabilir alanda ortalanır:

Kullanıcı arayüzü ağacında zincirlenmiş size ve requiredSize değiştiricisi ve bir kapsayıcıdaki karşılık gelen gösterimi. requiredSize değiştirici kısıtlamaları, boyut değiştirici kısıtlamalarını geçersiz kılar.
Şekil 11. requiredSize değiştiricisi, size değiştiricisinden 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 belirlemeden bırakabilirsiniz. Benzer şekilde, height değiştiricisiyle sabit bir yükseklik ayarlayabilir ancak genişliği belirlemeden bırakabilirsiniz:

Biri genişlik değiştirici ve kapsayıcı temsili, diğeri ise yükseklik değiştirici ve temsili içeren iki kullanıcı arayüzü ağacı.
Şekil 12. width değiştiricisi ve height değiştiricisi, sırasıyla sabit bir genişlik ve yükseklik ayarlar.

sizeIn değiştiricisi

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

Minimum ve maksimum genişlik ve yükseklik değerleri ayarlanmış sizeIn değiştiricisine sahip bir kullanıcı arayüzü ağacı ve bunun bir kapsayıcı içindeki temsili.
Şekil 13. sizeIn değiştirici; minWidth, maxWidth, minHeight ve maxHeight ayarlanmış.

Örnekler

Bu bölümde, zincirleme değiştiriciler içeren çeşitli kod snippet'lerinin çıkışı gösterilir ve açıklanır.

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

Bu snippet aşağıdaki çıkışı üretir:

Üst kapsayıcısını dolduran mavi bir kare.
Şekil 14. Image, değiştirici zinciri sonucunda maksimum boyutu doldurur.
  • fillMaxSize değiştiricisi, hem minimum genişliği hem de yüksekliği maksimum değere (300dp genişlik ve 200dp yükseklik) 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 x 200 boyutundaki tam kısıtlama sınırlarını da verir.
  • Image bu sınırlara uyar ve 300 x 200 boyutunu bildirir. Bu boyut, ağacın en üstüne kadar iletilir.

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

Bu snippet aşağıdaki çıkışı üretir:

Üst kapsayıcısının ortasında küçük mavi bir kare.
Şekil 15. Image ortalanır ve 50dp olarak boyutlandırılır.
  • fillMaxSize değiştiricisi, kısıtlamaları hem minimum genişliği hem de yüksekliği maksimum değere (genişlikte 300dp ve yükseklikte 200dp) ayarlayacak şekilde uyarlar.
  • wrapContentSize değiştiricisi, minimum kısıtlamaları sıfırlar. fillMaxSize, sabit kısıtlamalarla sonuçlanırken wrapContentSize, sınırlı kısıtlamalara geri döndürür. Sonraki düğüm artık tüm alanı kaplayabilir veya tüm alandan daha küçük olabilir.
  • size değiştiricisi, kısıtlamaları 50 için minimum ve maksimum sınırlara ayarlar.
  • Image, 50 x 50 boyutuna çözümlenir ve size değiştirici bunu iletir.
  • wrapContentSize değiştiricisinin özel bir özelliği vardır. Alt öğesini alır ve kendisine iletilen minimum sınırların merkezine yerleştirir. Bu nedenle, üst öğelerine ilettiği boyut, kendisine iletilen minimum sınırlara eşittir.

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

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

Bu snippet aşağıdaki çıkışı üretir:

Değiştirici sırası nedeniyle yanlış kırpılan dairesel şekil.
Şekil 16. Değiştirici sırası nedeniyle yanlış kırpılmış bir şekil.
  • 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 ve 100dp x 100dp boyutunu bildirir.
  • padding değiştiricisi, Image tarafından bildirilen boyuta her taraftan 10dp ekler. Bu nedenle, dolgulu düzen 120dp genişlik ve yükseklik bildirir.
  • Çizim aşamasında clip değiştiricisi, 120dp x 120dp boyutundaki bir tuval üzerinde çalışır. Bu boyutta bir daire maskesi oluşturur.
  • padding değiştiricisi, içeriğini her taraftan 10dp kadar içe doğru kaydırır. Bu da Image için tuval boyutunu 100dp x 100dp değerine düşürür.
  • Image, bu daha küçük tuvalde çizilir. Resim, orijinal 120dp dairesine göre kırpılır. Bu nedenle, sonuç dairesel olmaz.
Önceki
Değiştiriciler
Sonraki
Özel değiştiriciler