ConstraintLayout

Подключение ConstraintLayout

Элемент ConstraintLayout представляет контейнер, который позволяет размещать одни компоненты относительно других компонентов. ConstraintLayout предоставляет альтернативу использования нескольких вложенных друг в друга компонентов Column, Row и Box и может применяться при реализации более крупных макетов с более сложными требованиями к выравниванию.

Для использования ConstraintLayout в Compose необходимо добавить соответствующую зависимость в файл build.gradle. Так, откроем файйл build.gradle.kts (Module :app)

В этом файле где-то внизу найдем секцию dependencies, которая хранит добавленные в проект зависимости и которая выглядит примерно следующим образом:

dependencies {

    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.lifecycle.runtime.ktx)
    implementation(libs.androidx.activity.compose)
    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.ui)
    implementation(libs.androidx.ui.graphics)
    implementation(libs.androidx.ui.tooling.preview)
    implementation(libs.androidx.material3)
    testImplementation(libs.junit)
    androidTestImplementation(libs.androidx.junit)
    androidTestImplementation(libs.androidx.espresso.core)
    androidTestImplementation(platform(libs.androidx.compose.bom))
    androidTestImplementation(libs.androidx.ui.test.junit4)
    debugImplementation(libs.androidx.ui.tooling)
    debugImplementation(libs.androidx.ui.test.manifest)
}

В самое начало этой секции добавим строку

implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1")

То есть в итоге получится

dependencies {

    implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1")

    implementation(libs.androidx.core.ktx)
    // остальные зависимости
    ........................................

}

Затем синхронизируем проект, нажав на кнопку Sync Now

После добавления зависимости мы можем использовать ConstraintLayout.

ConstraintLayout предоставляется в виде компонента аналогично другим компонентам в Compose:

@Composable
public inline fun ConstraintLayout(
    modifier: Modifier = COMPILED_CODE,
    optimizationLevel: Int = COMPILED_CODE,
    crossinline content: @Composable() (ConstraintLayoutScope.() -> Unit)
): Unit

Первый параметр представляет функции-модификаторы, применяемые к контейнеру. Второй параметр задает уровень оптимизации. И третий параметр задает внутренне содержимое. Соответственно мы можем вызывать ConstraintLayout следующим образом:

ConstraintLayout {

    // здесь вложенные компоненты

}

Можем передать в @Composable ConstraintLayout какие-нибудь модификаторы

ConstraintLayout(Modifier.size(300.dp).background(Color.DarkGray)) {

    // здесь вложенные компоненты

}

По умолчанию дочерний компонент позиционируется в ConstraintLayout в верхнем левом углу (при левосторонней ориентации). Например, добавим в ConstraintLayout текст:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{
            ConstraintLayout() {
                Text("Hello METANIT.COM", fontSize = 28.sp)
            }
        }
    }
}