Uygulamalarda Sonsuz Kaydırma: Nedir, İlke ve Uygulama

Mobil uygulamalarda sonsuz kaydırma nedir?

Sonsuz kaydırma (Infinite Scroll), kullanıcı kaydırdıkça listenin sonuna otomatik olarak yeni öğelerin eklendiği bir veri yükleme desenidir. Kullanıcı «İleri» veya «Daha fazla yükle» düğmelerine tıklamaz — sistem, bir sonraki veri yığının ne zaman isteneceğini kendisi belirler ve mevcut listeye yeni girişleri sorunsuz bir şekilde ekler.

Infinite Scroll, sosyal ağlar sayesinde popülerlik kazandı — Twitter, Instagram ve TikTok bunu birincil içerik dağıtım mekanizması olarak kullanır. Nielsen Norman Group'a (2024) göre, Sonsuz kaydırma, içerik uygulamaları için etkileşimi %30–50 artırır çünkü bilişsel yükü azaltır: kullanıcının bir sonraki sayfaya gitmeye karar vermesi gerekmez. Ancak, hassas gezinme gerektiren görevler (arama, ürün karşılaştırma) için Sonsuz kaydırma verimliliği düşürebilir.

Teknik olarak, Sonsuz kaydırma üç bileşenden oluşur: bir scroll dinleyicisi (kaydırma konumunu izler), bir eşik (yüklemeyi tetiklemek için listenin sonuna olan mesafe) ve bir sayfalama mekanizması (API isteği ve veri ekleme). Eşiğin doğru yapılandırılması kritiktir: tetikleyici çok erken olursa (sondan 1000 px), kullanıcı gereksiz istekler alır; çok geç olursa (50 px), kullanıcı yükleme duraklamasını fark eder.

Infinite Scroll nasıl çalışır: mimari ve mekanik

Sonsuz kaydırmanın mimarisi, olay odaklı bir modele dayanır: liste bileşeni, kaydırma eşiğine ulaşıldığında bir olay oluşturur, ViewModel bunu işler ve bir sonraki veri yığını yüklemek için depoyu çağırır. Yanıt alındıktan sonra, yeni öğeler listeye eklenir ve kullanıcı arayüzü adaptör aracılığıyla güncellenir. Bu zincir eşzamansız olmalı ve kullanıcı arayüzü iş parçacığını bloke etmemelidir.

Temel Sonsuz kaydırma algoritması dört adım içerir. Başlatma: ekran ilk açıldığında, ilk veri yığını yüklenir (sayfa 1 veya imleç = null). İzleme: scroll dinleyicisi, kullanıcının eşiğe ulaşıp ulaşmadığını kontrol eder — genellikle listenin sonundan 200–500 px. Yükleme: API'ye sayfalama parametreleriyle bir istek gönderilir, kullanıcı arayüzünde bir yükleme göstergesi (altbilgide dönen simge) gösterilir. Ekleme: yeni öğeler adaptöre eklenir, sıçramayı önlemek için kaydırma konumu ayarlanır.

Kritik bir husus, isteklerin debounce edilmesidir. Kullanıcı hızlı bir şekilde sona kaydırırsa, sunucudan yanıt alınmadan önce tetikleyici birden çok kez çalışabilir. Debounce olmadan, bu yinelenen isteklere (yarış durumu) yol açar. Çözüm, önceki istek tamamlanana kadar yeni istekleri engellemektir. ViewModel'deki bir isLoading bayrağı birden çok çağrıyı önler: istek gönderirken isLoading = true ayarlayın, yanıt veya hata alındığında sıfırlayın.

Mobil platformlarda, Sonsuz kaydırma için özel mekanizmalar kullanılır. iOS'ta, UICollectionView'daki prefetchDataSource kullanılır ve ekran dışındaki hücreler için otomatik olarak veri ister. Android'de, Google'ın Paging 3 Kütüphanesi kullanılır ve PagingSource, PagingData ve PagingDataAdapter ile hazır bir mimari sağlar. Paging 3, ağ ve yerel verileri birleştirmek için RemoteMediator'ı destekler ve yükleme durumunu otomatik olarak yönetir.

İmleç tabanlı vs ofset tabanlı sayfalama

Ofset tabanlı sayfalama, sayfa ve boyut parametrelerini kullanır: page=2, size=20, 21–40 arasındaki kayıtları döndürür. Bu yaklaşım uygulaması basittir ancak temel bir sorunu vardır — istekler arasında veritabanına kayıt eklenir veya silinirse, ofset bozulur (kullanıcı yinelenen veya boşluklar görür). Yüksek değişiklik sıklığına sahip akışlar (haberler, yorumlar) için ofset tabanlı sayfalama yanlış sonuçlar üretir.

İmleç tabanlı sayfalama, son öğenin benzersiz bir tanımlayıcısını (imleç) kullanır: after=id_12345&limit=20. Sunucu, belirtilen imleçten sonraki 20 kaydı döndürür. Bu yaklaşım, ekleme ve silmelerden bağımsız olarak veri tutarlılığını garanti eder. GraphQL En İyi Uygulamalarına (2024) göre, imleç tabanlı sayfalama, verilerin dinamik olarak değiştiği tüm gerçek zamanlı uygulamalar için önerilir.

