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, birleştirilebilir öğelere iletilen kısıtlamaları etkileyebilir.

Bu sayfada, zincirlenmiş değiştiricilerin kısıtlamaları ve dolayısıyla bileşenlerin ö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 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 bileşiğe birden fazla değiştirici eklemek, değiştirici zinciri oluşturur. 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ü sarar. Ö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ı ancak kullanıcı arayüzü ağacındaki birleştirilebilirler, 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ı: Nodun maksimum ve minimum genişliği ve yüksekliği vardır.

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

• Sınırsız: Düğüm herhangi bir boyutla kısıtlanmamıştır. 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 genişliği 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 ü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 aktarılır.

Bir üst öğe, alt öğelerini ölçerken her alt öğeye ne kadar büyük veya küçük olabileceklerini 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 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 kapsayıcı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 bağlı kalırken iletilen kısıtlamalarla olabildiğince uyumlu olur:

Ş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 ayarlayabilir ancak genişliği kararsız 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 kısıtlamalar 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, zincirlenmiş değiştiricileri içeren çeşitli kod snippet'lerinin çıkışı gösterilip açıklanmaktadır.

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, yükseklikte 200dp) ayarlayacak şekilde kısıtlamaları değiştirir.
• size değiştirici 50dp boyutunu kullanmak istese bile 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ştirici, 50 için minimum ve maksimum sınırları ayarlayarak kısıtlamaları belirler.
• Image, 50 boyutunda 50 boyutunda bir boyuta çözünür ve size değiştirici bunu iletir.
• 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. Bu nedenle, üst öğelerine ilettiği boyut, kendisine iletilen minimum sınırlara eşittir.

Yalnızca üç değiştiriciyi birleştirerek, derlenebilir öğe için bir boyut tanımlayabilir ve öğeyi üst öğesinin ortasına yerleştirebilirsiniz.

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

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

• 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 100 boyutunda 100dp raporlar.
  • 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 ile 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.