(Tutorial iOS) Pull to Refresh with UIRefreshControl

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 pada dasarnya meneruskan tutorial yang sebelumnya yakni dengan menambahkan Pull to Refresh. Untuk membuat pull to refresh di iOS dapat menggunakan widget yang dinamakan UIRefreshControl. Implementasinya cukup sederhana yaitu dengan menempakannya ke dalam table view yang kita buat.

Oke, langsung aja ke TKP.

Pertama, deklarasikan variabel UIRefreshControl berikut.

let pullRefresh = UIRefreshControl()

Buat function untuk menghandle refresh control. Di sini lah tempat menghandle network request. Untuk sementara saya menggunakan thread biasa.

func pullRefresh(_ refreshControl: UIRefreshControl) {
    // do network request here
        
    DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
        self.tableView.reloadData()
        refreshControl.endRefreshing()
    }
}

Lalu atur properties-nya (warna, text, dll) sesuai keinginan.

// Refresh Control Properties
pullRefresh.addTarget(self, action: #selector(ViewController.pullRefresh(_:)), for: UIControlEvents.valueChanged)
        
pullRefresh.tintColor = UIColor.red
pullRefresh.attributedTitle = NSAttributedString(string: "Please wait ...")

Kemudian tambakan ke dalam tableview sebagai subview.

// Add to Table View
if #available(iOS 10.0, *) {
    tableView.refreshControl = pullRefresh
} else {
    tableView.addSubview(pullRefresh)
}

Berikut source code 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")]
    
    let pullRefresh = UIRefreshControl()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // Refresh Control Properties
        pullRefresh.addTarget(self, action: #selector(ViewController.pullRefresh(_:)), for: UIControlEvents.valueChanged)
        
        pullRefresh.tintColor = UIColor.red
        pullRefresh.attributedTitle = NSAttributedString(string: "Please wait ...")
        
        // Add to Table View
        if #available(iOS 10.0, *) {
            tableView.refreshControl = pullRefresh
        } else {
            tableView.addSubview(pullRefresh)
        }

    }

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

    func pullRefresh(_ refreshControl: UIRefreshControl) {
        // do network request here
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            self.tableView.reloadData()
            refreshControl.endRefreshing()
        }
    }

}

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
        
    }

}

Build dan run, maka hasilnya sebagai berikut :

Source code lengkap dapat dilihat di https://github.com/wimsonevel/PullToRefresh

Sekian tutorial singkat kali ini, semoga bermanfaat.
Jangan lupa share ke social media kalian ya ^^

Share this :