Yaklaşımlar arasındaki seçim, uygulama türüne bağlıdır. Sosyal ağlar (Instagram, TikTok) için — yalnızca imleç tabanlı, çünkü akış sürekli güncellenir. Seyrek değişikliklerin olduğu kataloglar (çevrimiçi mağaza ürün kategorileri) için ofset tabanlı sayfalama kabul edilebilir. Hibrit senaryolar için Google, ağdaki imleç tabanlı sayfalama ile yerel Room veritabanındaki ofset tabanlı sayfalamayı birleştiren Paging 3 RemoteMediator'ı önerir.

iOS ve Android'de Infinite Scroll uygulaması

Android'de standart yaklaşım, Jetpack'ten Paging 3 kütüphanesidir. PagingSource veri kaynağını (ağ veya veritabanı) tanımlar, PagingData veri yığınlarını içerir ve PagingDataAdapter bunları RecyclerView'da görüntüler. Paging 3, önceden getirme mesafesini, yeniden denemeyi ve yenilemeyi otomatik olarak yönetir. Ağ entegrasyonu için RemoteMediator kullanılır: API'den veri yükler, Room'da kaydeder ve PagingSource'a güncellemeleri bildirir. Google I/O 2024'e göre, Sonsuz kaydırma kullanan Android uygulamalarının %60'ından fazlası Paging 3 kullanır.

Temel Paging 3 uygulaması örneği:

class FeedPagingSource(
    private val api: FeedApi
) : PagingSource<String, Post>() {
    override suspend fun load(
        params: LoadParams<String>
    ): LoadResult<String, Post> {
        val response = api.getFeed(
            cursor = params.key,
            limit = params.loadSize
        )
        return LoadResult.Page(
            data = response.items,
            prevKey = null,
            nextKey = response.nextCursor
        )
    }
}

iOS'ta, Sonsuz kaydırma, prefetchDataSource ile UICollectionView kullanılarak uygulanır. UICollectionViewDataSourcePrefetching protokolü, sistem belirli index path'lerine kaydırmayı öngördüğünde çağrılan collectionView(_:prefetchItemsAt:) yöntemini içerir. Android Paging 3'ün aksine, iOS'ta yerleşik bir sayfalama kütüphanesi yoktur — geliştiriciler bunu manuel olarak uygular veya RxSwift + NSLayoutConstraint veya Combine tabanlı ardışık düzenler gibi üçüncü taraf çözümleri kullanır.

iOS'ta önceden getirme örneği:

extension FeedViewController: UICollectionViewDataSourcePrefetching {
    func collectionView(
        _ collectionView: UICollectionView,
        prefetchItemsAt indexPaths: [IndexPath]
    ) {
        let lastRow = collectionView.numberOfItems(inSection: 0) - 1
        if indexPaths.contains(IndexPath(row: lastRow, section: 0)) {
            viewModel.loadNextPage()
        }
    }
}

SwiftUI, onAppear değiştiricisi aracılığıyla daha bildirimsel bir yaklaşım sunar. Geliştirici, listenin sonuna bir ProgressView yerleştirir ve göründüğünde bir sonraki sayfanın yüklenmesini tetikler. Apple WWDC 2024'e göre, yeni AsyncSequence ve Swift Algorithms API'leri, yerleşik yığın ve debounce işleçleri sağlayarak Sonsuz kaydırma uygulamasını basitleştirir.

Sonsuz kaydırmanın UX sorunları ve çözümleri

Sonsuz kaydırmanın ana UX sorunu, altbilgi ve gezinme kaybıdır. Çevrimiçi mağazalarda, kullanıcılar genellikle iletişim veya bağlantılar için altbilgiye gitmek ister. Sonsuz kaydırma, altbilgiyi erişilemez hale getirir — daha fazla içerik yüklendikçe sürekli aşağı hareket eder. Çözüm, hızlı yukarı kaydırma için bir kayan eylem düğmesi (FAB) eklemek veya altbilgiyi listeden ayrı olarak sabitlemektir.

İkinci sorun, kaydırma geçmişinin olmamasıdır. Bir kullanıcı 3. konumda ilginç bir ürün görür, 50. konuma kaydırır ve ardından «Geri» tuşuna basarsa — listenin başına döner ve tekrar 50. konuma kaydırmak zorunda kalır. Çözüm, ViewModel'de kaydırma konumunu kaydetmek veya Activity/UIViewController düzeyinde durum geri yüklemeyi kullanmaktır. iOS, konum geri yükleme için NSUserActivity'yi destekler, Android ise onSaveInstanceState'yı destekler.

Üçüncü sorun, binlerce öğeyle performanstır. Sanallaştırma yapılandırılmamışsa, 500–1000 yüklenen öğeden sonra uygulama, artan bellek tüketimi nedeniyle yavaşlamaya başlar. Çözüm, yalnızca görünür ve önceden getirilmiş hücreleri bellekte tutan RecyclerView veya UICollectionView ile sanallaştırma kullanmaktır. Eski verilerin periyodik temizliği (N sayfadan sonraki sayfaları atma) da yükü azaltır.