Android Academy · Ders

Padding ile Boşluklandırma

Boşluklandırma için Modifier kullanın.

Padding ile Boşluklandırma, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 3. 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.

Padding Nedir?

Padding, bir bileşenin içeriğinin çevresine eklenen boşluktur. İçeriği kenarlardan uzaklaştırarak öğelerin sıkışık görünmesini önler.

Compose'ta padding'i bir Modifier aracılığıyla eklersiniz.

Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp)
)

dp Birimi

Padding boyutları, yoğunluktan bağımsız piksellerin kısaltması olan dp birimini kullanır. dp, her ekranda fiziksel olarak aynı boyutta görünür.

8.dp veya 24.dp gibi, önce bir sayı ardından .dp yazın.

Modifier.padding(8.dp)

Modifier Nedir?

Bir Modifier, bir bileşenin nasıl göründüğünü ve davrandığını açıklar: boyutu, padding'i, arka planı ve daha fazlası.

Modifier'ları, işlevleri noktalarla birbirine zincirleyerek oluşturursunuz.

Modifier
    .padding(16.dp)
    .background(Color.Yellow)

Tüm Kenarlara Padding Ekleme

padding(16.dp) çağrısını tek bir değerle yapmak, dört kenarın tümüne (üst, alt, başlangıç ve bitiş) aynı boşluğu ekler.

İçeriğe rahatça yer açmanın en hızlı yolu budur.

Box(
    modifier = Modifier.padding(16.dp)
) {
    Text("Inside")
}

Yatay ve Dikey Padding

horizontal ve vertical parametreleriyle kenarları ayrı ayrı ayarlayabilirsiniz.

Yatay padding başlangıç ve bitişi, dikey padding ise üst ve altı kapsar.

Modifier.padding(
    horizontal = 24.dp,
    vertical = 8.dp
)

Tek Bir Kenara Padding Ekleme

Tek bir kenarı hedeflemek için adını belirtin: start, top, end veya bottom.

Bu, aralıkları tam olarak ihtiyaç duyduğunuz yerde ince ayarlamanızı sağlar.

Modifier.padding(
    start = 16.dp,
    top = 4.dp
)

Sıralama Önemlidir

Modifier sırası sonucu değiştirir. Padding'i arka plandan önce koymak, padding alanını boyanmamış bırakır; padding'den sonra koymak ise arka planın padding alanını doldurmasını sağlar.

Modifier'ları katmanlar gibi yukarıdan aşağıya okuyun.

Modifier
    .background(Color.Cyan)
    .padding(16.dp)

Öğeler Arasındaki Aralık

Bir Column veya Row içinde, alt öğeler arasına otomatik olarak eşit aralıklar eklemek için Arrangement.spacedBy kullanın.

Bu, her alt öğeye elle padding eklemekten daha düzenlidir.

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

Aralıklar için Spacer

Bir Spacer, öğeleri birbirinden uzaklaştırmak için kullanılan boş bir bileşendir. Bir Modifier ile ona boyut verin.

İki öğe arasında sabit bir aralık gerektiğinde kullanışlıdır.

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

Padding ve Margin Karşılaştırması

Compose'ta ayrı bir margin yoktur. Dış boşluk oluşturmak için padding'i modifier zincirinde, boyut veya arka plandan önce yerleştirin.

Böylece padding adlı tek araç, sırasına bağlı olarak hem iç hem de dış aralıkları yönetir.

Modifier
    .padding(16.dp)
    .background(Color.LightGray)
    .padding(8.dp)

Tutarlı Aralıklar

İyi uygulamalar 4, 8, 16 ve 24 dp gibi tekrarlanan birkaç değer kullanır. Bu, yerleşimlerin düzenli ve öngörülebilir kalmasını sağlar.

Rastgele sayılardan kaçının; küçük bir ölçekten seçim yapın.

Modifier.padding(16.dp)

Kısa Kontrol

Padding bilginizi test edin.

Özet

Padding, dp değerleriyle Modifier.padding kullanarak içeriğin çevresine boşluk ekler. Tüm kenarlara, yatay ve dikey kenarlara veya tek tek kenarlara padding ekleyebilirsiniz.

Modifier sırası önemlidir; öğeler arasındaki aralıkları Arrangement.spacedBy veya Spacer yönetir.

Sırada, renkleri ve MaterialTheme'i keşfedeceksiniz.

Sıkça Sorulan Sorular

“Padding ile Boşluklandırma” dersi ücretsiz mi?

Evet — “Padding ile Boşluklandırma” 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.

“Padding ile Boşluklandırma” dersinde ne öğreneceğim?

Boşluklandırma için Modifier kullanın. 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 3. dersidir.

“Padding ile Boşluklandırma” 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