Pagination In UITableView with Infinite Scroll

Taha Muhsin Yılmaz
Arcelik IoT Labs
Published in
3 min readDec 9, 2019

Herkese merhabalar. Bu yazıda güncel bir çok uygulamada kullanılan infinite scroll ve pagination işlemlerinden bahsedilecektir.

Öncelikle pagination dediğimiz yapı, uzun listeler içeren verilerin çekilmesinde kullanılan web servislerden belirli parametrelerle sayfa sayfa çekilmesi işlemine verilen isimdir. Aslında bu yapı web sitelerinde sayfa işlemleri için kullanılsa da zamanla mobile de infinite scroll ile entegre edilmiştir. Ben bu yazı için linkde bulunan public bir web service kullandım. Bu servis StackExchange moderatorlerinin listelendiği bir servis ve tahmin edileceği gibi sayı fazla. Servis incelendiğinde “page” ve “pagesize” parametrelerinin query parameter olarak servise gönderildiği görülüyor. Bu işlem pagination sayfa yapısı ve her sayfada kaç veri gelmesini ayarlamak için kullanılmaktadır.

Gelen Json verisinde sadece isim ve resim URL’lerini alarak, bunları TableView içerisinde bir ImageView ve bir de Label gösterilmesi için gerekli UI eklemeleri yapıldı.

Oluşturulan projeye ait tableview yapısı.

Daha sonra gelecek API cevabına göre bir model oluşturuldu. Bu işlemin ardından servise istek atıp cevabı table view’ da güncellemek gerekiyor.

Web Servisden verilerin alınması.
TableView arayüzünün güncellenmesi.

Buraya kadar yapılan işlemler klasik web servisten alınan verilen UITableView’da gösterilmesi işlemidir. Ama burada çekilen veriler 1 sayfada 10 verinin ötesine geçememektedir. Bundan dolayı page ve perPage adında iki adet integer tanımlamamız gerekmektedir. perPage değişkenine her sayfada istenilen içerik miktarını default olarak giriyoruz. page değişkeni de başlangıçta 1' e eşitlenmelidir.

private var currentPage = 1

private var perPage: Int = 25

Daha sonra aşağıdaki metodla basit bir şekilde sayfa sayısını 1 arttırıp tekrar istek atmamız gerekiyor.

Bu işlemin ardından en önemli nokta ne zaman fetchNextPage() metodunun ne zaman çağrılacağıdır. Bu metodu çağırmak için son cell’ in render edilmesi işlemini anlamamız gerekmektedir. Çünkü son cell’e geldiğinde bir sonraki sayfanın isteği atılıp dataSource dizimize append() yapılmalı. Bu işlem için internette birçok yöntem fikir var fakat baya karışık anlatımlar söz konusu.

Bu yazı içi yapılan uygulamada bir sonraki sayfanın isteğinin atılması işlemi UITableViewDelegate metodu olan tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) metodu kullanıldı. Bu metod gösterilecek cell’i ve bu cell’e ait indexPath’in döndüğü bir metod. Fakat burada her gösterilecek cell için aynı işlem gerçekleştirilir. Bu işlemin ardından yapılacak tek şey gösterilen cell’in son cell mi olduğunu anlamak.

Gösterilecek cell’in son cell mi olup olmadığını yukarıdaki şekilde anlayabiliriz. Section içerisindeki toplam row sayısından bir eksik olan indexPath son cell’e ait indexPath’dir. Yanlız dikkat edilmesi gerekn nokta eğer serviste veri sizin ekranınıza sığabilecek durumda ise son cell her zaman ekranda olacağı için sürekli istek atma durumu olabilir. Onun için ikinci bir if’ de totalRow’un perPage modu alınarak bu durumun denetlenmesi gerçekleştirilir.

Bu yazı ile infinite scroll işlemi gerçekleştirildi. İnternetteki bir çok anlatım çok karmaşık ve güncel değil. Anlatılan gösterim en basit hali ile düzünlenmiş halidir. Tabi projenizin gerekliliklerine bağlı olarak kendinize göre customize edebilirsiniz. Umarım faydalı olur. İyi kodlamalar.

--

--