Flow layouts in Compose

Beta: FlowRow ve FlowColumn test aşamasındadır. Bu doküman API’nin beta sürümü içindir. Herhangi bir geri bildirimi issue tracker‘a gönderin.

FlowRow ve FlowColumn, Row ve Column’a benzeyen ancak container’da yer kalmadığında öğelerin bir sonraki satıra geçmesi bakımından farklılık gösteren composable’lardır. Bu, birden fazla satır veya sütun oluşturur. Bir satırdaki öğe sayısı, maxItemsInEachRow veya maxItemsInEachColumn ayarlanarak da kontrol edilebilir. FlowRow ve FlowColumn’u genellikle responsive layout’lar oluşturmak için kullanabilirsiniz; öğeler bir boyut için çok büyükse içerik bölünmez ve maxItemsInEach* ile Modifier.weight(weight) kombinasyonunu kullanmak, gerektiğinde bir satırın veya sütunun genişliğini dolduran / genişleten (fill/expand) layout’lar oluşturmaya yardımcı olabilir.

Tipik örnek, bir chip veya filtreleme kullanıcı arayüzü içindir:

Basic usage

FlowRow veya FlowColumn kullanmak için bu composable’ları oluşturun ve standart akışı takip etmesi gereken öğeleri içine yerleştirin:

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}

Bu kod parçacığı, ilk satırda yer kalmadığında öğelerin otomatik olarak bir sonraki satıra geçtiği yukarıda gösterilen kullanıcı arayüzüyle sonuçlanır.

Features of flow layout

Flow layout’ları, uygulamanızda farklı layout’lar oluşturmak için kullanabileceğiniz aşağıdaki özelliklere ve niteliklere sahiptir.

Main axis arrangement: horizontal or vertical arrangement

Main axis, öğelerin yerleştirildiği eksendir (örneğin, FlowRow’da öğeler yatay olarak yerleştirilir). FlowRow’daki horizontalArrangement parametresi, boş alanın öğeler arasında nasıl dağıtılacağını kontrol eder.

Aşağıdaki tabloda FlowRow için öğeler üzerinde horizontalArrangement ayarlama örnekleri gösterilmektedir:

FlowRow üzerinde yatay düzenleme(arrangement) ayarı	Sonuc
Arrangement.Start(Default)
Arrangement.SpaceBetween
Arrangement.Center
Arrangement.End
Arrangement.SpaceAround
Arrangement.spacedBy(8.dp)

FlowColumn için ise, default Arrangement.Top secenegidir. verticalArrangement icin benzer seçenekler mevcuttur.

Cross axis arrangement

Cross axis (çapraz eksen), main axis’in (ana eksen) ters yönündeki eksendir. Örneğin, FlowRow’da bu dikey eksendir. Konteyner içindeki genel içeriğin çapraz eksende nasıl düzenlendiğini değiştirmek için FlowRow için verticalArrangement ve FlowColumn için horizontalArrangement kullanın.

FlowRow için, aşağıdaki tabloda öğeler üzerinde farklı verticalArrangement ayarlama örnekleri gösterilmektedir:

FlowRow üzerinde dikey düzenleme(arrangment) ayarı	Sonuc
Arrangement.Top(Default)
Arrangement.Bottom
Arrangement.Center

FlowColumn için horizontalArrangement için benzer seçenekler mevcuttur. Varsayılan çapraz eksen düzenlemesi Arrangement.Start’tır.

Individual item alignment

Row içindeki öğeleri farklı hizalamalarla tek tek konumlandırmak isteyebilirsiniz. Bu, öğeleri geçerli satır içinde hizaladığı için verticalArrangement ve horizontalArrangement öğelerinden farklıdır. Bunu Modifier.align() ile uygulayabilirsiniz.

Örneğin, bir FlowRow içindeki öğeler farklı yüksekliklerde olduğunda, satır en büyük öğenin yüksekliğini alır ve öğelere Modifier.align(alignmentOption) uygular:

FlowRow üzerinde dikey hizalama(alignment) ayarı	Sonuc
Alignment.Top(Default)
Alignment.Bottom
Alignment.CenterVertically

FlowColumn için benzer seçenekler mevcuttur. Default hizalama Alignment.Start’tır.

Max items in row or column

maxItemsInEachRow veya maxItemsInEachColumn parametreleri, bir sonraki satıra geçmeden önce bir satırda izin verilecek ana eksendeki maksimum öğeleri tanımlar. Varsayılan değer Int.MAX_INT olup, boyutları satıra sığmalarına izin verdiği sürece mümkün olduğunca çok öğeye izin verir.

