Android Jetpack Compose – Accompanist : SwipeRefresh

Compose üzerinde ürettiğiniz ve listelediğiniz Liste elemanlarının güncellenmesi durumunda listeyi yenilemek için klasik android yapılarına karşılık gelen SwipeRefreshLayout nesnesinin Jetpack Compose Google Accompanist’de bulunan SwipeRefresh paketinin kullanımıyla ilgili bir örnek çalışma yapalım.

Çıktı:

Kütüphaneyi projemize dahil etmek için aşağıdaki kodları dahil edelim;

implementation "com.google.accompanist:accompanist-swiperefresh:0.24.12-rc"

Dizi adında bir veri sınıfı oluşturalım;

data class Dizi(val id: Int, val ad: String, var yil: Int)

Bir liste oluşturalım ve içerisine verilerimizi dahil edelim;

val diziListesi = listOf(
   Dizi(id = 1, ad = "Atiye", yil = 2020),
   Dizi(id = 2, ad = "Leyla ile Mecnun", yil = 2019),
   Dizi(id = 3, ad = "Hakan: Muhafız", yil = 2019),
   Dizi(id = 4, ad = "Pera Palasta Gece Yarısı", yil = 2022),
   Dizi(id = 5, ad = "Müslüm", yil = 2018),
   Dizi(id = 6, ad = "Bergen", yil = 2022)
)

SwipeReflesh nesnemizi oluşturalım;

var isRefreshing by remember { mutableStateOf(false) }
val swipeRefreshState = rememberSwipeRefreshState(isRefreshing)
SwipeRefresh(
   state = swipeRefreshState,
   onRefresh = {
      isRefreshing = true
   },
){
   //kodlar bu aralığa eklenecek.
}

Burada rememberSwipeRefleshState ile reflesh durumunu tutuyoruz, ilgili alan swipe edildiğinde onReflesh‘de bulunan true durumunu isRefleshing‘de uyguluyor olacağız. isRefleshing değeri false olmadığı tüm süre boyunca SwipeReflesh nesnesi sürekli dönüyor olacaktır. Bu nedenle birkaç saniye dönüp isRefreshing durumunun false değeri ile değiştirilmesini sağlamamız gerekmektedir.

Kodumuzun sonuna ilave yaparak aşağıdaki şekilde LaunchedEffect’i de dahil edelim.

var isRefreshing by remember { mutableStateOf(false) }
val swipeRefreshState = rememberSwipeRefreshState(isRefreshing)
SwipeRefresh(
   state = swipeRefreshState,
   onRefresh = {
      isRefreshing = true
   },
){
   //kodlar bu aralığa eklenecek.
}

LaunchedEffect(isRefreshing) {
   if (isRefreshing) {
      delay(1000L)
      isRefreshing= false
   }
}

SwipeRefresh nesnemizin scope’u arasına LazyColumn ekleyerek satır verilerimizi listeden çekelim.

LazyColumn(content = {
                            itemsIndexed(diziListesi){
                                index, item ->
                                val color = Color(
                                    Random.nextInt(256),
                                    Random.nextInt(256),
                                    Random.nextInt(256)
                                )
                                Box(
                                    content = {
                                        Text(
                                            text = item.ad + " " + item.yil,
                                            color =color,
                                            fontSize = 24.sp,
                                            textAlign = TextAlign.Center,
                                            modifier = Modifier.fillMaxWidth()
                                        )
                                    },
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .height(50.dp)
                                        .border(
                                            width = 1.2.dp,
                                            color = color,
                                            shape = CircleShape
                                        ),
                                    contentAlignment = Alignment.Center
                                )
                            }
})

Keyifli çalışmalar dilerim…