[SWIFT] Traitement de lecture / actualisation / mise à jour des données dans TableView

introduction

Lors de l'affichage d'un article dans TableView à l'aide de l'API fournie par Qiita, j'ai implémenté __read __ / __ refresh __ / __ update __ de données, donc je l'ai publié sous forme de mémorandum. Faire.

Aperçu

1. Acquisition initiale de «QiitaAPI»
2. Actualisez le QiitaAPI acquis
3. Obtenez des QiitaAPI supplémentaires lors du défilement vers le bas de TableView

• L'explication se concentrera sur ce qui précède.

Environnement d'exploitation

【Xcode】Version 12.0.1 【Swift】Version 5.3

Code d'implémentation

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: "Chargement")
        self.refreshControl = refreshControl
        //Ligne lorsque UITableView est vide(séparateur)Définir une vue vide à désactiver
        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

    #···réduction···

    override func viewDidLoad() {
        super.viewDidLoad()
        #···réduction···
        tableView.addTargetToRefreshControl(self, action: #selector(self.refreshArticlesAction), event: .valueChanged)
        //Appeler refreshControl et charger
        tableView.beginRefreshing()
               
        #・ ・ ・ Omis (Processus d'acquisition des données de Qiita) ・ ・ ・
        tableView.endRefreshing()
        tableView.reloadData()
    }
        
    @objc private func refreshArticlesAction() {
        //Initialiser le nombre d'acquisitions
        page = 20
       
        #・ ・ ・ Omis (Processus d'acquisition des données de Qiita) ・ ・ ・
        tableView.endRefreshing()
        tableView.reloadData()
    }
    
}

#···réduction···

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 {
            //Définissez la variable: reloading sur true pendant le rechargement car elle sera appelée plusieurs fois.
            if !reloading && page < 100 {
                //Augmenter de 20 le nombre d'acquisitions
                if page <= 100 { page += 20 }
                //Remplacez l'indicateur de traitement de rechargement par "true"
                reloading.toggle()

                #・ ・ ・ Omis (Processus d'acquisition des données de Qiita) ・ ・ ・
                //Remplacez l'indicateur du processus de rechargement par "faux"
                reloading.toggle()
                tableView.reloadData()
            }
        }
    }
}

Détails d'implémentation

1. Acquisition initiale de «QiitaAPI»

• Appelez refreshControl.beginRefreshing () avec viewDidLoad pour commencer le chargement.
• Récupérez les données de Qiita.
• Arrêtez le chargement avec refreshControl.endRefreshing () et mettez à jour le contenu avec tableView.reloadData ().

2. Actualisez le QiitaAPI acquis

• Spécifié par addTarget dans l'instance de UIRefreshControl.

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)

• Chaque fois que vous tirez vers le bas, @objc private func refreshArticlesAction () est appelé, alors changez-le par le numéro d'acquisition initial 20 et acquérez les données de Qiita. (Bien que omis, le numéro d'acquisition initial est le numéro d'acquisition de «QiitaAPI»)
• Arrêtez le chargement avec refreshControl.endRefreshing () et mettez à jour le contenu avec tableView.reloadData ().

3. Obtenez des QiitaAPI supplémentaires lors du défilement vers le bas de TableView

• Utilisez la méthode déléguée ScrollView pour détecter si vous avez fait défiler vers le bas.
• Puisqu'il est appelé distanceFromBottom plusieurs fois, nous avons préparé une variable de type Bool reloading.
• Nous avons décidé d'augmenter le nombre d'acquisitions supplémentaires de QiitaAPI de 20 et de fixer la limite supérieure à 100.
• Mettez à jour le contenu avec 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 {
        //Définissez la variable: reloading sur true pendant le rechargement car elle sera appelée plusieurs fois.
        if !reloading && page < 100 {
            //Ajouter 20 acquisitions
            if page <= 100 { page += 20 }
            //Remplacez l'indicateur de traitement de rechargement par "true"
            reloading.toggle()

            #・ ・ ・ Omis (Processus d'acquisition des données de Qiita) ・ ・ ・
            //Remplacez l'indicateur du processus de rechargement par "faux"
            reloading.toggle()
            tableView.reloadData()
        }
    }
}

référence

• Faites défiler TableView pour mettre à jour les données (versions supérieure et inférieure)