LoginSignup
3
5

More than 3 years have passed since last update.

[Swift] TableViewを下スワイプして画面を更新する(UIRefreshControl)

Last updated at Posted at 2021-03-02

現在開発中のアプリでTwitterのタイムラインのような、Viewを下スワイプして中身を更新する処理を追加したいと思い調査して実装。
ヒットした記事でなかなか実装出来ず多少詰まったため、記事を書くことにしました。
この記事は筆者の半ば備忘録的な記事です。

UIRefreshControlとは

画面を下に引っ張ってデータを更新するUI部品。
TwitterやYouTubeなどで皆さんが一度は見たことがある、あのクルクルです。
以下、Appleが提供するドキュメントから一部抜粋。

UIRefreshControlはUITableViewやCollectionViewを含むUIScrollViewに接続できる標準的なコントロールです。

英語でじっくり読みたいって方は一番下のリンクから飛んでみてください。
要は、スクロールビューならどれでも使えるよというやつです。

実行環境

Xcode 12.4
Swift 5.3.2

実装方法

そんな難しくはなく、すぐ実装出来ます。


   @IBOutlet weak var tableView: UITableView!  //storyboardのTableViewをアウトレット接続

   override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self  //TableViewを使うなら必須の処理
        tableView.delegate = self  //TableViewを使うなら必須の処理
        configureRefreshControl()  //この関数を実行することで更新処理がスタート
    }

    //〜中略〜

    func configureRefreshControl () {  
       //RefreshControlを追加する処理
       tableView.refreshControl = UIRefreshControl()
       tableView.refreshControl?.addTarget(self, action: #selector(handleRefreshControl), for: .valueChanged)
    }

    @objc func handleRefreshControl() {
       /*
        更新したい処理をここに記入(データの受け取りなど)
      */

       //上記の処理が終了したら下記が実行されます。
       DispatchQueue.main.async {
          self.tableView.reloadData()  //TableViewの中身を更新する場合はここでリロード処理
          self.tableView.refreshControl?.endRefreshing()  //これを必ず記載すること
       }
    }

以上です。
コメントアウトで解説は書いているのでそちらを参考にしていただけたらと思います。

注意点としては.endRefreshing()を必ず書いてくださいということくらいです。

最後に

比較的簡単に実装出来る機能ですが、汎用性の高いUIなのかなと思います。
ぜひ、実装してみてより良いアプリ開発ライフを送っていきましょう。

ではまた。

参考

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5