app/src/main/java/com/devshish/advancedjetpackcompose/constraintlayout/ConstraintLayoutWithGuidelines.kt - master - ursa/AdvancedJetpackCompose

app/src/main/java/com/devshish/advancedjetpackcompose/constraintlayout/ConstraintLayoutWithGuidelines.kt

64 строки2 KB

ursa

add project

03 мар 2025, 11:36

03 мар 2025, 11:3684c8a15

package com.devshish.advancedjetpackcompose.constraintlayout

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout

@Composable
fun ConstraintLayoutWithGuidelines(modifier: Modifier = Modifier) {
    ConstraintLayout(
        modifier = modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        // Создаем ссылки на элементы
        val (text1, text2, text3) = createRefs()

        // Создаем вертикальную guideline на 30% от ширины родительского контейнера
        val verticalGuideline = createGuidelineFromStart(0.3f)

        // Создаем горизонтальную guideline на 100dp от верхнего края родительского контейнера
        val horizontalGuideline = createGuidelineFromTop(100.dp)

        // Первый текст (привязан к вертикальной guideline и верхнему краю родителя)
        Text(
            text = "Text 1",
            modifier = Modifier
                .constrainAs(text1) {
                    start.linkTo(verticalGuideline)
                    top.linkTo(parent.top)
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )

        // Второй текст (привязан к вертикальной guideline и горизонтальной guideline)
        Text(
            text = "Text 2",
            modifier = Modifier
                .constrainAs(text2) {
                    start.linkTo(verticalGuideline)
                    top.linkTo(horizontalGuideline)
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )

        // Третий текст (привязан к вертикальной guideline и нижнему краю родителя)
        Text(
            text = "Text 3",
            modifier = Modifier
                .constrainAs(text3) {
                    start.linkTo(verticalGuideline)
                    bottom.linkTo(parent.bottom)
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )
    }
}