Selamlar, uzun zamandır yazmak istediğim bir konu hakkında minik bir seri yazacağım. Umarım faydalı olur 👩🏽💻
Biliyorsunuzdur Android’de UI geliştirmeleri için kullandığımız .xml dosyalarımız yerini Jetpack Compose’a bıraktı.
Google daha hızlı, daha kolay ve daha güzel UI tasarımlı uygulamalar yapmamız için JetPack Compose geliştirdiklerini 28 Temmuz 2021'de duyurdu. Yeni şeyleri severusss :)
Hazırsanız başlayalım, İlk olarak Jetpack Compose kütüphanemizi implement etmekle başlayalım.
Var olan uygulamamızın build.gradle dosyasında aşağıdaki gibi compose kullanacağımızı belirttiğimiz satıları android süslü parantezinin içine ekliyoruz.
Aynı sayfada dependencies olarak aşağıdaki gibi eklememizi de yapıyoruz. Artık kullanıma hazır Jetpack Compose bizi bekler.
Ayrıca Jetpack Compose implement etmek için Android Developers sayfasından da yararlanabilirsiniz.
Şimdi gidip MainActivty.kt dosyamızda “Hello Jetpack Compose” yazalım :) Bunun için bir TextView’e ihtiyacımız olacak. Jetpack Compose’ta isimler biraz kısaltılmış. Ben bu durumu Bir arkadaşımızı sevince ona daha kısa isimlerle seslenmemize benzettim🤩
The function is annotated with the
@Composableannotation. All Composable functions must have this annotation; this annotation informs the Compose compiler that this function is intended to convert data into UI.
Tüm UI tasarımı için yazdığımız fonksiyonlarda @Composable açıklaması bulunmalıdır; bu annotation, Compose derleyicisine bu işlevin verileri UI dönüştürmeyi amaçladığını bildirir.
MessageCard adında bir fonksiyon oluşturup setContent içinde oluşturduğumuz texti fonksiyonumuzun içine alalım, vereceğimiz ismi parametre olarak alalım son olarak fonksiyonumuza @Composable annotation’ını ekleyelim. Yazdığımız fonksiyonu setContent içinde çağıralım.
@Preview annotation’ı uygulamayı bir Android cihazına veya Emulator oluşturup yüklemeye gerek kalmadan, Android Studio içindeki composable bileşenlerinin UI’ını görmemizi sağlar.
@Preview kullandığımızda oluşturduğumuz fonksiyon parametre almamalıdır.
Bu nedenle, MessageCard foksiyonumuzu doğrudan @Preview annotation’ı ile çağıramayız.
Aşağıdaki resimde de görüldüğü gibi çalıştır butonu eklenir.
PreviewMessageCard fonksiyonunun nasıl göründüğünü emülator yada cihaza ihtiyaç duymadan android studiomuzun sağ tarafında görebileceğiz.
Jetpack Compose implementini yaptık @Composable ve @Preview annotationlarını da nasıl kullandığımızı öğrendik. Umarım faydalı bir yazı olmuştur 🐣
Serinin 2. sayısına aşağıdaki linkten ulaşabilirsiniz. İyi okumalar 🖖🏽
