Column: vertikální uspořádání a nastavení kontejneru v Compose

Co je Column v Jetpack Compose

Column — je Composable funkce, která přijímá volitelné parametry: modifier, verticalArrangement, horizontalAlignment a content — lambdu s ColumnScope. Uvnitř Column jsou podřízené Composable funkce umístěny shora dolů v pořadí deklarace. Výška Column se rovná součtu výšek podřízených prvků plus prostor určený Arrangement. Šířka — podle maximální šířky podřízeného prvku s ohledem na Alignment.

Column je neviditelný kontejner: nemá vlastní pozadí ani okraj ve výchozím nastavení. Pokud je potřeba pozadí — přidejte Modifier.background() samotnému Column. Na rozdíl od LazyColumn zobrazuje Column všechny podřízené prvky současně a nepodporuje virtualizaci. To znamená, že Column je vhodný pouze pro malé datové sady — do 10-15 prvků. Pro dlouhé seznamy použijte LazyColumn.

ColumnScope — je receiver pro content lambdu Column. Poskytuje další modifikátory, které fungují pouze uvnitř Column: weight(), align(), alignByBaseline(). Tyto modifikátory nemají význam mimo Column, protože se opírají o specifiku vertikálního uspořádání. Například Modifier.align(Alignment.CenterHorizontally) zarovná podřízený prvek horizontálně na střed Column.

Parametry Column: Arrangement, Alignment, Modifier

VerticalArrangement určuje, jak je vertikální prostor rozdělen mezi prvky. Dostupné hodnoty: Arrangement.Top (výchozí), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Pokud je výška Column větší než součet výšek prvků, Arrangement rozděluje volný prostor. Pokud prvky zabírají celou výšku — Arrangement nemá vliv.

HorizontalAlignment nastavuje horizontální zarovnání každého podřízeného prvku. Alignment.Start (výchozí, LTR), CenterHorizontally, End. Alignment působí na každý prvek nezávisle: pokud je jeden prvek úzký a druhý široký — první bude zarovnán, druhý může přesáhnout hranice Column. Alignment funguje pouze pokud má Column pevnou šířku nebo fillMaxWidth.

Modifier pro Column: Column přijímá Modifier, který se aplikuje na samotný kontejner. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — všechny standardní modifikátory fungují. Zvláštnost: Modifier.height(IntrinsicSize.Min) nutí Column vypočítat minimální výšku na základě podřízených prvků s ohledem na Intrinsic measurement.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Nahoře", modifier = Modifier.background(Color.Cyan))
        Text("Uprostřed", modifier = Modifier.background(Color.Magenta))
        Text("Dole", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column přizpůsobuje výšku obsahu
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Krátký text")
        Text("Velmi dlouhý text, který se zalamuje uvnitř sloupce")
    }
}

Column weight: rozložení prostoru mezi prvky

Modifier.weight() — je modifikátor ColumnScope, který rozděluje volný vertikální prostor mezi prvky Column proporcionálně podle zadaných vah. Pokud Column zabírá 400dp výšky a podřízené prvky celkem 100dp, pak se zbývajících 300dp rozdělí mezi weight prvky. Prvek s weight(2f) získá dvakrát více prostoru než prvek s weight(1f).

fill — druhý parametr weight: weight(weight: Float, fill: Boolean = true). Pokud fill = true (výchozí), prvek se roztáhne na celou dostupnou výšku. Pokud fill = false — prvek zabírá pouze svou intrinsic výšku, zbývající prostor zůstává prázdný. To je užitečné, když má být prvek přitisknutý k jedné straně, ale weight určuje pouze poměr rozdělení prázdného místa.

Omezení weight: weight funguje pouze v Column s pevnou výškou nebo fillMaxHeight(). Pokud je výška Column určena podřízenými prvky (wrap content), váhy nemají smysl — není volný prostor k rozdělení. Weight také nelze kombinovat s Modifier.height() na stejném prvku — jsou v konfliktu a weight je ignorováno.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Zabírá 1/6 výšky (váha 1 ze součtu 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Zabírá 2/6 výšky
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Zabírá 3/6 výšky
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: kdy co použít

Column zobrazuje všechny podřízené prvky okamžitě. Pokud je prvků více než 10-15, Column vytváří významné zatížení na kompozici a měření. LazyColumn naopak renderuje pouze viditelné prvky a znovu používá neviditelné. Pro dlouhé seznamy, seznamy s tisíci prvků, nekonečné seznamy nebo chaty — LazyColumn je povinný.

Kdy je Column lepší: obrazovky s formuláři (3-10 polí), profilové karty, vertikální sloupce s ikonami, menu. Column také podporuje IntrinsicSize, což je užitečné pro adaptivní výšku. Kromě toho je Column snadnější na ladění — žádná virtualizace, všechny prvky jsou viditelné v Layout Inspector. Pro statické UI je Column správnou volbou.

LazyColumn poskytuje: item caching, identitu založenou na klíči, animaci přidání/odebrání (animateItemPlacement), sticky headers. Pokud seznam obsahuje prvky různých typů (různé viewType) — použijte LazyColumn s sealed class v items. Column nepodporuje sticky headers (je třeba je emulovat pomocí scrollable Column). LazyColumn také podporuje LazyVerticalGrid při použití GridCells.

Praktické příklady použití Column

Podívejme se na obrazovku uživatelského profilu, kde je Column použit jako hlavní kontejner pro avatar, jméno, bio a tlačítka akcí. Zde se Column s IntrinsicSize.Min přizpůsobuje obsahu a weight se aplikuje pro rozdělení prostoru mezi sekcemi.

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // Avatar
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // Jméno
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Tlačítka akcí
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Zpráva") }
                OutlinedButton(onClick = { }) { Text("Sledovat") }
            }
        }
    }
}

V příkladu Column používá Arrangement.spacedBy(8.dp) pro rovnoměrné mezery mezi prvky. horizontalAlignment = CenterHorizontally centruje avatar, jméno a bio. Row uvnitř Column — vnořený kontejner pro tlačítka v jednom řádku. Taková kombinace Column (vertikální uspořádání) a Row (horizontální uspořádání) je typickým vzorem stavby UI v Compose.