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

Oluşturma'da birden çok değiştiriciyi bir araya getirerek görünümü ve hissi veriyor. 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 zincirli değiştiricilerin kısıtlamaları nasıl etkilediği açıklanmaktadır. Bu da composable'ların ölçümü ve yerleştirilmesi.

Kullanıcı arayüzü ağacındaki değiştiriciler

Değiştiricilerin birbirlerini nasıl etkilediğini anlamak için bunlar beste aşamasında oluşturulan kullanıcı arayüzü ağacında görünür. Örneğin, daha fazla bilgi için Beste bölümüne bakın.

Kullanıcı arayüzü ağacında, değiştiricileri düzen için sarmalayıcı düğümleri olarak görselleştirebilirsiniz. düğümler:

Şekil 1. Kullanıcı arayüzü ağacında düzen düğümlerini sarmalayan değiştiriciler.

Bir composable'a birden fazla değiştirici eklendiğinde bir 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ü sarar. Örneğin, bir clip ve bir size değiştiricisi, clip değiştiricisi düğüm, size değiştirici düğümünü sarmalar. Bu, Image düzen düğümünü sarmalar.

Düzen aşamasında, ağaçta yürüyen 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 composable'larının uygulanması kendileri tek bir düzen düğümünü saran bir değiştirici zincirinden oluşur. İlgili içeriği oluşturmak için kullanılan Row ve Column uygulamaları, basitçe ele aldığımız düzen düğümleridir: yerleştiriyorlar.

Şekil 2. Şekil 1'dekiyle aynı ağaç yapısına sahiptir, ancak Değiştirici zincirleri olarak görselleştirilmiş kullanıcı arayüzü ağacı.

Özetlemek gerekirse:

• Değiştiriciler tek bir değiştiriciyi veya düzen düğümünü sarar.
• Düzen düğümleri, birden çok alt düğüm yerleştirebilir.

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 boyutunu belirleme: 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 web sitesi için minimum ve maksimum sınırları düğümün genişliği ve yüksekliğine ayarlanır. Düğüm boyutuna karar verdiğinde, ölçülen boyutu bu boyut aralığına girmelidir.

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.

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

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

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

• Tam: Düğümün tam bir boyut gereksinimlerini karşılaması istenir. Minimum ve maksimum sınırlar aynı değere ayarlandı.

Ş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şliklerin kombinasyonları odaklanacağız.

Sonraki bölümde, bu kısıtlamaların bir üst öğeden alt öğesi olarak görünür.

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

Düzendeki kısıtlamalar konusunda açıklanan algoritmanın ilk adımında aşamasında, kısıtlamalar üst öğeden alt kuruluşa aktarılır tıklayın.

Bir üst öğe, alt öğelerini ölçerken her alt öğeye ne kadar büyük veya küçük olmalarına izin verildiğini 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. İlgili içeriği oluşturmak için kullanılan kısıtlamalar uygun şekilde 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 şekilde, derinlikten önce tüm ağaç geçilir. Sonuç olarak tüm düğümler boyutlarına karar vermiş ve ölçüm adımı tamamlanmış olacaktı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, projenizin başarısını etkileyen kısıtlar.

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ıdır ve 100dp ile genişlikler arasında 300dp ve 100dp ile 200dp arasındaki yükseklikler:

Ş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 150dp değeri kullanılmış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 büyükse değiştirici, iletilen kısıtlamalara mümkün olduğunca yakın bir şekilde eşleşirken iletilen kısıtlamalara da bağlı kalır:

Şekil 9. İletilen kısıtlamaya çok yakın olan size değiştirici yardımcı olmaktır.

Birden fazla size değiştiriciyi zincirleme işleminin 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 iletilen tam sınırlara uyması gerekir. Bu nedenle, bu değerleri geçersiz kılmaz:

Şekil 10. İki size değiştiriciden oluşan ve ikinci değerin geçtiği zincir (50dp) değerindeki değer ilk değeri (100dp) geçersiz kılmaz.

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

Boyut, ağaçta tekrar iletildiğinde alt düğüm, kullanılabilir alan:

Ş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. Entegre width değiştiricisi kullanıyorsanız sabit bir genişlik ayarlayabilir ancak yüksekliği karar vermeden bırakabilirsiniz. Benzer şekilde, height değiştiricisiyle sabit bir yükseklik ayarlayabilir ancak genişliği kararsız bırakabilirsiniz:

Şekil 12. width değiştiricisi ve height değiştiricisi sabit bir genişlik ayarı yapıyor yüksekliğini görebilirsiniz.

sizeIn değiştirici

sizeIn değiştiricisi, tam olarak minimum ve maksimum sınırlamalar ayarlamanızı sağlar seçin. 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, birden çok kod snippet'inden elde edilen çıktılar zincirleme değiştiricileridir.

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şlik ve yükseklik maksimum değere: 300dp genişlik ve 200dp emin olun.
• 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 200 x 300 boyutunda bir boyut bildirir. ağaçta enine boyuna kadar geçiyor.

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

Bu snippet aşağıdaki çıkışı 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. Şimdi, fillMaxSize sabit kısıtlamalara neden oldu, wrapContentSize kısıtlamaları tekrar sıfırlar sınırlı değildir. 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ştiricisi, 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ştiricisinin özel bir özelliği vardır. Her bir alt öğesi olan alt öğeleri içerir ve mevcut minimum sınırların işleyeceğiz. Üst öğeleri ile iletişim kurduğu boyut, emin olun.

Sadece üç değiştiriciyi birleştirerek, composable ve üst öğesi içinde ortala.

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 boyut olarak 100 100dp.
  • padding değiştiricisi tüm boyutlara 10dp ekleyerek raporlanan sayıyı artırır 20dp genişliği ve yüksekliği.
  • Çizim aşamasında, clip değiştiricisi 120 tuvalinde şu şekilde çalışır: 120dp. 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 kanvas boyutunu 100dp x 100 olacak şekilde 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.