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

Compose'da birden fazla değiştiriciyi zincirleyerek bir composable'ın görünümünü ve tarzını değiştirebilirsiniz. Bu değiştirici zincirleri, composable'lara iletilen, genişlik ve 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, bileşim 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üğümleri olarak görselleştirebilirsiniz:

Şekil 1. Kullanıcı arayüzü ağacındaki düzen düğümlerini sarmalayan düzenleyiciler.

Bir composable'a birden fazla değiştirici eklemek, bir değiştirici zinciri oluşturur. Birden fazla değiştiriciyi zincirlediğinizde her bir değiştirici düğüm, zincirliğin geri kalanını ve içindeki düzen düğümünü sarmalar. Örneğin, bir clip ve bir size değiştiricisini zincirlediğinizde clip değiştirici düğümü size değiştirici düğümünü, daha sonra da Image düzen düğümünü sarmalar.

Düzen aşamasında, ağacı atan algoritma aynı kalır ancak her değiştirici düğüm de ziyaret edilir. Bu şekilde bir değiştirici, sarmaladığı 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ı, tek bir düzen düğümünü sarmalayan bir değiştirici zincirinden oluşur. Row ve Column uygulamaları, alt öğelerinin nasıl yerleştirileceğini açıklayan düzen düğümleridir.

Şekil 2. Şekil 1'deki 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ştirici veya düzen düğümünü sarmalar.
• Düzen düğümleri birden çok alt düğüm düzenleyebilir.

Aşağıdaki bölümlerde, bu zihinsel modelin düzenleyici zincirleme olarak nasıl kullanılacağı ve composable'ların boyutunu nasıl etkilediği açıklanmaktadır.

Düzen 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 algoritmayı izler:

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ştir: Her alt düğüm, düğümün 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. Sınırlamalar, 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.

Ş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ı sonsuza ayarlanır.

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

• Tam: Düğümün tam boyut gereksinimine uyması istenir. Minimum ve maksimum sınırlar aynı değere ayarlanır.

Şekil 5. Kesin sınırlamalar.

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

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

Sonraki bölümde, bu kısıtlamaların bir üst öğeden alt öğeye nasıl geçirildiği 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ı sırasında kısıtlamalar, kullanıcı arayüzü ağacında üst öğeden alt öğeye geçirilir.

Bir üst düğüm, alt öğelerini ölçtüğünde, her alt düğüme bu kısıtlamaları uygulayarak ne kadar büyük veya küçük olduklarını bilmelerini sağlar. Daha sonra, kendi boyutuna karar verirken kendi üst kuruluşunun getirdiği kısıtlamalara da uyar.

Genel olarak, algoritma aşağıdaki şekilde çalışır:

1. Gerçekte işgal etmek istediği boyutu belirlemek için kullanıcı arayüzü ağacındaki kök düğüm, 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 yönlendirir. 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 daha sonra uygun şekilde yeniden boyutlandırılır.
3. Alt öğesi olmayan bir düğüme ("yaprak düğümü" olarak anılır.) ulaşıldığında, bu düğüm, aktarılan kısıtlamalara göre boyutunu belirler ve bu çözümlenmiş boyutu üst kuruluşuna döndürür.
4. Ebeveyn, kısıtlamalarını bu çocuğun ölçümlerine göre uyarlar ve ayarlanmış bu kısıtlamalarla bir sonraki çocuğunu arar.
5. Bir üst öğenin tüm alt öğeleri ölçüldüğünde, üst düğüm kendi boyutuna karar verir ve bunu kendi üst düğümüne iletir.
6. Bu şekilde, ilk önce derinlikten başlayarak ağacın tamamı geçer. En sonunda, tüm düğümler boyutlarına karar vermiş ve ölçüm adımı tamamlanmıştır.

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

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

Önceki bölümde, bazı değiştiricilerin sınırlama 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 tanımlar.

Ö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ı olup 100dp ile 300dp arasında genişliklere ve 100dp ile 200dp arasında yüksekliklere izin verir:

Şekil 7. Kullanıcı arayüzü ağacında ve bunun kapsayıcı içindeki temsilinde sınırlı kısıtlamalar.

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

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 daha büyükse değiştirici, iletilen kısıtlamalara uymaya devam ederken aktarılan kısıtlamaları en yakın şekilde eşleştirir:

