Jetpack Compose'da Layout

Bu mobide, Jetpack Compose ile kullanılan layout'ları öğreneceksiniz.


Görsel Referansı


Layout nedir?

Uygulamalarınızı XML kullanarak oluştururken, öğeleri belirli şekillerde konumlandırabilmeniz için ViewGroup extend edilmiş bir layout kullanırsınız. Jetpack Compose’da ise ViewGroup yerine sadece Layout’u kullanabilirsiniz. Bunlar, öğeleri içlerine yerleştirebilmeniz için Composable içerikler alan, Composable fonksiyonlardır.

Compose’da Row, Column ve Box olmak üzere üç temel Layout vardır:


Row


@Composable
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
) {
    val measurePolicy = rowMeasurePolicy(horizontalArrangement, verticalAlignment)
    Layout(
        content = { RowScopeInstance.content() },
        measurePolicy = measurePolicy,
        modifier = modifier
    )
}

Eğer alt öğeleri ekranda yatay bir şekilde görmek istiyorsanız Row’u kullanabilirsiniz. Fakat alan kalmayacak kadar çok eleman eklediğinizi varsayın. Bu durumda varsayılan olarak kaydırma özelliği bulunmuyor. Buna çözüm olarak ya Modifier.horizontalScroll davranışını ya da LazyRow'u kullanmanız gerekir.

Peki, Modifier nedir? Row’a boyut (size), genişlik (width) gibi değerler verebilmek veya Row’un mevcut genişliğini doldurmak gibi çeşitli işlevler için Modifier kullanılabilir. horizontalArrangement ise, Row’un boyutunun, alt öğelerin boyutundan büyük olduğu durumlarda kullanılır. Bu sayede alt öğelerin satır içindeki yatay (horizontal) konumlarını düzenleyebilirsiniz.


Görsel Referansı


Alignment, Row layout'unun alt öğelerini dikey (vertical) olarak hizalamak için kullanılır. Son olarak Row Layout’u, XML’de ki LinearLayout’a karşılık gelmektedir.


Column


@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
) {
    val measurePolicy = columnMeasurePolicy(verticalArrangement, horizontalAlignment)
    Layout(
        content = { ColumnScopeInstance.content() },
        measurePolicy = measurePolicy,
        modifier = modifier
    )
}

Column layout'u ise adından anlaşılacağı üzere, her eklediğiniz eleman önünüzdeki sütun şeklindeki bir kalıba dikey olarak ekleniyor gibi tanımlanabilir.

Row ile benzer olarak Column'da da varsayılan durumda dikey (vertical) kaydırma özelliği bulunmuyor. Buna çözüm olarak ya