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 zincirleyebilirsiniz. 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 birbirlerini nasıl etkilediğini anlamak için bunların, beste aşamasında oluşturulan kullanıcı arayüzü ağacında nasıl göründüğünü görselleştirmek faydalı olacaktı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üğümleri olarak görselleştirebilirsiniz:

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, clip ve size değiştiricisini zincirle eklediğinizde clip değiştiricisi düğüm, size değiştirici düğümünü sarmalar. Ardından, Image düzen düğümünü sarmalar.

Düzen aşamasında, ağaçta yürüyen algoritma aynı kalır ancak her bir değiştirici düğüm de ziyaret edilir. Bu şekilde, bir değiştirici, sarmaladığı düzenleyici 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 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.

Ö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 yerleştirebilir.

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

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

Düzen aşamasında, her bir düzen düğümünün genişliği, yüksekliği ve x, y koordinatını bulmak için üç adımlı bir algoritma kullanılır:

1. Alt öğeleri ölç: 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ştir: 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şlik ve yüksekliği vardır.

• 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 ayarlanmıştır.

• Tam: Düğümün tam bir boyut gereksinimlerini karşılaması 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 sınırlama, sınırsız bir maksimum yüksekliğe izin verirken genişliği sınırlandırabilir veya tam bir genişlik ayarlayabilir ancak sınırlı bir yükseklik sağlayabilir.

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?

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

Bir üst düğüm, alt öğelerini ölçtüğünde ne kadar büyük veya küçük olmalarına izin verildiğini bildirmek için her bir alt öğeye bu kısıtlamaları sağlar. Daha sonra kendi boyutuna karar verdiğinde, kendi üst öğelerinin getirdiği 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, gerçekte işgal etmek istediği boyuta karar vermek için alt öğelerini ölçer ve aynı kısıtlamaları ilk alt öğesine yönlendirir.
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ığı sürece kısıtlamalar, değiştirici zincirinden olduğu gibi aktarılır. Daha sonra kısıtlamalar uygun şekilde yeniden boyutlandırılır.
3. Hiç alt öğesi olmayan bir düğüme ("yaprak düğümü" olarak adlandırılır) ulaşıldığında, boyutu aktarılan kısıtlamalara göre belirler ve çözülmüş bu boyutu üst öğesine döndürür.
4. Üst yayıncı, kısıtlamalarını bu alt yayıncının ö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 düğüm kendi boyutuna karar verir ve bunu kendi üst öğesine iletir.
6. Bu şekilde, derinlikten önce tüm ağaç geçilir. Sonunda tüm düğümlerin boyutları belirlenmiş ve ölçüm adımı tamamlanmıştı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ş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 öğesinin bir kapsayıcısında oluşturulmalıdır. Kısıtlamalar sınırlanmıştır. Böylece 100dp ile 300dp arasında genişliklere ve 100dp ile 200dp arasında yüksekliklere izin verilir:

size değiştiricisi, gelen kısıtlamaları kendisine geçirilen değerle eşleşecek şekilde uyarlar. Bu örnekte 150dp değeri kullanılmış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 büyükse değiştirici, aktarılan kısıtlamalara uymaya devam ederken iletilen kısıtlamalarla mümkün olduğunca yakın bir şekilde eşleşir:

Birden fazla size değiştiriciyi zincirlemenin 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 yine de iletilen tam sınırlara uyması gerekir. Böylece bu değerler geçersiz kılınmaz:

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 yerini alır ve belirttiğiniz boyutu tam sınırlar olarak iletir.

Boyut, ağaçta tekrar 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ştiriciyle sabit bir genişlik ayarlayabilir ancak yüksekliği karar vermeden bırakabilirsiniz. Benzer şekilde, height değiştiricisiyle sabit bir yükseklik ayarlayabilirsiniz ancak genişliği belirtmeden bırakabilirsiniz:

sizeIn değiştirici

sizeIn değiştiricisi, genişlik ve yükseklik için tam olarak minimum ve maksimum sınırlamalar ayarlamanızı sağlar. Kısıtlamalar üzerinde daha ayrıntılı kontrole ihtiyacınız varsa sizeIn değiştiricisini kullanın.

Ö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 çıkışı üretir:

• 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. Dolayısıyla size değiştiricisi, size değiştiricide sağlanan değeri etkili bir şekilde yok sayarak 200 ile 300 tam kısıtlama sınırlarını da verir.
• Image, bu sınırları izler ve ağaçta tepeye kadar geçen 200 x 300 boyutunda bir boyut bildirir.

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

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şlikte 300dp ve yükseklikte 200dp) ayarlayacak şekilde uyarlar.
• wrapContentSize değiştiricisi minimum kısıtlamaları sıfırlar. Dolayısıyla fillMaxSize, sabit kısıtlamalar sağlarken wrapContentSize bunu tekrar sınırlı kısıtlamalara sıfırlar. Aşağıdaki düğüm artık tüm alanı tekrar kaplayabilir veya alanın tamamından daha küçük olabilir.
• size değiştiricisi, kısıtlamaları 50 minimum ve maksimum sınırlarına ayarlar.
• Image, 50 başına 50 boyutuna dönüşür ve size değiştiricisi bunu yönlendirir.
• wrapContentSize değiştiricisinin özel bir özelliği vardır. Alt öğesini alır ve kendisine geçirilen mevcut 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.

Sadece üç 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ştirici 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 100 boyutunda bir boyut bildirir.
  • padding değiştiricisi tüm boyutlara 10dp ekleyerek raporlanan genişliği ve yüksekliği 20dp artırır.
  • Çizim aşamasında, clip değiştiricisi 120dp adlı 120 tuvalinde çalışır. Dolayısıyla, o boyutta bir daire maskesi oluşturur.
  • Daha sonra padding değiştiricisi, içeriğini tüm boyutlarda 10dp oranında ekler. Böylece tuval boyutunu 100dp kadar 100 olacak şekilde düşürür.
  • Image bu tuvalde çizilir. Resim, 120dp hücresinin orijinal çemberine göre kırpılır. Bu nedenle, çıktı yuvarlak olmayan bir sonuçtur.