Элемент 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) } } } }