Jetpack Compose Academy · Ders

Düzenleme ve Hizalama

Alt öğeleri kesin biçimde konumlandırın ve aralıklandırın.

Düzenleme ve Hizalama, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 4. 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.

Two Words, Two Jobs

Layout control comes down to arrangement and alignment. They sound similar but they do different jobs. Let's untangle them. 🧭

Arrangement: Along the Main Axis

Arrangement controls spacing along the layout's main axis: vertical for a Column, horizontal for a Row.

Alignment: Across the Cross Axis

Alignment controls position on the other axis: horizontal in a Column, vertical in a Row. It lines children up sideways.

Grouping at One End

Arrangement.Top, Center, and Bottom pack children together at one end of a Column, leaving the rest as empty space.

Column(verticalArrangement = Arrangement.Center) {
    Text("A")
    Text("B")
}

Spreading Children Out

Use SpaceBetween, SpaceAround, or SpaceEvenly to distribute extra space among children instead of bunching them up.

Row(horizontalArrangement = Arrangement.SpaceEvenly) {
    Text("A")
    Text("B")
    Text("C")
}

SpaceBetween vs SpaceEvenly

SpaceBetween hugs the edges with no outer gaps, while SpaceEvenly adds equal gaps everywhere, including before the first and after the last child.

Fixed Gaps with spacedBy

For a consistent gap, use Arrangement.spacedBy. It inserts the exact distance you give between every adjacent child.

Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
    Text("A")
    Text("B")
}

Column's Cross-Axis Alignment

In a Column the cross axis is horizontal, so horizontalAlignment chooses Start, CenterHorizontally, or End for the children.

Column(horizontalAlignment = Alignment.End) {
    Text("Right side")
}

Row's Cross-Axis Alignment

In a Row the cross axis is vertical, so verticalAlignment picks Top, CenterVertically, or Bottom for the children.

Row(verticalAlignment = Alignment.Bottom) {
    Text("Aligned bottom")
}

Combine Both for Layout

You usually set both at once: arrangement spaces children along the main axis while alignment positions them on the cross axis.

Column(
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) { Text("Dead center") }

Effect Needs Extra Space

Arrangement only shows when the container is bigger than its children. A wrap-content Column has no spare room to redistribute.

Quick Check

Let's confirm which axis each setting controls.

Recap: Arrangement & Alignment

You learned the split: arrangement spaces children along the main axis, alignment positions them on the cross axis. Combine both for precise layouts.

Sıkça Sorulan Sorular

“Düzenleme ve Hizalama” dersi ücretsiz mi?

Evet — “Düzenleme ve Hizalama” 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.

“Düzenleme ve Hizalama” dersinde ne öğreneceğim?

Alt öğeleri kesin biçimde konumlandırın ve aralıklandı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 4. dersidir.

“Düzenleme ve Hizalama” 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