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 hizalama koşullarına sahip daha büyük düzenler uygularken kullanışlıdır.

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üntüleme sisteminde, düz görünüm hiyerarşisi performans açısından iç içe yerleştirilmiş görünümlerden daha iyi olduğu için büyük ve karmaşık düzenler oluşturmak için önerilen yöntem ConstraintLayout idi. Ancak bu, derin düzen hiyerarşilerini etkili bir şekilde yönetebilen Oluştur'da sorun oluşturmaz.

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"

Oluştur'daki ConstraintLayout, DSL kullanarak aşağıdaki şekilde çalışır:

  • createRefs() veya createRefFor() öğesini kullanarak ConstraintLayout içindeki her bir derlenebilir öğe için referans oluşturun.
  • Kısıtlamalar, referansı parametre olarak alan ve kısıtlamalarını body lambda'da belirtmenize olanak tanıyan constrainAs() değiştiricisi kullanılarak sağlanır.
  • Kısıtlamalar linkTo() veya diğer faydalı yöntemler kullanılarak belirtilir.
  • parent, ConstraintLayout composable'ına yönelik kısıtlamaları belirtmek için kullanılabilecek mevcut bir referanstır.

ConstraintLayout kullanan bir bileşen örneğini aşağıda 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.

ConstraintLayout'ta düzenlenmiş bir düğmeyi ve metin öğesini gösterir.

Ayrıştırılmış API

ConstraintLayout örneğinde, kısıtlamalar satır içi olarak belirtilir ve uygulandıkları bileşiğe bir değiştirici eklenir. Bununla birlikte, bazı durumlarda kısıtlamaların geçerli oldukları düzenlerden ayrılması tercih edilir. Örneğin, ekran yapılandırmasına göre kısıtlamaları değiştirmek veya iki kısıtlama grubu arasında animasyon yapmak isteyebilirsiniz.

Bu gibi durumlarda ConstraintLayout öğesini farklı bir şekilde kullanabilirsiniz:

  1. ConstraintLayout işlevine parametre olarak bir ConstraintSet gönderin.
  2. layoutId değiştiriciyi kullanarak ConstraintSet içinde oluşturulan referansları derlenebilir öğelere atayın.

@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

Ardından, kısıtlamaları değiştirmeniz gerektiğinde farklı bir ConstraintSet iletmeniz yeterlidir.

ConstraintLayout kavramları

ConstraintLayout, Composable'ınızda öğeleri konumlandırmanıza yardımcı olabilecek kurallar, engeller ve zincirler gibi kavramlar içerir.

Kurallar

Kurallar, düzenler 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şen içinde belirli bir dp veya percentage konumuna yerleştirmek için kullanışlıdır.

Dikey ve yatay olmak üzere iki farklı yönerge türü vardır. Yatay olanlar top ve bottom, dikey olanlar ise start ve end'tır.

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.

Bariyerler

Engeller, belirtilen taraftaki en uç widget'a dayalı 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

Engel daha sonra bir Modifier.constrainAs() bloğunda kullanılabilir.

Zincirler

Zincirler, tek bir eksende (yatay veya dikey) grup benzeri bir 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() bloğunda kullanılabilir.

Bir zincir, farklı ChainStyles ile yapılandırılabilir. Bu ChainStyles, bir bileşeni çevreleyen alanla nasıl başa çıkılacağına karar verir. Ö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 ve son bileşenden önce dağıtılır. Bileşenler, 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.

Önceki
Yerleşik ölçümler