Android Academy · Ders

Kullanıcı Arayüzünüzü Önizleme

Hızlı yineleme için @Preview kullanın.

Kullanıcı Arayüzünüzü Önizleme, 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.

Önizlemeler Neden Yararlıdır

Bir uygulamayı cihazda derleyip çalıştırmak zaman alır. Compose, kullanıcı arayüzünüzü görmenin daha hızlı bir yolunu sunar: önizleme.

Önizleme, bir composable'ı doğrudan Android Studio içinde oluşturur. Böylece uygulamanın tamamını bir emülatörde veya telefonda başlatmadan düzeninizi kontrol edebilirsiniz.

@Preview Açıklaması

Bir composable'ı önizlemek için ayrı bir işlev oluşturup bunu @Preview ile işaretlersiniz. Android Studio daha sonra oluşturulan çıktıyı tasarım bölmesinde gösterir.

Önizleme işlevinin kendisi de bir composable'dır; bu nedenle hem @Preview hem de @Composable taşır.

@Preview
@Composable
fun GreetingPreview() {
    Greeting("World")
}

Önizlemeler Parametre Almaz

Bir önizleme işlevi parametre almamalıdır. Compose'un bu işlevi kendi başına çağırması gerekir; bu nedenle bağımsız değişken sağlayamaz.

Bu nedenle bir sarmalayıcı oluşturursunuz: önizleme, gerçek composable'ınızı çağırır ve görüntülemesi için örnek veriler geçirir.

@Preview
@Composable
fun ProfilePreview() {
    ProfileCard(name = "Ada")
}

Önizleme İşlevlerini Adlandırma

Yaygın bir kural, önizlemeyi gösterdiği composable'ın adını temel alarak adlandırmak ve sonuna Preview eklemektir. Greeting için GreetingPreview yazarsınız.

Bu, özellikle dosyanız büyüdükçe hangi önizlemenin hangi composable'a ait olduğunu açıkça görmenizi sağlar.

@Preview
@Composable
fun HeaderPreview() {
    Header()
}

Önizlemeye Ad Verme

name parametresiyle bir önizlemeye etiket ekleyebilirsiniz. Bu başlık, Android Studio'da oluşturulan önizlemenin üzerinde görünür.

Yararlı adlar, birden çok önizlemeyi ilk bakışta kolayca ayırt etmenizi sağlar.

@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
    ProfileCard("Ada")
}

Arka Planı Gösterme

Varsayılan olarak bir önizleme saydam bir arka plan üzerinde oluşturulabilir. Composable'ınızın arkasına düz bir yüzey çizmek için showBackground = true ayarını kullanın.

Bu, tasarım bölmesinde boşlukları ve renkleri değerlendirmeyi çok kolaylaştırır.

@Preview(showBackground = true)
@Composable
fun TextPreview() {
    Text("Hello!")
}

Aynı Anda Birden Çok Önizleme

Bir işleve birkaç @Preview açıklaması ekleyebilir veya birden çok önizleme işlevi yazabilirsiniz. Her biri ayrı olarak oluşturulur.

Bu, aynı kullanıcı arayüzünü kısa ad ve uzun ad gibi farklı örnek verilerle kontrol etmek için kullanışlıdır.

@Preview
@Composable
fun ShortNamePreview() {
    Greeting("Ada")
}

@Preview
@Composable
fun LongNamePreview() {
    Greeting("Grace Hopper")
}

Farklı Boyutları Önizleme

widthDp ve heightDp parametreleri önizleme tuvalinin boyutunu belirler. Böylece düzeninizin küçük veya büyük bir alanda nasıl göründüğünü test edebilirsiniz.

Önizlemeyi boyutlandırmak, tuhaf şekilde satır değiştirilen metinleri veya alanın dışına taşan içerikleri fark etmenize yardımcı olur.

@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
    Greeting("Hi")
}

Koyu Mod Önizlemeleri

uiMode parametresini gece moduna ayarlayarak kullanıcı arayüzünüzün koyu temada nasıl göründüğünü önizleyebilirsiniz. Bu, koyu arka planlarda yanlış görünen renkleri fark etmenizi sağlar.

Açık ve koyu önizlemeleri erkenden kontrol etmek, ileride yaşayacağınız sürprizleri önler.

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
    ProfileCard("Ada")
}

Etkileşimli ve Canlı Önizlemeler

Android Studio siz yazdıkça önizlemeyi güncelleyebilir; böylece değişiklikler neredeyse anında görünür. Ayrıca tam bir derleme yapmadan tıklayarak gezinebileceğiniz etkileşimli bir mod da vardır.

Önizlemeler uygulamayı çalıştırmanın yerini tutmaz; ancak ekran tasarlamayı çok daha hızlı hâle getirir.

Önizlemeler Yalnızca Hata Ayıklama İçindir

Önizleme işlevleri geliştirme araçlarıdır. Gönderdiğiniz uygulamanın parçası değildir ve kullanıcılara görünmez.

Bu nedenle örnek verilerle istediğiniz kadar önizleme ekleyebilirsiniz. Bunlar yalnızca IDE'de gördüklerinizi etkiler.

@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
    InfoBlock()
}

Hızlı Kontrol

Önizleme işlevleriyle ilgili önemli bir kuralı gözden geçirelim.

Özet

@Preview açıklamasının, herhangi bir cihaza ihtiyaç duymadan bir composable'ı Android Studio içinde oluşturduğunu öğrendiniz. Önizleme işlevleri parametre almaz; bu nedenle gerçek composable'ınızı örnek verilerle sarmalar.

Yararlı seçenekler arasında koyu mod için name, showBackground, widthDp, heightDp ve uiMode bulunur. Önizlemeler yalnızca hata ayıklama araçlarıdır. Sırada, gerçek bir profil kartı oluşturmak için her şeyi birleştireceksiniz.

Sıkça Sorulan Sorular

“Kullanıcı Arayüzünüzü Önizleme” dersi ücretsiz mi?

Evet — “Kullanıcı Arayüzünüzü Önizleme” 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.

“Kullanıcı Arayüzünüzü Önizleme” dersinde ne öğreneceğim?

Hızlı yineleme için @Preview 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.

“Kullanıcı Arayüzünüzü Önizleme” 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