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 birlikte kullanabilirsiniz. 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, zincirleme düzenleyicilerin 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 birbirini nasıl etkilediğini anlamak için, birleştirme 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üğümler olarak görselleştirebilirsiniz:

Bir composable'a birden fazla değiştirici eklemek, değiştiricilerden oluşan bir zincir oluşturur. Birden fazla değiştiriciyi zincirlediğinizde her değiştirici düğümü zincirin geri kalanını ve düzen düğümünü kapsar. Ö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 ilerleyen algoritma aynı kalır ancak her değiştirici düğüm de ziyaret edilir. Bu sayede, bir değiştirici, kapsadığı 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ının uygulanması, tek bir düzen düğümünü sarmalayan bir değiştirici zincirinden oluşur. Row ve Column öğelerinin uygulamaları, alt öğelerinin nasıl yerleştirileceğini açıklayan düzen düğümleridir.

Ö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, bu zihinsel modeli değiştirici zincirleme hakkında akıl yürütmek ve bunun composable'ların boyutunu nasıl etkilediği konusunda kullanma şekli açıklanmaktadır.

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

Düzen aşamasında, 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ılır:

1. Çocukları ö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. Çocukları 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üzenin maksimum ve minimum genişliği ve yüksekliği vardır.

• Sınırsız: Düğüm herhangi bir boyuta göre kısıtlanmaz. Maksimum genişlik ve yükseklik sınırları sonsuz olarak ayarlanır.

• Tam: Düğümden tam boyut şartına 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 izler. Örneğin, bir kısıtlama genişliği sınırlarken sınırsız maksimum yüksekliğe izin verebilir veya tam bir genişlik belirleyip sınırlı bir yükseklik sağlayabilir.

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?

Constraints in the layout phase (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çtüğünde her bir alt öğeye bu kısıtlamaları sağlayarak ne kadar büyük veya küçük olabileceklerini bildirir. Ardından, kendi boyutuna karar verirken kendi üst öğeleri tarafından iletilen kısıtlamalara da uyar.

Genel olarak algoritma ş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. Çocuk, ö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. Çocukları olmayan bir düğüme ("yaprak düğüm" olarak adlandırılır) ulaşıldığında, düğüm boyutunu iletilen kısıtlamalara göre belirler ve bu çözümlenmiş boyutu üst öğesine döndürür.
4. Üst, kısıtlamalarını bu alt öğenin ölçümlerine göre uyarlar ve bu ayarlanmış kısıtlamalarla bir sonraki alt öğesini ç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 bildirir.
6. Bu şekilde, tüm ağaç derinlemesine olarak geçilir. Sonunda tüm düğümler boyutlarına karar verir ve ölçüm adımı tamamlanır.

Ayrıntılı bir örnek için Constraints and modifier order (Kısıtlamalar ve değiştirici sırası) başlıklı videoyu izleyin.

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

Önceki bölümde, bazı değiştiricilerin kısıtlama 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 belirtir.

Ö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ıdır. Genişlik 100dp ile 300dp arasında, yükseklik ise 100dp ile 200dp arasında olabilir:

size değiştiricisi, gelen kısıtlamaları kendisine iletilen değerle eşleşecek şekilde uyarlar. Bu örnekte değer 150dp'dı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 büyükse değiştirici, iletilen kısıtlamalara uyarken iletilen kısıtlamalarla olabildiğince eşleşir:

Birden fazla size değiştiricinin zincirlenmesinin 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ştirici daha küçük veya daha büyük bir boyut istese bile, yine de iletilen tam sınırlara uyması gerekir. Bu nedenle, bu değerleri geçersiz kılmaz:

requiredSize değiştirici

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ın yerine geçer ve belirttiğiniz boyutu tam sınırlar olarak iletir.

Boyut ağaçta yukarıya doğru aktarıldığında alt düğüm, kullanılabilir alana ortalanır:

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 belirleyebilir ancak yüksekliği belirlemeyebilirsiniz. Benzer şekilde, height değiştiricisiyle sabit bir yükseklik belirleyebilir ancak genişliği belirlemeyebilirsiniz:

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ı kontrol sağlamanız gerekiyorsa sizeIn değiştiricisini kullanın.

Örnekler

Bu bölümde, zincirleme değiştiriciler içeren çeşitli kod snippet'lerinden elde edilen çıkış gösterilmekte ve açıklanmaktadır.

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

Bu snippet aşağıdaki çıktıyı üretir:

• fillMaxSize değiştiricisi, hem minimum genişliği hem de yüksekliği maksimum değere (genişlikte 300dp, 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ştiricisi, 300 ile 200 arasındaki tam kısıtlama sınırlarını da çıkış olarak verir ve size değiştiricisinde sağlanan değeri etkili bir şekilde yoksayar.
• Image, bu sınırlara uyar ve 300 x 200 boyutunu bildirir. Bu boyut, ağacın tamamına iletilir.

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

Bu snippet aşağıdaki çıktıyı üretir:

• fillMaxSize değiştiricisi, hem minimum genişliği hem de yüksekliği maksimum değere (genişlikte 300dp, yükseklikte 200dp) ayarlamak için kısıtlamaları uyarlar.
• wrapContentSize değiştiricisi, minimum kısıtlamaları sıfırlar. Bu nedenle, fillMaxSize sabit kısıtlamalara yol açarken wrapContentSize sınırlı kısıtlamalara geri döner. Aşağıdaki düğüm artık tekrar tüm alanı kaplayabilir veya tüm alandan daha küçük olabilir.
• size değiştiricisi, 50 için sınırlamaları minimum ve maksimum sınırlara ayarlar.
• Image, 50 x 50 boyutuna çözümlenir ve size değiştiricisi bunu iletir.
• wrapContentSize değiştiricisinin özel bir özelliği var. Alt öğeyi alır ve kendisine iletilen kullanılabilir minimum sınırlara göre ortalar. Bu nedenle, üst öğelerine ilettiği boyut, kendisine iletilen minimum sınırlara eşittir.

Yalnızca üç değiştiriciyi birleştirerek composable'ın boyutunu tanımlayabilir ve üst öğesinde ortalayabilirsiniz.

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ı ü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 100 x 100dp boyutunu bildirir.
  • padding değiştiricisi tüm boyutlara 10dp eklediğinden bildirilen genişlik ve yüksekliği 20dp artırır.
  • Artık çizim aşamasında, clip değiştiricisi 120 x 120dp boyutlarındaki bir tuval üzerinde çalışır. Bu nedenle, bu boyutta bir daire maskesi oluşturur.
  • padding değiştiricisi, içeriğini tüm boyutlarda 10dp kadar içe yerleştirir. Bu nedenle, tuval boyutunu 100dp kadar azaltarak 100 yapar.
  • Image, bu tuvalde çizilir. Resim, 120dp orijinal dairesine göre kırpıldığından sonuç yuvarlak değildir.