(Tutorial iOS) Add Load More in UITableView

Hello guys, pada kesempatan sebelumnya saya sudah menjelaskan tentang bagaimana membuat custom tableview di ios. Bisa dilihat di sini https://wimsonevel.blogspot.com/2017/07/tutorial-ios-custom-uitableviewcell-in.html.

Tutorial kali ini saya akan akan menjelaskan bagaimana menambahkan load more di tableview atau bisa disebut paging. Mekanismenya ketika kita men-drag scroll sampai ke bawah, pada saat itu lakukan request untuk memuat data.

Oke langsung saja.

Pertama kita perlu menambahkan sebuah View yang bernama UIActivityIndicatorView dibagian footer dari UITabelView. Akan muncul loading indicator ketika tableview di drag atau scroll ke bawah. Buat extension dari UITableView dengan beberapa fungsi yaitu showLoadingFooter, hideLoadingFooter dan isLoadingFooterShowing.

import Foundation
import UIKit

// MARK: Loading Footer
extension UITableView {
    
    func showLoadingFooter(){
        let loadingFooter = UIActivityIndicatorView(activityIndicatorStyle: .gray)
        loadingFooter.frame.size.height = 60
        loadingFooter.hidesWhenStopped = true
        loadingFooter.startAnimating()
        tableFooterView = loadingFooter
    }
    
    func hideLoadingFooter(){
        let tableContentSufficentlyTall = (contentSize.height > frame.size.height)
        let atBottomOfTable = (contentOffset.y >= contentSize.height - frame.size.height)
        if atBottomOfTable && tableContentSufficentlyTall {
            UIView.animate(withDuration: 0.2, animations: {
                self.contentOffset.y = self.contentOffset.y - 60
            }, completion: { finished in
                self.tableFooterView = UIView()
            })
        } else {
            self.tableFooterView = UIView()
        }
    }
    
    func isLoadingFooterShowing() -> Bool {
        return tableFooterView is UIActivityIndicatorView
    }
    
}

Kemudian kita perlu mengimplementasikan function scrollViewDidEndDragging di ViewController.

override func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        if scrollView == tableView {
            if ((scrollView.contentOffset.y + scrollView.frame.size.height) >= scrollView.contentSize.height) {
                if !tableView.isLoadingFooterShowing() {
                    loadData()
                }
            }
        }
    }

Buat method loadData(), kemudian tampilkan loading indicator di tableview footer diikuti dengan reload data atau dari request data.

func loadData() {
        // do network request here
        
        self.tableView.showLoadingFooter()
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            
            self.foods.append(contentsOf: self.moreFoods)
            self.tableView.reloadData()
            
            self.tableView.hideLoadingFooter()
        }
    }

Kode lengkapnya :

import UIKit

class ViewController: UITableViewController {

    var foods = [Food(thumb: "rendang", name: "Rendang", country: "Indonesia"),
                 Food(thumb: "nasi_goreng", name: "Nasi Goreng", country: "Indonesia"),
                 Food(thumb: "sushi", name: "Sushi", country: "Japan"),
                 Food(thumb: "tom_yum_goong", name: "Tom Yum Goong", country: "Thailand"),
                 Food(thumb: "pad_thai", name: "Pad Thai", country: "Thailand"),
                 Food(thumb: "som_tam", name: "Som Tam", country: "Thailand"),
                 Food(thumb: "dim_sum", name: "Dim Sum", country: "Hongkong"),
                 Food(thumb: "ramen", name: "Ramen", country: "Japan"),
                 Food(thumb: "peking_duck", name: "Peking Duck", country: "China"),
                 Food(thumb: "massaman_curry", name: "Massaman Curry", country: "Thailand")]
    
    var moreFoods: [Food] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        self.moreFoods.append(contentsOf: self.foods)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func loadData() {
        // do network request here
        
        self.tableView.showLoadingFooter()
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            
            self.foods.append(contentsOf: self.moreFoods)
            self.tableView.reloadData()
            
            self.tableView.hideLoadingFooter()
        }
    }

}

struct Food {
    
    var thumb = String()
    var name = String()
    var country = String()
    
}

class CustomCell: UITableViewCell {
    
    @IBOutlet weak var thumbImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var countryLabel: UILabel!
    
}

extension ViewController {
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return foods.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let food = foods[indexPath.row]
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell
        
        cell.thumbImageView.image = UIImage(named: food.thumb)
        
        cell.nameLabel?.text = food.name
        cell.countryLabel.text = food.country
        
        return cell
    }
    
    override func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        if scrollView == tableView {
            if ((scrollView.contentOffset.y + scrollView.frame.size.height) >= scrollView.contentSize.height) {
                if !tableView.isLoadingFooterShowing() {
                    loadData()
                }
            }
        }
    }
}

Build dan jalankan maka hasilnya seperti dibawah ini.

Source lengkap dapat dilihat di https://github.com/wimsonevel/Paging-UITableView

Sekian tutorial singkat kali ini.
Jangan lupa share ke social media kalian ^^.

Share this :