-->
Selamat datang di website www.imamkunblog.com - Tempat Sharing Tips Trik Android, Komputer, Internet dll

(Tutorial iOS) Add Load More in UITableView

(Tutorial iOS) Add Load More in UITableView


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 yaitushowLoadingFooter, 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 dihttps://github.com/wimsonevel/Paging-UITableView
Sekian tutorial singkat kali ini.
Jangan lupa share ke social media kalian ^^.



















Show comments
Hide comments

0 Response to "(Tutorial iOS) Add Load More in UITableView"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×