Şekil 9. İletilen kısıtlamaya mümkün olduğunca bağlı olan size değiştiricisi.

Birden çok size değiştiricisini zincirlemenin 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ştiricisi daha küçük veya daha büyük bir boyut istese bile, iletilen sınırlara yine de uyması gerekir. Böylece 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ştiriciden oluşan zincir.

requiredSize değiştirici

Düğümünüzün gelen kısıtlamaları geçersiz kılmasına ihtiyacınız varsa 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 aktarır.

Boyut ağaçtan yukarıya iletildiğinde, alt düğüm kullanılabilir alanda ortalanır:

Şekil 11. size değiştiricisinden gelen kısıtlamaları geçersiz kılan requiredSize değiştiricisi.

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ştiricisini kullanarak sabit bir genişlik ayarlayabilir, ancak yüksekliği kararsız bırakabilirsiniz. Benzer şekilde, height değiştiricisini kullanarak sabit bir yükseklik ayarlayabilir, ancak genişliği kararsız bırakabilirsiniz:

Şekil 12. Sırasıyla sabit bir genişlik ve yükseklik ayarlayan width değiştiricisi ve height değiştiricisi.

sizeIn değiştirici

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

Şekil 13. minWidth, maxWidth, minHeight ve maxHeight içeren sizeIn değiştiricisi.

Örnekler

Bu bölümde, zincirleme değiştiricilere sahip birkaç kod snippet'inin çıkışı 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, kısıtlamaları değiştirerek minimum genişlik ve yüksekliği maksimum değere (genişlik 300dp ve yükseklik olarak 200dp) ayarlar.
• size değiştiricisi, 50dp boyutunu kullanmak istese de gelen minimum kısıtlamalara uyması gerekir. Bu nedenle size değiştiricisi, size değiştiricisinde sağlanan değeri etkin bir şekilde yok sayarak 300 değerinin tam sınırlama sınırlarını 200 x çıktısına çıkarır.
• Image, bu sınırları izler ve 200 x 300 boyutunda bir değer bildirir. Bu boyut, ağacın en sonuna kadar geçirilir.

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şlik: 300dp, yükseklik: 200dp) ayarlayacak şekilde uyarlar.
• wrapContentSize değiştiricisi, minimum kısıtlamaları sıfırlar. Bu nedenle, fillMaxSize sabit kısıtlamalarla sonuçlanırken wrapContentSize, sınırlı kısıtlamalara geri döndürür. Aşağıdaki düğüm artık tüm alanı kaplayabilir veya tüm alandan daha küçük olabilir.
• size değiştiricisi, kısıtlamaları 50 olan minimum ve maksimum sınırlara ayarlar.
• Image, 50 x 50 boyutuna çözümlenir ve size değiştiricisi bunu yönlendirir.
• wrapContentSize değiştiricisinin özel bir özelliği vardır. Alt öğesini alır ve kendisine iletilen mevcut minimum sınırların ortasına yerleştirir. Dolayısıyla üst öğelerine aktardığı boyut, kendisine geçirilen minimum sınırlara eşit olur.

Yalnızca üç değiştiriciyi birleştirerek composable için bir boyut tanımlayabilir ve composable'ı üst öğede 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ı azaltır.
  • size değiştiricisi, tüm kısıtlamaları 100dp olarak ayarlar.
  • Image, bu kısıtlamalara uyar ve 100 x 100dp boyutunda bir boyut raporlar.
  • padding değiştiricisi, tüm boyutlara 10dp eklendiğinden bildirilen genişlik ve yüksekliği 20dp artırır.
  • Şimdi çizim aşamasında, clip değiştiricisi 120dp adlı tuval üzerinde 120 işlevi görür. Dolayısıyla, bu boyutta bir daire maskesi oluşturur.
  • Daha sonra padding değiştiricisi, içeriğini tüm boyutlarda 10dp oranında ekler ve böylece tuval boyutunu 100dp oranında 100 olacak şekilde düşürür.
  • Bu tuvalde Image çizilir. Resim, orijinal 120dp dairesine göre kırpılır. Dolayısıyla çıktı, yuvarlak olmayan bir sonuçtur.