Kullanıcı alışkanlıkları yaratan işlevselliği ve kullanım kolaylığı yüksek olan arayüz elementlerini yazılımda kullanmak proje değeri için çok önemlidir.
Bu makale Compose yapısında Card ile listelenen verilere “Pull to Refresh” özelliğini uygulayarak sayfanın yenilemesini sağlayan projeyi örnekleyecektir.
Örnek görüntü;
Pull to Refresh (Swipe to Refresh) Nedir?
Kullanıcı sayfayı aşağıya doğru çektiğiniz zaman sayfadaki içeriklerin yenilenmesini sağlayan UI kütüphanesidir. Pull to Refresh özelliğini Gmail, Facebook, Twitter, Instagram gibi birçok mobil uygulama kullanmaktadır.
Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.
1-Compose Proje Oluşturma
Compose kullanabilmek için Android Studio Arctic Fox veya üst sürümlerden birini indirmeniz gerekir. Android Studio’da File > New yolunu takip edip New Project ekranında Empty Compose Activity arayüz taslağını seçmelisiniz. Next yapıp projenizi oluşturun.
2-Gerekli Kütüphanelerin Eklenmesi
Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Google Play services kütüphanesini yüklüyoruz.
|
1 2 |
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1' implementation "com.google.accompanist:accompanist-swiperefresh:0.26.5-rc" |
3-Data Class ve İçeriklerle İlgili Fonksiyonları Oluşturma
Data adında data class oluşturdum. Listede bulunan başlık, kategori vb. bilgileri Data sınıfı ile bir array içinde tutarak verileri kolay yönetebilmeyi sağladım. RefreshDataViewModel sınıfı içindeki refresh() metodunda swipe yapıldığında ne kadar sürede yenileceğini ve shuffleItems() listedeki item ların karıştırılmış halini döndür.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import androidx.lifecycle.* import kotlinx.coroutines.delay import kotlinx.coroutines.flow.* import kotlinx.coroutines.launch class RefreshDataViewModel: ViewModel() { private val _isRefreshing = MutableStateFlow(false) val isRefreshing: StateFlow<Boolean> get() = _isRefreshing.asStateFlow() //1 saniyelik sürede sayfanın yenilenmesi fun refresh() { viewModelScope.launch { _isRefreshing.emit(true) delay(1000) _isRefreshing.emit(false) } } //Array'de varolan verileri karıştırılmış halini döndüren fonksiyon fun shuffleItems(): List<Data> { return dataArray.shuffled() } } data class Data(val title: String, val category: String, val backColor: String) //Makale başlık, kategori gibi içeriklerin array'e eklenmesi val dataArray = listOf( Data("Haritada Pin Drag & Drop ile Konum Gösterme", "API & Library","#F39027"), Data("Compose ile Expandable List Oluşturma", "UI/UX","#34A8F8"), Data("Compose ile BottomSheet Kullanımı", "Animasyon","#F989E3"), Data("Play Integrity API ile Güvenlik Önlemleri", "Güvenlik,API & Library","#B4E764"), Data("Android Compose’da Lazy Layout Kullanımı", "Compose","#E8B664"), Data("Apk Uygulama İçi Güncelleme [In-app Update]", "API & Library","#81AFCD"), Data("'Insecure Data Storage' Güvenlik Zafiyetleri", "Güvenlik","#FFF909"), Data("Android View ile Compose Birlikte Kullanımı", "UI/UX","#A381CD") ) |
4- Card View Oluşturma ve SwipeRefresh Kullanımı
Compose yapısında Card View oluşturmak için Card() özelliğini kullanmamız gerekiyor. Detaylı açıklamalı örneğini oluşturduğum CardComponent fonksiyonunda inceleyebilirsiniz.
Pull to Refresh özelliğini ise SwipeRefresh() fonksiyonunu kullanarak sağlamaktayız. Çekip bırakma ile yenilemek istediğiniz sayfanın arayüz kodlarını SwipeRefresh() fonksiyonunun içine yerleştirmeniz gerekmektedir. Detaylı açıklamalı örneğini oluşturduğum RefreshData fonksiyonunda inceleyebilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.* import androidx.lifecycle.viewmodel.compose.viewModel import com.smality.pulltorefreshcompose.ui.theme.PullToRefreshComposeTheme import com.google.accompanist.swiperefresh.* class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { PullToRefreshComposeTheme { RefreshData() } } } //Card View oluşturma @Composable fun CardComponent(data: Data) { //Card view köşelerinin yuvarlıklığını, arka plan rengi gibi özelliklerini tanımlıyoruz Card(modifier = Modifier.fillMaxWidth(), shape = RoundedCornerShape(12.dp), elevation = 2.dp, backgroundColor = Color(android.graphics.Color.parseColor(data.backColor)) ) { Column( modifier = Modifier.padding(10.dp), verticalArrangement = Arrangement.spacedBy(6.dp) ) { //Card view içine başlık ve kategori Text'lerini tanımlıyoruz Text(text = data.title, fontSize = 16.sp, fontWeight = FontWeight.Bold) Text(text = data.category, fontSize = 14.sp) } } } @Composable private fun RefreshData() { //Verileri array'e eklediğimiz ve karıştırılmış veriyi sunan ViewModel sınıfı tanımlıyoruz val viewModel: RefreshDataViewModel = viewModel() val isRefreshing by viewModel.isRefreshing.collectAsState() val items = remember { mutableStateOf(dataArray) } SwipeRefresh(state = rememberSwipeRefreshState(isRefreshing = isRefreshing), onRefresh = { //RefreshDataViewModel'de 1 saniyede yenileme yapan metodu viewModel.refresh() //RefreshDataViewModel'de karıştırılmış içeriğimizi kullanıyoruz items.value = viewModel.shuffleItems() }) { //Card elementlerini alt alta listeleme için LazyColumn tanımlıyoruz LazyColumn( contentPadding = PaddingValues(15.dp), verticalArrangement = Arrangement.spacedBy(10.dp) ) { items(items.value) { item -> CardComponent(data = item) } } } } } |
Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.
