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 ^^.
