(Tutorial Ios) Add Load More In Uitableview

Hello guys, pada kesempatan sebelumnya saya sudah menjelaskan perihal bagaimana menciptakan custom tableview di ios. Bisa dilihat di sini https://andronut.blogspot.com//search?q=tutorial-ios-custom-uitableviewcell-in.

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

Oke eksklusif saja.

Pertama kita perlu menambahkan sebuah View yang berjulukan 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(), lalu 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 alhasil ibarat dibawah ini.

Source lengkap sanggup dilihat di https://github.com/andronut/Paging-UITableView

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