Android Academy · Ders

Text ve Column Temelleri

İçeriği gösterip üst üste yerleştirin.

Text ve Column Temelleri, CoddyKit'te ücretsiz bir Android 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, 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.

Text Composable'ı

Compose'da gösterebileceğiniz en temel şey metindir. Text composable'ı ekranda bir dize çizer.

Görüntülemek istediğiniz dizeyi ilk bağımsız değişken olarak aktarırsınız. Ekrana sözcükleri yerleştirmek için gereken tek şey budur.

@Composable
fun Hello() {
    Text("Hello, Android!")
}

Metni Biçimlendirme

Text, görünümünü değiştirmek için parametreler kabul eder. fontSize, color ve fontWeight değerlerini ayarlayabilirsiniz.

Boyutlar, kullanıcının yazı tipi ayarlarına göre ölçeklenen sp birimini kullanır. Bu, uygulamanızın herkes için okunabilir kalmasını sağlar.

Text(
    "Big Title",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold
)

Neden Bir Yerleşime İhtiyacınız Var?

Text işlevini art arda iki kez çağırırsanız her iki metin de aynı konuma yerleşir ve üst üste gelir. Composable işlevler kendilerini otomatik olarak düzenlemez.

Ögeleri sırayla yerleştirmek için alt ögelerini düzenleyen bir yerleşim composable'ına ihtiyacınız vardır. Dikey sıralama için en yaygın kullanılanı Column'dır.

Column Composable'ı

Column, alt ögelerini dikey olarak, biri diğerinin altında olacak şekilde düzenler. Alt composable işlevlerini sondaki lambda bloğunun içine yerleştirirsiniz.

Süslü ayraçların içine yazdığınız her composable, yazma sıranıza göre bu dikey yığındaki bir satır olur.

@Composable
fun TwoLines() {
    Column {
        Text("First line")
        Text("Second line")
    }
}

Column İçinde Sıra Önemlidir

Bir Column içindeki alt ögeler, listelediğiniz tam sırayla yukarıdan aşağıya görünür. Kodda bir satırı yukarı taşırsanız ekranda da yukarı taşınır.

Bu, yerleşimleri öngörülebilir hâle getirir: kodu yukarıdan aşağıya okuyarak ekranın da yukarıdan aşağıya nasıl göründüğünü anlayabilirsiniz.

Column {
    Text("Title")
    Text("Subtitle")
    Text("Body text")
}

Dikey Düzenleme

Column, verticalArrangement kullanarak alt ögeleri arasındaki boşluğu denetleyebilir. Örneğin Arrangement.spacedBy, eşit aralıklar ekler.

Bu, her alt ögeye elle boşluk eklemekten daha temizdir ve yerleşiminizin tutarlı kalmasını sağlar.

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("One")
    Text("Two")
}

Yatay Hizalama

Varsayılan olarak bir Column, alt ögelerini başlangıç noktasına, yani sola hizalar. Bunları ortalamak veya sona hizalamak için horizontalAlignment kullanın.

Bu değeri Alignment.CenterHorizontally olarak ayarladığınızda her alt öge sütunun genişliği içinde ortalanır.

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Centered")
    Text("Also centered")
}

Row ile Tanışın

Column öğeleri dikey olarak üst üste dizer; kardeşi olan Row ise alt öğeleri yatay olarak yan yana düzenler. İkisi de aynı fikri farklı yönlerde uygular.

Izgaralar ve kartlar oluşturmak için Row ve Column öğelerini birlikte kullanacaksınız. Şimdilik şunu hatırlayın: Column aşağı doğru, Row yatay olarak düzenler.

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

İç İçe Düzenler

Düzenler başka düzenleri barındırabilir. Daha zengin tasarımlar oluşturmak için bir Row öğesini Column içine yerleştirebilirsiniz.

Burada bir sütun önce başlığı, ardından altında iki metin parçası bulunan bir satırı gösteriyor. Karmaşık ekranlar, basit parçalardan iç içe yerleştirme yoluyla oluşturulur.

Column {
    Text("Score")
    Row {
        Text("Home")
        Text("Away")
    }
}

Öğeler Arasına Boşluk Ekleme

İki composable arasına sabit bir boşluk eklemek için Spacer yerleştirebilirsiniz. Bu, yalnızca yer kaplayan boş bir composable'dır.

Bir modifier aracılığıyla yüksekliğini belirlediğinizde sonraki öğeyi aşağı iter. Modifier'ları bir sonraki derste daha ayrıntılı inceleyeceğiz.

Column {
    Text("Top")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Bottom")
}

Hepsini Bir Araya Getirme

Text ve Column ile artık basit, etiketli bir ekran oluşturabilirsiniz. Bir başlığı ve birkaç ayrıntı satırını üst üste dizin.

Bu küçük düzen, yazacağınız neredeyse her Compose ekranının temelini oluşturur.

@Composable
fun InfoBlock() {
    Column {
        Text("Name: Ada")
        Text("Role: Engineer")
    }
}

Hızlı Kontrol

Düzen yönüyle ilgili anlayışınızı test edelim.

Özet

Metinleri Text ile görüntülemeyi ve fontSize ile fontWeight kullanarak biçimlendirmeyi öğrendiniz. Bir Column, alt öğeleri kod sırasına göre dikey olarak üst üste dizerken Row bunları yatay olarak düzenler.

Aralıkları verticalArrangement veya Spacer ile denetleyebilir, alt öğeleri horizontalAlignment ile hizalayabilirsiniz. Row ve Column öğelerini iç içe yerleştirmek daha zengin düzenler oluşturmanızı sağlar. Sırada, uygulamayı çalıştırmadan bu ekranları önizleyeceksiniz.

Sıkça Sorulan Sorular

“Text ve Column Temelleri” dersi ücretsiz mi?

Evet — “Text ve Column Temelleri” 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.

“Text ve Column Temelleri” dersinde ne öğreneceğim?

İçeriği gösterip üst üste yerleştirin. 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 2. dersidir.

“Text ve Column Temelleri” 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