Verileri listeler ve sayfalama ile yavaşça yükleme

Geç yükleme ve Sayfalandırma sayesinde, verileri artımlı olarak yükleyip görüntüleyerek uygulamanızda sonsuz listeler de dahil olmak üzere büyük öğe listelerini destekleyebilirsiniz. Bu teknik, ilk yükleme sürelerini kısaltmanıza ve bellek kullanımını optimize ederek performansı artırmanıza olanak tanır.

Sonuçlar

Aşağıdaki videoda, kullanıcı sayfayı kaydırdıkça veri getiren büyük bir listenin davranışını görebilirsiniz.

Sürüm uyumluluğu

Bu uygulama, projenizin minSDK'sının API düzeyi 21 veya sonraki sürümlere ayarlanmasını gerektirir.

Bağımlılıklar

Sayfalandırılmış içeriği görüntüleme

Paging kitaplığı sayesinde, yerel depolama alanından veya ağ üzerinden alınan daha büyük bir veri kümesinden veri sayfaları yükleyip görüntüleyebilirsiniz. Kullanıcıya daha fazla verinin getirildiğini belirtmek için ilerleme çubuğu gösteren sayfalandırılmış bir liste görüntülemek üzere aşağıdaki kodu kullanın:

@Composable
fun MessageList(
    modifier: Modifier,
    pager: Pager<Int, Message>
) {
    val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it.id }
        ) { index ->
            val message = lazyPagingItems[index]
            if (message != null) {
                MessageRow(message)
            } else {
                MessagePlaceholder()
            }
        }
    }
    @Composable
    fun MessagePlaceholder(modifier: Modifier) {
        Box(
            Modifier
                .fillMaxWidth()
                .height(48.dp)
        ) {
            CircularProgressIndicator()
        }
    }

    @Composable
    fun MessageRow(
        modifier: Modifier,
        message: Message
    ) {
        Card(modifier = Modifier.padding(8.dp)) {
            Column(
                modifier = Modifier.padding(8.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(message.sender)
                Text(message.text)
            }
        }
    }
}

Kodla ilgili önemli noktalar

  • LazyColumn: Bu composable, büyük bir öğe (mesaj) listesini verimli bir şekilde görüntülemek için kullanılır. Yalnızca ekranda görünen öğeleri oluşturur. Böylece kaynak ve bellek tasarrufu sağlar.
  • lazyPagingItems nesnesi, LazyColumn içindeki sayfalı verilerin yüklenmesini ve sunulmasını verimli bir şekilde yönetir. LazyColumn composable'ında LazyPagingItems değerini items değerine iletir.
  • MessageRow(message: Text), mesaj öğelerini tek tek oluşturmaktan sorumludur. Muhtemelen mesajın gönderenini ve metnini bir kartta gösterir.
  • MessagePlaceholder(), gerçek mesaj verileri getirilirken görsel bir yer tutucu (yükleme animasyonu) sağlayarak kullanıcı deneyimini iyileştirir.

Bu kılavuzu içeren koleksiyonlar

Bu kılavuz, daha geniş kapsamlı Android geliştirme hedeflerini kapsayan, özel olarak seçilmiş şu Hızlı Kılavuz koleksiyonlarının bir parçasıdır:

Listeler ve ızgaralar, uygulamanızın koleksiyonları kullanıcıların kolayca tüketebileceği, görsel açıdan hoş bir biçimde göstermesini sağlar.
Materyal Tasarım sistemine dayalı güzel kullanıcı arayüzü bileşenlerini kolayca oluşturmak için composable işlevleri nasıl kullanabileceğinizi öğrenin.
Bu video serisinde, çeşitli Compose API'leri tanıtılarak mevcut API'ler ve bunların nasıl kullanılacağı kısaca gösterilmektedir.

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek hızlı kılavuzlar hakkında bilgi edinin veya bizimle iletişime geçerek düşüncelerinizi paylaşın.