Processing for reading / refreshing / updating data in TableView

Introduction

When displaying an article in TableView using the API provided by Qiita, I implemented __read __, __ refresh __, __ update __ of data, so I posted it as a memorandum. To do.

Overview

1. Initial acquisition of QiitaAPI
2. Refresh the acquired QiitaAPI
3. Get additional QiitaAPI when scrolling to the bottom of TableView

• The explanation will focus on the above.

Operating environment

【Xcode】Version 12.0.1 【Swift】Version 5.3

Implementation code

CustomTableView.swift

import UIKit

class CustomTableView: UITableView {
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }
    
    override init(frame:CGRect, style: UITableView.Style) {
        super.init(frame: frame, style: .plain)
        setup()
    }
        
    private func setup() {
        let refreshControl = UIRefreshControl()
        refreshControl.attributedTitle = NSAttributedString(string: "Loading")
        self.refreshControl = refreshControl
        //Line when UITableView is empty(separator)Set an empty View to turn off
        self.tableFooterView = UIView()
    }
        
    func addTargetToRefreshControl(_ target: Any?, action: Selector, event: UIControl.Event) {
        self.refreshControl?.addTarget(target, action: action, for: event)
    }

    func beginRefreshing() {
        guard let refreshControl = self.refreshControl else { return }
        refreshControl.beginRefreshing()
        refreshControl.sendActions(for: .valueChanged)
        self.contentOffset.y = -self.bounds.height
    }
    
    func endRefreshing() {
        guard let refreshControl = self.refreshControl else { return }
        refreshControl.endRefreshing()
    }
    
}

ViewController.swift

class ViewController: UIViewController {
    
    @IBOutlet private weak var tableView: CustomTableView!

    private var reloading: Bool = false
    private var page: Int = 20

    #···abridgement···

    override func viewDidLoad() {
        super.viewDidLoad()
        #···abridgement···
        tableView.addTargetToRefreshControl(self, action: #selector(self.refreshArticlesAction), event: .valueChanged)
        //Call refreshControl and load
        tableView.beginRefreshing()
               
        #・ ・ ・ Omitted (Process to acquire data from Qiita) ・ ・ ・
        tableView.endRefreshing()
        tableView.reloadData()
    }
        
    @objc private func refreshArticlesAction() {
        //Initialize the number of acquisitions
        page = 20
       
        #・ ・ ・ Omitted (Process to acquire data from Qiita) ・ ・ ・
        tableView.endRefreshing()
        tableView.reloadData()
    }
    
}

#···abridgement···

extension ViewController: UITableViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let height = scrollView.frame.size.height
        let contentYoffset = scrollView.contentOffset.y
        let distanceFromBottom = scrollView.contentSize.height - contentYoffset
        if distanceFromBottom < height {
            //Since it will be called many times, set the variable: reloading to true during reloading.
            if !reloading && page < 100 {
                //Increase the number of acquisitions by 20
                if page <= 100 { page += 20 }
                //"True" to change the flag of reload processing
                reloading.toggle()

                #・ ・ ・ Omitted (Process to acquire data from Qiita) ・ ・ ・
                //Change the flag of reload processing to "false"
                reloading.toggle()
                tableView.reloadData()
            }
        }
    }
}

Implementation details

1. Initial acquisition of QiitaAPI

• Call refreshControl.beginRefreshing () with viewDidLoad to start loading.
• Get data from Qiita.
• Stop loading with refreshControl.endRefreshing () and update the contents with tableView.reloadData ().

2. Refresh the acquired QiitaAPI

• The instance of UIRefreshControl is specified by addTarget.

CustomTableView.swift

func addTargetToRefreshControl(_ target: Any?, action: Selector, event: UIControl.Event) {
    self.refreshControl?.addTarget(target, action: action, for: event)
}

ViewController.swift

tableView.addTargetToRefreshControl(self, action: #selector(self.refreshArticlesAction), event: .valueChanged)

• Since @objc private func refreshArticlesAction () is called every time you pull it down, change it to the initial acquisition number 20 and acquire data from Qiita. (Although omitted, the initial acquisition number is the acquisition number of QiitaAPI)
• Stop loading with refreshControl.endRefreshing () and update the contents with tableView.reloadData ().

3. Get additional QiitaAPI when scrolling to the bottom of TableView

• Use the ScrollView delegate method to detect if you have scrolled down.
• Since it is called distanceFromBottom many times, I prepared a variable reloading of type Bool.
• We decided to increase the number of additional acquisitions of QiitaAPI by 20, and set the upper limit to 100.
• Update the contents with tableView.reloadData ().

ViewController.swift

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let height = scrollView.frame.size.height
    let contentYoffset = scrollView.contentOffset.y
    let distanceFromBottom = scrollView.contentSize.height - contentYoffset
    if distanceFromBottom < height {
        //Since it will be called many times, set the variable: reloading to true during reloading.
        if !reloading && page < 100 {
            //Increase the number of acquisitions by 20
            if page <= 100 { page += 20 }
            //"True" to change the flag of reload processing
            reloading.toggle()

            #・ ・ ・ Omitted (Process to acquire data from Qiita) ・ ・ ・
            //Set the reload processing flag to "false"
            reloading.toggle()
            tableView.reloadData()
        }
    }
}

reference

• Scroll TableView to update data (upper and lower versions)