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, iletilen kısıtlamaları etkileyebilir. composable'lara aktarıyor.

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. Zaman birden çok değiştirici zinciriniz varsa, her değiştirici düğüm zincirin geri kalanını sarmalar ve içindeki düzen düğümünü bulun. Ö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. Böylece, bir değiştirici, boyutu gereksinimleri ve sarmaladığı değiştiricinin veya düzen düğümünün yerleşimi.

Ş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ş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 zihinsel modelin projedeki riskleri ve composable'ların boyutunu nasıl etkilediği hakkında daha fazla bilgi edineceksiniz.

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

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

1. Alt öğeleri ölç: Bir düğüm, varsa alt öğelerini ölçer.
2. Kendi boyutuna karar verme: Bu ölçümlere göre düğüm kendi başına karar verir. seçin.
3. Alt öğeleri yerleştir: Her alt düğüm, bir düğümün kendi öğesine göre yerleştirilir. dokunun.

Constraints, ilk iki düğümde düğümler için doğru boyutların bulunmasına yardımcı olur. adımlarında 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ığı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.

ziyaret edin.

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

ziyaret edin.

Ş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ı.

ziyaret edin.

Şekil 5. Tam kısıtlamalar.

• Kombinasyon: Düğüm, yukarıdaki kısıtlama türlerinin bir kombinasyonunu izler. Örneğin, bir sınırlama, genişliği sınırlandırırken sınırsız maksimum yükseklik oluşturabilir veya tam bir genişlik ayarlayabilir, ancak sınırlı bir yükseklik sağlayabilirsiniz.

ziyaret edin.

Ş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 öğe olarak ayarlanı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 düğüm kendi alt öğelerini ölçtüğünde, her bir ne kadar büyük veya küçük olabilecekleri konusunda onları bilgilendirmesini isteyin. Böylece, kendi boyutuna karar verirse, zaman çizelgesinde geçirilen kısıtlamalara da anne ve babası olabilir.

Algoritma genel olarak aşağıdaki şekilde çalışır:

1. Gerçekte işgal etmek istediği boyuta karar vermek 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ıtlanmasını sağlar. Kısıtlamalar değiştiriciye aktarılır zincirini olduğu gibi kullanabilirsiniz. İlgili içeriği oluşturmak için kullanılan kısıtlamalar uygun şekilde yeniden boyutlandırılır.
3. Hiç alt öğesi olmayan bir düğüme ulaşıldığında ("yaprak " olarak adlandırılır) düğüm"), verilen kısıtlamalara bağlı olarak boyutunu belirler ve bu çözümlenen boyutu üst öğesine döndürür.
4. Ana yayıncı, kısıtlamalarını bu çocuğun ölçümlerine göre uyarlar ve uyarlanan bu 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 anne veya babasına iletir.
6. Bu şekilde, derinlikten önce tüm ağaç geçilir. Sonunda tüm düğümlerin boyutlarına karar vermiş ve ölçüm adımı tamamlanmış olacaktır.

Daha 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ıtlamayı etkileyebileceğini, seçin. 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 bildirir.

Örneğin, aşağıdaki kullanıcı arayüzü ağacı, 300dp kapsayıcısında oluşturulmalıdır 200dp tarafından. Kısıtlamalar sınırlandırılmıştır. Bu sayede, 100dp ile genişlikler için 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 bunun ekleyin.

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:

Ş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üçükse veya en büyük sınırlama sınırından daha büyükse, değiştirici, iletilen mümkün olduğunca yakın bir şekilde sınırlamalarına kadar içinde:

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

Birden fazla size değiştiriciyi 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. Hatta ikinci boyut değiştirici daha küçük veya daha büyük bir boyut istese de geçen tam sınırlara bağlı kalarak 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

Aşağıdakilere ihtiyacınız varsa size yerine requiredSize değiştiricisini kullanın düğümünü değiştirin. 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. Şuradan gelen kısıtlamaları geçersiz kılan requiredSize değiştiricisi: size değiştiricisi var.

width ve height değiştiriciler

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 ayarlayabilirsiniz ancak genişlik kararsız:

Ş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. Daha ayrıntılı kontrole ihtiyacınız varsa sizeIn değiştiricisini kullanın tercih edebilirsiniz.

Şekil 13. minWidth, maxWidth, minHeight vesizeIn maxHeight sete katıldı.

Ö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ştiricisi 50dp boyutunu kullanmak istese de gelen minimum kısıtlamalara uymanız gerekir. Dolayısıyla size değiştiricisi, aynı zamanda, 200 kadar etkili bir şekilde 300 için tam kısıtlama sınırlarını da verir. size değiştiricisinde sağlanan değer yok sayılıyor.
• 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ışı üretir:

• fillMaxSize değiştiricisi, kısıtlamaları hem minimum değeri ayarlayacak şekilde uyarlar genişlik ve yüksekliği maksimum değere göre — 300dp genişlik ve 200dp inç yükseklik.
• 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 tüm alanı kaplayabilir veya alanın tamamından daha küçük olmalıdır.
• size değiştiricisi, kısıtlamaları 50.
• Image, 50 başına 50 ve size değiştiricisine dönüşür o da budur.
• 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ş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 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 tuval boyutunu 100dp x 100 olacak şekilde düşürür.
  • Image bu tuvalde çizilir. Resim, 120dp değerinde bir orijinal daire, yani çıkış yuvarlak olmayan bir sonuçtur.