Compose'da ConstraintLayout

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

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

Compose'da ConstraintLayout, DSL:

• createRefs() veya createRefFor() öğesini kullanarak ConstraintLayout 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 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ı 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:

1. ConstraintLayout işlevine parametre olarak bir ConstraintSet gönderin.
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, 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)
}
ConstraintLayoutSnippets.kt

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.

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

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)
    }
}
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 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)
    }
}
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, 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.

Not: ConstraintLayout'taki zincirlere benzer bir efekt elde etmek için farklı düzenlemelere sahip geleneksel Satırlar ve Sütunlar kullanmayı düşünün.

Daha fazla bilgi

ConstraintLayout kullanan Compose örnekleri bölümünde, API'lerin kullanıldığı Compose'daki ConstraintLayout hakkında daha fazla bilgi edinin.