JETPACK COMPOSE
Herkese merhaba,
Jetpack Compose, native Android UI’lar oluşturmak için modern bir toolkit’tir. Yani biraz daha açıklayıcı olması açısından aşağıdaki tanıma bakalım. 🙃
Hacı artık XML falan yok. Bütün UI’ını ilgili class’larda kod yazarak yapacaksın. Daha az kod, güçlü araçlar ve sezgisel Kotlin API’lar ile Android’de UI geliştirmeyi basitleştirdik ve hızlandırdık diyor Google abimiz. 😄
Bu yazımızda herhangi bir XML Layout’u kullanmadan ufak bir Login ekranı yapacağız. (1.0)
Jetpack Compose kullanabilmek için Android Studio’nun Preview sürümünü indirmeniz gerekmektedir. Buradan indirebilirsiniz.
Projemizi Oluşturalım
Jetpack Compose projesi oluşturmanın normal bir Android projesi oluşturmaktan tek bir farkı var. Android Studio’da New Project dedikten sonra karşımıza çıkan ekrandan Empty Compose Activity’i seçip Next diyoruz. Bir sonraki ekranda proje bilgilerimizi girerek Finish diyoruz ve ilk projemiz oluştu. 🙃
- Jetpack Compose, sadece Kotlin ile yazılmaktadır. Ve Min. SDK versiyonumuz API21 olmak zorundadır.
Açıkcası proje oluştuktan sonra insanın gözü res’in altında bir layout paketi aramıyor da değil. 😄
Composable Fonksiyonlar
Compose ile UI’a component eklemek Composable Fonksiyonlar aracılığıyla olur. Composable fonksiyonlar @Composable annotation’ı ile belirtilir. Ve bir Composable fonksiyon yalnızca Composable fonksiyon tarafından çağırılabilir.(Component’leri oluşturduğumuz fonksiyonların başından @Composable annotation’ını silin hata aldığınızı göreceksiniz.)
1.1'de ki prepareUI() fonksiyonumuzdan bahsedelim.
8. satırda gördüğünüz üzere bütün component’lerimizi düzgün hizanlasın Column’ın içine aldık. Aslında mantık çok basit. Hangi Component’i oluşturmak istiyorsak adeta bir fonksiyon çağırımışcasına ilgili component’in ismini yazıp paremetre olarak vermek istediğimiz özellikleri iletiyoruz.
1.2'de gördüğünüz gibi bir tane OutlinedTextField oluşturduk. Ve bazı parametreler verdik.
- value = TextField’ın değerini
- onValueChange = TextField’ın değerinde herhangi bir değişiklik olursa bunu password değişkenine atamasını söyledik.
- label = Xml’den düşünecek olursak TextField’ın hint’ini verdik.
- visualTransformation = Girilecek text’in password türünde olduğunu ve UI’da ona göre gösterim yapacağını belirttik.
- keyboardOptions = TextField’a şifre girilecek. Klavye türünü ona göre ayarla dedik. 🙃
kısacası istediğimiz özelliklere göre parametreler geçerek component’lerimizi ayarlayabiliriz.
@Preview annotation’ı ise projeyi Run etmeden IDE içerisinde eklediğimiz componentleri anlık olarak görüntülememizi sağlıyor. 😏
Nasıl ki bir XML’i class’a bağlarken onCreate içerisinde setContentView’i kullanıyorduk… Burada ise oluşturduğumuz composable fonksiyonumuzu setContent içerisine vererek “hacı bak bunları ekranda göstereceksin” diyoruz. 😄
Açıkcası şöyle güzel bir şey de var. Oluşturduğumuz bütün componentler Material Design olarak oluşuyor… XML ya da Compose tercih meselesi. 🙃
Projeye BURADAN ulaşabilirsiniz.
Bir sonraki yazıda görüşmek üzere! :)
