Jetpack Compose Academy · Ders

Layout Composable'ı Yazma

Alt öğeleri ölçün ve elle konumlandırın.

Layout Composable'ı Yazma, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Meet the Layout Composable

To build your own arrangement, you reach for the Layout composable. It hands you the raw measure-and-place power directly. 🛠️

Layout Takes Content and a Lambda

Layout accepts your child content plus a measure lambda. The lambda receives the measurables and the constraints to work with.

Layout(content = content,
  modifier = modifier) { measurables, constraints ->
  // measure and place
}

Step One: Measure the Children

Inside the lambda, map over the measurables and measure each one. You get a list of placeables with known sizes back.

val placeables = measurables.map { it.measure(constraints) }

Step Two: Decide Your Own Size

Now compute how big your layout should be. For a vertical stack, the height is the sum of child heights and the width is the widest child.

val height = placeables.sumOf { it.height }
val width = placeables.maxOf { it.width }

Step Three: Report Size with layout()

Call layout(width, height) to declare your size. The trailing lambda is where you actually position every child.

layout(width, height) {
  // placement goes here
}

Step Four: Place Each Child

Track a running y offset and place each placeable beneath the last. Add its height to the offset after each placeRelative call.

var y = 0
placeables.forEach {
  it.placeRelative(0, y)
  y += it.height
}

You Just Rebuilt Column

Stacking children top to bottom is exactly what Column does. You have now written a layout from scratch that behaves just like it. 🎉

Wrap It in a Reusable Function

Put your Layout call inside a @Composable function so others can use it like any built-in. Expose a modifier and content slot.

@Composable
fun MyColumn(modifier: Modifier = Modifier,
  content: @Composable () -> Unit) { }

Pass the Modifier Through

Forward the incoming modifier to the Layout call. This lets callers add padding, size, and background just like with real layouts.

Default the Modifier Parameter

Give modifier a default of Modifier. Callers who do not need extra styling can skip it, keeping your API clean and friendly.

Now You Can Customize Anything

Change the placement math and you get diagonal stacks, centered rows, or grids. The Layout composable is your blank canvas for arrangement.

Quick Check

Which method actually positions a measured child on screen?

Recap: Writing a Layout Composable

Inside Layout you measure children to placeables, call layout() to set your size, then placeRelative each child. Wrap it in a function for reuse. ✅

Sıkça Sorulan Sorular

“Layout Composable'ı Yazma” dersi ücretsiz mi?

Evet — “Layout Composable'ı Yazma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

“Layout Composable'ı Yazma” dersinde ne öğreneceğim?

Alt öğeleri ölçün ve elle konumlandırın. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Layout Composable'ı Yazma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Jetpack Compose Academy Sayfasına Dön