Compose'da ConstraintLayout

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 ve Row öğ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"

Not: constraintLayout-compose yapı, Jetpack Compose'u kullanabilirsiniz. En son sürümü ConstraintLayout sürüm sayfası.

Compose'da ConstraintLayout, DSL:

• Şu komutu kullanarak ConstraintLayout içindeki her composable için referans oluşturun: createRefs() veya createRefFor()
• 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 referans ConstraintLayout 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)
            }
        )
    }
}
ConstraintLayoutSnippets.kt

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:

1. ConstraintLayout öğesine parametre olarak bir ConstraintSet iletin.
2. 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)
        }
    }
}
ConstraintLayoutSnippets.kt

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)
}
ConstraintLayoutSnippets.kt

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.

Not: Spacer composable'ı kullanarak benzer bir efekt elde edebilirsiniz. Rows ve Columns.

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)
    }
}
ConstraintLayoutSnippets.kt

Bariyer daha sonra bir Modifier.constrainAs() blokta kullanılabilir.

Not: Şu özelliklerden faydalanabilirsiniz: Doğal ölçümler satır ve sütunlarla benzer bir efekt elde edebilirsiniz.

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)
    }
}
ConstraintLayoutSnippets.kt

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.

ziyaret edin.

Not: Farklı boyutlarda geleneksel Satır ve Sütunlar kullanmayı deneyin Düzenlemeler kullanın.

Daha fazla bilgi

API'lerin Compose'da ConstraintLayout hakkında daha fazla bilgi edinin: ConstraintLayout kullanan örnekler oluştur.