Örneğin, maxItemsInEachRow ayarı ilk layout’u yalnızca 3 öğeye sahip olacak şekilde zorlar:

No max set	maxItemsInEachRow = 3

Item weights

Weight, bir öğeyi faktörüne ve yerleştirildiği satırdaki kullanılabilir alana göre büyütür. Önemli olarak, FlowRow ve Row arasında bir öğenin genişliğini hesaplamak için weight’in nasıl kullanıldığı ile ilgili bir fark vardır. Row için weight, Row’daki tüm öğeleri temel alır. FlowRow ile weight, FlowRow konteynerindeki tüm öğelere değil, öğenin yerleştirildiği satırdaki öğeleri temel alır.

Örneğin, her biri 1f, 2f, 1f ve 3f farklı weight’e sahip, hepsi bir satıra düşen 4 öğeniz varsa, toplam ağırlık 7f olur. Bir row veya column’da kalan alan 7f’ye bölünecektir. Ardından, her bir öğe genişliği şu şekilde hesaplanacaktır: weight * (remainingSpace / totalWeight).

Grid benzeri bir layout oluşturmak için FlowRow veya FlowColumn ile Modifier.weight ve max items kombinasyonunu kullanabilirsiniz. Bu yaklaşım, cihazınızın boyutuna göre ayarlanan responsive layout’lar oluşturmak için kullanışlıdır.

Weight kullanarak elde edebileceğiniz birkaç farklı örnek vardır. Örneklerden biri, aşağıda gösterildiği gibi öğelerin eşit boyutta olduğu bir griddir:

Eşit öğe boyutlarında bir grid oluşturmak için aşağıdakileri yapabilirsiniz:

val rows = 3
val columns = 3
FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = rows
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .weight(1f)
        .clip(RoundedCornerShape(8.dp))
        .background(MaterialColors.Blue200)
    repeat(rows * columns) {
        Spacer(modifier = itemModifier)
    }
}

Daha da önemlisi, başka bir öğe ekler ve bunu 9 yerine 10 kez tekrarlarsanız, tüm satırın toplam weight’i 1f olduğundan, son öğe son sütunun tamamını kaplar:

Weight’leri Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio) veya Modifier.fillMaxWidth(fraction) gibi diğer Modifier’larla birleştirebilirsiniz. Bu modifier’ların hepsi birlikte çalışarak bir FlowRow (veya FlowColumn) içindeki öğelerin responsive boyutlandırılmasına olanak sağlar.

Ayrıca, iki öğenin her birinin genişliğin yarısını kapladığı ve bir öğenin bir sonraki sütunun tam genişliğini kapladığı farklı öğe boyutlarından oluşan alternatif bir grid de oluşturabilirsiniz:

Bunu aşağıdaki kod ile gerçekleştirebilirsiniz:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 2
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .clip(RoundedCornerShape(8.dp))
        .background(Color.Blue)
    repeat(6) { item ->
        // if the item is the third item, don't use weight modifier, but rather fillMaxWidth
        if ((item + 1) % 3 == 0) {
            Spacer(modifier = itemModifier.fillMaxWidth())
        } else {
            Spacer(modifier = itemModifier.weight(0.5f))
        }
    }
}

Fractional sizing

Modifier.fillMaxWidth(fraction) kullanarak, bir öğenin kaplaması gereken konteyner boyutunu belirtebilirsiniz. Bu, Modifier.fillMaxWidth(fraction) öğesinin Row veya Column öğesine uygulandığında çalışmasından farklıdır, çünkü Row/Column öğeleri tüm konteyner genişliği yerine kalan genişliğin bir yüzdesini alır.

Örneğin, aşağıdaki kod FlowRow ile Row kullanıldığında farklı sonuçlar üretir:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 3
) {
    val itemModifier = Modifier
        .clip(RoundedCornerShape(8.dp))
    Box(modifier = itemModifier.height(200.dp).width(60.dp).background(Color.Red))
    Box(modifier = itemModifier.height(200.dp).fillMaxWidth(0.7f).background(Color.Blue))
    Box(modifier = itemModifier.height(200.dp).weight(1f).background(Color.Magenta))
}

FlowRow:Tüm konteyner genişliğinin 0,7 fraksiyonuna sahip ortanca öğe.
Row: Kalan Satır genişliğinin yüzde 0,7’sini kaplayan ortanca öğe.