Jetpack Compose - State Nedir?

Herkese merhaba dostlar,

Bu yazımda Android geliştirmede yeni bir yaklaşım olan Jetpack Compose’daki “State” kavramına daha yakından bakmaya çalışacağız. Şimdiden keyifli okumalar :) Haydi başlayalım.

Öncelikle en temel şekilde tanım yaparak başlasak sanırım doğru olanı yapmış oluruz;

State; en geniş tanımıyla uygulamada zamanla değişebilen her değerdir diyebiliriz. Burada kast ettiğimiz, class içinde bir değişkenden tutun da veri tabanındaki bir değere kadar her türlü değer olabilir. Bir kaç örnek vermek gerekirse; kullanıcıya gösterdiğiniz bir uyarı, bağlantı geçişlerinde kullanılan yükleme ekranı animasyonu gibi her türlü UI elementi bir state (durum) barındırır.

Örnek kodla konuyu daha iyi açıklamaya çalışayım.

State Örnek

Örnek kodumuzda butona her tıkladığımızda kaç bardak suyumuz olduğunu gösteren textimiz var. Burada asıl gerçekleşen olay ise butona her tıklandığında metnin içeriğini güncellemek yerine, state (durum) olarak su sayısını içeren bir değişken oluşturuyoruz ve butona her tıklandığında değişkeni güncelliyoruz. Güncellenen değişkeni observable (gözlenebilir) olarak tanımladığımız için de her seferinde yeni değer bize ekranda gösterilebiliyor.

Peki arka planda aslında ne gerçekleşiyor? Gelin birlikte bakalım.

Update Diagram

Yukardaki basit diagram aslında Compose’daki tüm UI güncellemelerinin temel gösterimini temsil ediyor. Bir önceki örneğimizde gerçekleşen olayları yukardaki diagrama göre sıralayacak olursak;

• Event, Buton’a tıklanması,
• Update state, sayı 1'in yeni değer ile güncellenmesi,
• Display state, güncellenen değerin metinde gösterilmesi.

State, herhangi bir zamanda kullanıcı arayüzünde neyin gösterileceğini belirler. Temel türler(primitive types) (String, Boolean, Int) ve hatta kaynaklar(resources) (String, Color, Drawable ve Dimension) gibi hemen hemen her şeyi durum(state) olarak kullanabilirsiniz. Durum değeriniz güncellendiğinde, onu kullanan tüm bileşenler buna göre güncellenecektir. Ve bu, Jetpack Compose’daki bildirimsel kullanıcı arayüzünün (Declerative UI) temelidir.

Yukarda bahsedilen durumlarda, görsel bir öğenin nasıl değiştiğinden kısaca bahsetmiş olduk. Dilerseniz gelin şimdi biraz daha derine inip değişen data bilgisine UI tepkisini anahtar durumlar üzerinden inceleyelim.

Temel olarak, state kavramı için 3 anahtar noktadan bahsedebiliriz;

1 - Composition: İlk kez composable’ları (fonksiyonları) çalıştırarak bir Composition’ın (ekranın) ilk kez oluşturulmasıdır.

2 - Recomposition: Veri değiştiğinde composition’u (ekranı) güncellemek için composable’ları (fonksiyonları) yeniden çalıştırmadır.

3- Compose’un state takip sistemi: Belirli bir state’i (durumu) okuyan tüm composable’lar (fonksiyonlar) için yeniden oluşturulma sırasını düzenler.

Buraya kadar gelinen noktada “state” kavramını ve Jetpack Compose ile Android Uygulama Geliştirme sürecindeki temel işlevlerinden bahsetmiş olduk.

Yazının bundan sonraki kısmında ise “State” kavramının çevresinde oluşturulan Composable Fonksiyonların state özelliğini nasıl kullandıklarına değinelim;

Composable Fonksiyonlarda “State” Kavramı

Composable fonksiyonlar, bir nesneyi bellekte depolamak için remember API’sini kullanabilirler. Remember tarafından hesaplanan bir değer, ilk compositon sırasında saklanır ve depolanan değer, recomposition sırasında döndürülür. Remember, hem değişken hem de değişmez nesneleri depolamak için kullanılabilir.

mutableStateOf, compose runtime’ı ile tümleşik, gözlemlenebilir bir MutableState<T> oluşturur.

interface MutableState<T> : State<T> {
    override var value: T
}

Değerde yapılacak herhangi bir değişiklik, değeri okuyan tüm composable fonksiyonların yeniden oluşturulmasını sağlayacaktır. Expanding Card örneğini verecek olursak, genişlik değerindeki her değişiklik, Expanding Card’ın yeniden oluşturulmasına neden olur.

Composable’da bir MutableState nesnesi bildirmenin üç yolu vardır:

• val mutableState = remember { mutableStateOf(default) }
• var value by remember { mutableStateOf(default) }
• val (value, setValue) = remember { mutableStateOf(default) }

Bu bildirimler eşdeğerdir ve state’in farklı kullanımları için kullanılabilirler. Yazdığınız composable’da okunması en kolay kodu üreteni seçmelisiniz.

“By” seçiminize göre aşağıdaki içe aktarmaları(imports) gerektirir:

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

remembered içinde saklanan değeri diğer composable’lar için kullanabileceğiniz gibi hangi composable’ların görüntüleneceğini ayarlamak gibi mantıksal döngüler için de kullanabilirsiniz. Örneğin, ad boşsa selamlamayı görüntülemek istemiyorsanız, durumu bir if ifadesinde kullanabilirsiniz:

@Composable
fun HelloContent() {
   Column(modifier = Modifier.padding(16.dp)) {
       var name by remember { mutableStateOf("") }
       if (name.isNotEmpty()) {
           Text(
               text = "Hello, $name!",
               modifier = Modifier.padding(bottom = 8.dp),
               style = MaterialTheme.typography.h5
           )
       }
       OutlinedTextField(
           value = name,
           onValueChange = { name = it },
           label = { Text("Name") }
       )
   }
}

Bu yazımda sizlere Jetpack Compose’daki “state” kavramını, bu kavramın kullanılışı ve işlevini, son olarak da Composable Fonksiyonlardaki kullanımlarından bahsetmek istedim. Daha detaylı bilgi için ilgili dokümantasyonu okuyabilirsin.

Teşekkür ederim.