ConstraintLayout
, composable'ları öğelere göre yerleştirebileceğiniz bir düzendir
composable’ı hazırladık. Bu, birden fazla iç içe yerleştirilmiş
Row
, Column
, Box
ve diğer özel düzen öğeleri. ConstraintLayout
.
Daha karmaşık hizalamaya sahip daha büyük düzenlerin uygulanmasında kullanışlıdır
gereksinimlerini karşılayın.
Aşağıdaki senaryolarda ConstraintLayout
kullanabilirsiniz:
- Öğeleri konumlandırmak için birden fazla
Column
veRow
öğesinin iç içe yerleştirilmemesini sağlamak için ekran okuyucuyu kullanın. - composable'ları diğer composable'lara göre konumlandırmak veya kurallar, bariyerler veya zincirler temelinde derleyebilirsiniz.
Görünüm sisteminde, büyük boyutlu öğeler oluşturmak için önerilen yöntem ConstraintLayout
düz görünüm hiyerarşisinin performans açısından daha iyi olduğunu görebilirsiniz.
iç içe yerleştirilmiş görünümlerdir. Ancak Compose'da bu bir mesele değildir.
verimli bir şekilde yönetmenizi sağlar.
ConstraintLayout
hizmetini kullanmaya başla
ConstraintLayout
öğesini Compose'da kullanmak için bu bağımlılığı
build.gradle
(
Oluşturma kurulumu):
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"
Compose'da ConstraintLayout
,
DSL:
- Şu komutu kullanarak
ConstraintLayout
içindeki her composable için referans oluşturun:createRefs()
veyacreateRefFor()
- Kısıtlamalar, şunu alan
constrainAs()
değiştiricisi kullanılarak sağlanır: referansa ilişkin bir parametredir ve bu referansın kısıtlamalarını lambda. - Kısıtlamalar,
linkTo()
veya diğer faydalı yöntemler kullanılarak belirtilir. parent
, kısıtlamaları belirtmek için kullanılabilecek mevcut bir referansConstraintLayout
composable'a yöneliyor.
ConstraintLayout
kullanan bir composable örneğini burada bulabilirsiniz:
@Composable fun ConstraintLayoutContent() { ConstraintLayout { // Create references for the composables to constrain val (button, text) = createRefs() Button( onClick = { /* Do something */ }, // Assign reference "button" to the Button composable // and constrain it to the top of the ConstraintLayout modifier = Modifier.constrainAs(button) { top.linkTo(parent.top, margin = 16.dp) } ) { Text("Button") } // Assign reference "text" to the Text composable // and constrain it to the bottom of the Button composable Text( "Text", Modifier.constrainAs(text) { top.linkTo(button.bottom, margin = 16.dp) } ) } }
Bu kod, Button
öğesinin üst kısmını şu kenar boşluğuyla üst öğeyle sınırlandırır:
Button
altına 16.dp
ve alt kısmında Text
kenar boşluğu ile
16.dp
.
Ayrıştırılmış API
ConstraintLayout
örneğinde,
kısıtlamalar satır içinde, composable'da bir değiştiriciyle
için de geçerli. Ancak,
kısıtlanmasını sağlayabilirsiniz. Örneğin, ekip arkadaşlarınızın
ekran yapılandırmasına göre kısıtlamaları değiştirebilir veya
ve kısıt kümeleri.
Bunun gibi durumlarda ConstraintLayout
öğesini farklı bir şekilde kullanabilirsiniz:
ConstraintLayout
öğesine parametre olarak birConstraintSet
iletin.ConstraintSet
işlevinde oluşturulan referanslarılayoutId
değiştiricisi.
@Composable fun DecoupledConstraintLayout() { BoxWithConstraints { val constraints = if (minWidth < 600.dp) { decoupledConstraints(margin = 16.dp) // Portrait constraints } else { decoupledConstraints(margin = 32.dp) // Landscape constraints } ConstraintLayout(constraints) { Button( onClick = { /* Do something */ }, modifier = Modifier.layoutId("button") ) { Text("Button") } Text("Text", Modifier.layoutId("text")) } } } private fun decoupledConstraints(margin: Dp): ConstraintSet { return ConstraintSet { val button = createRefFor("button") val text = createRefFor("text") constrain(button) { top.linkTo(parent.top, margin = margin) } constrain(text) { top.linkTo(button.bottom, margin) } } }
Daha sonra, kısıtlamaları değiştirmeniz gerektiğinde
ConstraintSet
ConstraintLayout
kavram
ConstraintLayout
; kurallar, bariyerler ve zincirler gibi kavramları içerir
kolayca oluşturabileceğiniz bir Google Ads aracından bahsedelim.
Kurallar
Yönergeler, düzenleri tasarlamak için kullanabileceğiniz küçük görsel yardımcılardır. Özelleştirilebilirler
bir yönergeyle sınırlandırılır. Yönergeler, öğelerin doğru bir şekilde
üst composable'ın içindeki belirli dp
veya percentage
.
Dikey ve yatay olmak üzere iki farklı kural türü vardır. İkisi
yatay olanlar top
ve bottom
, iki dikey ise start
ve
end
.
ConstraintLayout { // Create guideline from the start of the parent at 10% the width of the Composable val startGuideline = createGuidelineFromStart(0.1f) // Create guideline from the end of the parent at 10% the width of the Composable val endGuideline = createGuidelineFromEnd(0.1f) // Create guideline from 16 dp from the top of the parent val topGuideline = createGuidelineFromTop(16.dp) // Create guideline from 16 dp from the bottom of the parent val bottomGuideline = createGuidelineFromBottom(16.dp) }
Kural oluşturmak için yönerge türüyle createGuidelineFrom*
kullanın
gereklidir. Bu işlem şurada kullanılabilecek bir referans oluşturur:
Modifier.constrainAs()
blok.
Bariyerler
Bariyerler, şuna göre sanal bir kural oluşturmak için birden fazla composable'a başvuruyor: en uç widget'ı buluyorum.
Bariyer oluşturmak için createTopBarrier()
(veya createBottomBarrier()
,
createEndBarrier()
, createStartBarrier()
) ve aşağıda belirtilen referansları
bariyeri oluşturmalı.
ConstraintLayout { val constraintSet = ConstraintSet { val button = createRefFor("button") val text = createRefFor("text") val topBarrier = createTopBarrier(button, text) } }
Bariyer daha sonra bir Modifier.constrainAs()
blokta kullanılabilir.
Zincirler
Zincirler, tek bir eksende (yatay veya dikey) grup benzeri davranış sağlar , Diğer eksen bağımsız olarak kısıtlanabilir.
Zincir oluşturmak için createVerticalChain
veya createHorizontalChain
tuşlarını kullanın:
ConstraintLayout { val constraintSet = ConstraintSet { val button = createRefFor("button") val text = createRefFor("text") val verticalChain = createVerticalChain(button, text, chainStyle = ChainStyle.Spread) val horizontalChain = createHorizontalChain(button, text) } }
Zincir daha sonra Modifier.constrainAs()
blokunda kullanılabilir.
Zincir, nasıl anlaşma yapılacağına karar veren farklı ChainStyles
ile yapılandırılabilir
bir composable'ı çevreleyen alanla, örneğin:
ChainStyle.Spread
: Alan, tüm composable'lara eşit olarak dağıtılmıştır. ilk composable'dan önceki ve sonuncudan sonraki boş alan dahil composable'dan bahsetmek istiyorum.ChainStyle.SpreadInside
: Alan, Google ilk composable'dan önce veya son composable.ChainStyle.Packed
: Alan, ilk reklamdan önce ve sonra gelen kutucuklara dağıtılır. son composable, composable'ların aralarında boşluk bırakmadan, bir iletişim kurmaktır.
Daha fazla bilgi
API'lerin Compose'da ConstraintLayout
hakkında daha fazla bilgi edinin:
ConstraintLayout
kullanan örnekler oluştur.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- E-posta Yazma'da odaklan
- Jetpack Compose için Kotlin
- Oluşturma düzeniyle ilgili temel bilgiler