ConstraintLayout
, bileşenleri ekrandaki diğer bileşenlere göre yerleştirmenize olanak tanıyan bir düzendir. Birden çok iç içe yerleştirilmiş Row
, Column
, Box
ve diğer özel düzen öğelerini kullanmaya alternatiftir. 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:
- Kodun okunabilirliğini artırmak için öğeleri ekranda konumlandırmak üzere birden fazla
Column
veRow
iç içe yerleştirmekten kaçının. - Bileşenleri diğer bileşenlere göre konumlandırmak veya bileşenleri kurallara, bariyerlere ya da zincirlere göre konumlandırmak için kullanılır.
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
Oluşturma'da ConstraintLayout
'ü kullanmak için build.gradle
'unuza bu bağımlılığı eklemeniz gerekir (Oluşturma kurulumuna ek olarak):
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"
Compose'da ConstraintLayout
,
DSL:
createRefs()
veyacreateRefFor()
öğesini kullanarakConstraintLayout
içindeki her bir derlenebilir öğe için referans oluşturun.- 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ı 16.dp
kenar boşluğuyla ebeveyne, Button
öğesinin alt kısmını da 16.dp
kenar boşluğuyla Text
öğesine sınırlar.
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. Bununla birlikte, bazı durumlarda kısıtlamaların geçerli oldukları düzenlerden ayrılması tercih edilir. Örneğin, kısıtlamaları ekran yapılandırmasına göre değiştirmek veya iki kısıtlama grubu arasında animasyon yapmak isteyebilirsiniz.
Bunun gibi durumlarda ConstraintLayout
öğesini farklı bir şekilde kullanabilirsiniz:
ConstraintLayout
işlevine parametre olarak birConstraintSet
gönderin.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
, Composable'ınızdaki öğeleri yerleştirmenize yardımcı olabilecek kurallar, engeller ve zincirler gibi kavramlar içerir.
Kurallar
Yönergeler, düzenleri tasarlamak için kullanabileceğiniz küçük görsel yardımcılardır. Birleştirilebilirler bir yönergeyle sınırlanabilir. Kılavuzlar, öğeleri üst bileşimin belirli bir dp
veya percentage
noktasına yerleştirmek için kullanışlıdır.
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 gerekli kural türüyle birlikte createGuidelineFrom*
öğesini kullanın. Bu işlem, Modifier.constrainAs()
bloğunda kullanılabilecek bir referans oluşturur.
Bariyerler
Engeller, belirtilen taraftaki en uç widget'a göre sanal bir kılavuz oluşturmak için birden fazla bileşene referans verir.
Bariyer oluşturmak için createTopBarrier()
(veya: createBottomBarrier()
, createEndBarrier()
, createStartBarrier()
) kullanın ve bariyerin oluşturulmasını istediğiniz referansları sağlayın.
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
simgesini 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, ilk bileşenden önceki ve son bileşenden sonraki boş alan da dahil olmak üzere tüm bileşenlere eşit olarak dağıtılır.ChainStyle.SpreadInside
: Boşluk, ilk bileşenden önce veya son bileşenden sonra boşluk bırakılmadan tüm bileşenler arasında eşit olarak dağıtılır.ChainStyle.Packed
: Boşluk, ilk derlenebilir öğenin önüne ve son derlenebilir öğenin arkasına dağıtılır. Derlenebilir öğeler, aralarında boşluk olmadan birlikte paketlenir.
Daha fazla bilgi
ConstraintLayout
kullanan Compose örnekleri bölümünde, API'lerin kullanıldığı Compose'daki ConstraintLayout
hakkında daha fazla bilgi edinin.
Şu anda öneri yok.
Google Hesabınızda oturum açmayı deneyin.