Jetpack Compose'da Custom Layout: Özel Bileşen Tasarlama

Jetpack Compose'da standart bileşenler (Column, Row, Box) çoğu zaman yeterli olmaz. Bazen tam kontrol istediğin özel bir düzen gerekir. Custom layout yazmak ilk bakışta karmaşık görünse de, aslında doğrudan bir süreç.

Compose'da özel layout oluşturmak için `Layout` composable'ını kullanırsın. Bu fonksiyon, child bileşenleri ölçmen ve konumlandırman için tam kontrol verir. Örneğin, çocukları çapraz bir çizgi üzerinde yerleştiren veya belirli bir açıyla döndüren bir layout tasarlayabilirsin.

Başlangıç olarak basit bir örnek: üst üste bileşenleri yerleştiren ancak her birini bir öncekinin üzerine hafif kaydırarak konumlandıran bir layout.

1@Composable
2fun OverlapLayout(
3modifier: Modifier = Modifier,
4content: @Composable () -> Unit
5) {
6Layout(
7content = content,
8modifier = modifier
9) { measurables, constraints ->
10val placeables = measurables.map { measurable ->
11measurable.measure(constraints)
12}
13
14val width = placeables.maxOfOrNull { it.width }?: 0
15val height = placeables.sumOf { it.height } - (placeables.size - 1) * 20
16
17layout(width, height) {
18var yPosition = 0
19placeables.forEach { placeable ->
20placeable.place(0, yPosition)
21yPosition += placeable.height - 20
22}
23}
24}
25}

Bu kodu kullanmak için:

1OverlapLayout {
2Box(
3modifier = Modifier.size(100.dp).background(Color.Red)
4)
5Box(
6modifier = Modifier.size(100.dp).background(Color.Blue)
7)
8Box(
9modifier = Modifier.size(100.dp).background(Color.Green)
10)
11}

Beklenen çıktı: Üç kutu, kırmızı en altta, yeşil en üstte, her biri 20 piksel kaydırılmış şekilde görünür.

Layout lambda'sı iki parametre alır: `measurables` (child bileşenler) ve `constraints` (boyut sınırları). Önce her child'ı ölçersin, sonra `layout()` fonksiyonu içinde konumlandırırsın. `place()` metodu x ve y koordinatlarını belirler.

Sık yapılan hata: Constraints'i görmezden gelmek. Eğer child'ı kendi istediğin boyutta ölçmek istersen, `Constraints` nesnesini değiştirerek iletebilirsin, örneğin `measurable.measure(constraints.copy(maxWidth = 200.dp.roundToPx()))` gibi.

Daha karmaşık layoutlar için (örneğin grid veya radyal düzen) aynı mantık geçerli; sadece `yPosition` hesaplaması yerine trigonometri veya başka bir formül kullanırsın. Compose'un gücü burada: pixel düzeyinde kontrol, recomposition sırasında otomatik güncelleme ve type-safe API.