Jetpack Compose Hızlı Başlangıç | Kotlin Android Geliştirme #2
Jetpack Compose, Android için modern bir declarative UI Toolkit’tir. Compose, UI görünümlerini, uygulama kullanıcı arayüzünüzü oluşturmanıza olanak tanıyan declarative bir API sağlayarak uygulama kullanıcı arayüzünüzü yazmayı ve sürdürmeyi kolaylaştırır.
Declarative Programming
Tarihsel olarak, bir Android görünüm hiyerarşisi UI widget’larından oluşan bir ağaç olarak temsil edilebilir. Kullanıcı etkileşimleri gibi nedenlerle uygulamanın durumu değiştikçe, mevcut verileri görüntülemek için UI hiyerarşisinin güncellenmesi gerekir. UI’yi güncellemenin en yaygın yolu, findViewById() gibi işlevleri kullanarak yürümek ve button.setText(String), container.addChild(View) veya img.setImageBitmap(Bitmap) gibi yöntemleri çağırarak düğümleri değiştirmektir. Bu yöntemler widget’ın dahili durumunu değiştirir.
Görünümleri manuel olarak değiştirmek hata olasılığını artırır. Örneğin, bir güncelleme, kullanıcı arayüzünden yeni kaldırılmış bir aksiyonun değerini ayarlamaya çalışabilir. Genel olarak, yazılım bakım karmaşıklığı güncelleme gerektiren görünümlerin sayısıyla birlikte artar.
Son birkaç yıldır tüm endüstri, kullanıcı arayüzlerinin oluşturulması ve güncellenmesiyle ilgili mühendisliği büyük ölçüde basitleştiren bildirimsel bir UI modeline geçmeye başladı. Bu teknik, kavramsal olarak tüm ekranı sıfırdan yeniden oluşturarak ve ardından yalnızca gerekli değişiklikleri uygulayarak çalışır. Bu yaklaşım, durum bilgisi içeren bir görünüm hiyerarşisini manuel olarak güncellemenin karmaşıklığını ortadan kaldırır. Compose, bildirimsel bir kullanıcı arayüzü çerçevesidir.
Tüm ekranı yeniden oluşturmanın zorluklarından biri, zaman, bilgi işlem gücü ve pil kullanımı açısından potansiyel olarak pahalı olmasıdır. Bu maliyeti azaltmak için Compose, herhangi bir zamanda kullanıcı arayüzünün hangi bölümlerinin yeniden çizilmesi gerektiğini akıllıca seçer.
A Simple Composable Function
Compose kullanarak, veri alan ve kullanıcı arayüzü öğeleri yayan bir dizi birleştirilebilir işlev tanımlayarak kullanıcı arayüzünüzü oluşturabilirsiniz. Basit bir örnek olarak, bir String alan ve bir selamlama mesajı görüntüleyen bir Text widget’ı yayan bir Greeting widget’ı verilebilir.
- Fonksiyon @Composable ek açıklamasıyla açıklanmıştır. Tüm Composable fonksiyonları bu anotasyona sahip olmalıdır; bu anotasyon Compose derleyicisine bu fonksiyonun verileri UI’ye dönüştürmek için tasarlandığını bildirir.
- İşlev veri alır. Composable fonksiyonlar, uygulama mantığının kullanıcı arayüzünü tanımlamasına olanak tanıyan parametreleri kabul edebilir. Bu durumda, widget’ımız kullanıcıyı adıyla işleyebilmek için bir String kabul eder.
- Fonksiyon, kullanıcı arayüzünde metin görüntüler. Bunu, aslında metin UI öğesini oluşturan Text() şekillendirilebilir fonksiyonunu çağırarak yapar. Composable fonksiyonlar, diğer composable fonksiyonları çağırarak UI hiyerarşisini yayar.
- İşlev hiçbir şey döndürmez. UI yayan oluşturulabilir fonksiyonların herhangi bir şey döndürmesi gerekmez, çünkü UI widget’ları oluşturmak yerine istenen ekran durumunu tanımlarlar.
The Declarative Paradigm Shift
Birçok zorunlu nesne yönelimli kullanıcı arabirimi araç setinde, kullanıcı arabirimini bir pencere öğeleri ağacı oluşturarak başlatırsınız. Bunu genellikle bir XML düzen dosyasını şişirerek yaparsınız. Her widget kendi iç durumunu korur ve uygulama mantığının widget ile etkileşime girmesini sağlayan getter ve setter yöntemlerini ortaya çıkarır.
Compose’un bildirimsel (declarative) yaklaşımında, kullanıcı arayüzünü farklı argümanlarla aynı composable fonksiyonunu çağırarak güncellersiniz. Bu, ViewModel gibi mimari modellere durum sağlamayı kolaylaştırır. Ardından, composable fonksiyonlar, gözlemlenebilir veriler her güncellendiğinde mevcut uygulama durumunu bir kullanıcı arayüzüne dönüştürmekten sorumludur.
Uygulama mantığı, en üst düzey composable fonksiyona veri sağlar. Bu işlev, diğer composable fonksiyonları çağırarak kullanıcı arayüzünü tanımlamak için verileri kullanır ve uygun verileri bu birleştirilebilirlere ve hiyerarşide aşağıya doğru iletir.
Kullanıcı UI ile etkileşime girdiğinde, kullanıcı arayüzü onClick gibi olayları kullanır. Bu aksiyonlar, daha sonra uygulamanın durumunu değiştirebilecek olan app logic yani uygulama mantığı bilgilendirmelidir. Durum değiştiğinde, compasable fonksiyonlar yeni verilerle tekrar çağrılır. Bu, UI öğelerinin yeniden çizilmesine neden olur, bu işleme “recomposition” denir.
Kullanıcı bir UI öğesiyle etkileşime girerek bir olayın tetiklenmesine neden oldu. App logic olaya yanıt verir, ardından composable fonksiyonlar gerekirse yeni parametrelerle otomatik olarak tekrar çağrılır.
Dynamic Content
Composable fonksiyonlar XML yerine Kotlin ile yazıldığından, diğer Kotlin kodları kadar dinamik olabilirler. Örneğin, bir kullanıcı listesini selamlayan bir kullanıcı arayüzü oluşturmak istediğinizi varsayalım:
@Composable
fun Greeting(names: List<String>) {
for (name in names) {
Text("Hello $name")
}
}- Bu fonksiyon bir isim listesi alır ve her kullanıcı için bir karşılama mesajı oluşturur.
Composable fonksiyonlar oldukça karmaşık olabilir. Belirli bir UI öğesini göstermek isteyip istemediğinize karar vermek için if kondisyonlarını kullanabilirsiniz. Döngüler kullanabilirsiniz. Yardımcı fonksiyonları çağırabilirsiniz. Temel dilin tüm esnekliğine sahip olursunuz. Bu güç ve esneklik Jetpack Compose’un en önemli avantajlarından biridir.
