Android Academy · Ders

Column, Row ve Box

Composable'ları yaygın yerleşimlerde düzenleyin.

Column, Row ve Box, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 1. 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, Android Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Android Academy kursu toplamda 4 dersten oluşur.

Composable Öğeleri Düzenleme

Composable öğeleri birbirlerine göre yerleştirmek için Compose size üç temel yerleşim composable öğesi sunar: Column, Row ve Box.

Column: Dikey Sıralama

Column, alt öğelerini yukarıdan aşağıya doğru dikey olarak sıralar.

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

Row: Yatay Sıralama

Row, alt öğelerini soldan sağa doğru yan yana yerleştirir.

Row {
    Text("Left")
    Text("Middle")
    Text("Right")
}

Box: Üst Üste Bindirme

Box, alt öğelerini katmanlar gibi üst üste sıralar. Daha sonra gelen alt öğeler, öncekilerin üzerine çizilir. Rozetler, kaplamalar ve arka planlar için idealdir.

Box {
    Image(
        painter = painterResource(R.drawable.photo),
        contentDescription = null
    )
    Text("Caption")
}

Alt Öğeler İçerik Lambda'larıdır

Her yerleşim, sondaki bir içerik lambda'sını alır. İçinde çağırdığınız composable öğeleri, bu yerleşimin alt öğeleri olur. XML yoktur — alt öğeler yalnızca işlev çağrılarıdır.

Yerleşimleri İç İçe Kullanma

Yerleşimler serbestçe iç içe kullanılabilir. Izgara benzeri bir yapı veya satır listesi oluşturmak için bir Row öğesini bir Column içine yerleştirin.

Column {
    Row {
        Text("A")
        Text("B")
    }
    Row {
        Text("C")
        Text("D")
    }
}

Column ve LinearLayout Karşılaştırması

XML kullandıysanız Column, dikey bir LinearLayout gibidir; Row ise yatay olanıdır. Box da basit bir FrameLayout gibidir.

Varsayılan Boyutlandırma

Varsayılan olarak bir yerleşim yalnızca alt öğeleri kadar büyüktür (içeriğe sığdır). Kullanılabilir alanı doldurmasını Modifier.fillMaxSize() gibi değiştiricilerle sağlayabilirsiniz; bu konu sonraki derste ele alınacaktır.

Box İçinde contentAlignment

Box, tüm alt öğelerini contentAlignment ile hizalayabilir. Örneğin, her şeyi ortalayabilirsiniz.

Box(contentAlignment = Alignment.Center) {
    Text("Centered")
}

Doğru Olanı Seçme

Yönü temel alarak seçin: dikey yerleşim için Column, yatay yerleşim için Row, üst üste bindirme veya tek alt öğeyi ortalama için Box. Çoğu ekran üçünü de bir arada kullanır.

Hepsini Birleştirme

Üçünün de kullanıldığı küçük bir profil yerleşimi.

@Composable
fun Profile() {
    Column {
        Box(contentAlignment = Alignment.Center) {
            Image(
                painter = painterResource(R.drawable.avatar),
                contentDescription = null
            )
        }
        Row {
            Text("Posts ")
            Text("Followers")
        }
    }
}

Hızlı Kontrol

Alt öğelerini üst üste sıralayan, yani bindiren yerleşim hangisidir?

Özet

Üç temel yerleşim:

Column — dikey sıralama.
Row — yatay sıralama.
Box — üst üste binen katmanlar; contentAlignment içeriği ortalar.

Herhangi bir ekran oluşturmak için serbestçe iç içe kullanılabilirler.

Sıkça Sorulan Sorular

“Column, Row ve Box” dersi ücretsiz mi?

Evet — “Column, Row ve Box” 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 Android Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Android Academy kursu toplamda 4 dersten oluşur.

“Column, Row ve Box” dersinde ne öğreneceğim?

Composable'ları yaygın yerleşimlerde düzenleyin. Android 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.

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

Önceden deneyim gerekmez. CoddyKit'te Android 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 1. dersidir.

“Column, Row ve Box” 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 Android Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Android 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

← Android Academy Sayfasına Dön