Какие знаешь стандартные Layout в Jetpack Compose?

Стандартные Layout в Jetpack Compose

В Jetpack Compose система компоновки кардинально отличается от View-системы Android, предлагая декларативный подход. Все лейауты строятся на основе Composable-функций, которые организуют дочерние элементы согласно заданным правилам. Вот ключевые стандартные лейауты:

1. Column и Row

Это базовые вертикальные и горизонтальные контейнеры, аналогичные LinearLayout с вертикальной и горизонтальной ориентацией. Они располагают дочерние элементы последовательно.

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Первый элемент")
    Text("Второй элемент")
}

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    Button(onClick = {}) { Text("Да") }
    Button(onClick = {}) { Text("Нет") }
}

• verticalArrangement и horizontalArrangement контролируют распределение пространства.
• Alignment задает выравнивание дочерних элементов.

2. Box

Аналог FrameLayout, позволяющий накладывать элементы друг на друга с возможностью их позиционирования.

Box(modifier = Modifier.size(200.dp)) {
    Image(
        painter = painterResource(id = R.drawable.background),
        contentDescription = null,
        modifier = Modifier.matchParentSize()
    )
    Text(
        "Текст поверх изображения",
        modifier = Modifier.align(Alignment.BottomCenter)
    )
}

• Modifier.align() позволяет позиционировать дочерние элементы внутри Box.

3. ConstraintLayout

Мощный лейаут для создания сложных композиций с взаимными зависимостями между элементами, похожий на ConstraintLayout из View-системы.

ConstraintLayout(
    modifier = Modifier.fillMaxSize()
) {
    val (button, text) = createRefs()
    
    Button(
        onClick = {},
        modifier = Modifier.constrainAs(button) {
            top.linkTo(parent.top, margin = 16.dp)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
    ) {
        Text("Кнопка")
    }
    
    Text(
        "Связанный текст",
        modifier = Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = 24.dp)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
    )
}

• createRefs() создает ссылки на элементы.
• Modifier.constrainAs() определяет ограничения для каждого элемента.

4. Lazy-лэйауты

Для эффективной работы со списками и сетками используются ленивые лейауты, которые создают элементы только при их появлении на экране.

LazyColumn (вертикальный список):

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(16.dp)
) {
    items(100) { index ->
        Text(
            "Элемент $index",
            modifier = Modifier.fillMaxWidth()
        )
    }
}

LazyRow (горизонтальный список):

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    items(50) { index ->
        Card(
            modifier = Modifier.size(100.dp)
        ) {
            Text("Карточка $index")
        }
    }
}

LazyVerticalGrid (сетка):

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(8.dp)
) {
    items(20) { index ->
        Card(
            modifier = Modifier.aspectRatio(1f)
        ) {
            Text("Ячейка $index")
        }
    }
}

5. Scaffold

Это высокоуровневый лейаут, реализующий базовые структуры Material Design, такие как TopAppBar, BottomAppBar, FloatingActionButton, Drawer и другие.

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("Заголовок") },
            navigationIcon = {
                IconButton(onClick = {}) {
                    Icon(Icons.Default.Menu, null)
                }
            }
        )
    },
    floatingActionButton = {
        FloatingActionButton(onClick = {}) {
            Icon(Icons.Default.Add, null)
        }
    },
    bottomBar = {
        BottomAppBar {
            Text("Нижняя панель")
        }
    }
) { paddingValues ->
    // Основной контент
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)
    ) {
        Text("Основное содержание")
    }
}

6. Custom Layouts

Compose также позволяет создавать собственные лейауты, используя Layout composable для полного контроля над измерением и размещением дочерних элементов.

@Composable
fun CustomLayout(
    modifier: Modifier = Modifier,
    content: @Compose () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->
        // Логика измерения и расположения
        val placeables = measurables.map { it.measure(constraints) }
        layout(constraints.maxWidth, constraints.maxHeight) {
            var yPosition = 0
            placeables.forEach { placeable ->
                placeable.placeRelative(x = 0, y = yPosition)
                yPosition += placeable.height
            }
        }
    }
}

Ключевые особенности компоновки в Compose:

• Modifier система — центральный механизм настройки поведения и внешнего вида.
• Intrinsic measurements — возможность запрашивать предпочтительные размеры до измерения.
• CompositionLocal — механизм неявной передачи данных через дерево композиции.
• Parent data — передача данных от дочернего элемента к родительскому лейауту.

Стандартные лейауты в Jetpack Compose обеспечивают гибкость и производительность, позволяя создавать как простые, так и сложные интерфейсы с минимальным кодом. Их декларативная природа упрощает поддержку и делает код более предсказуемым.