5
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TableViewをスクロールしてデータ更新(上・下それぞれバージョン)

Posted at

SNSなどで見かける、読み込み済みコンテンツの端までいったら、続きを読み込む方法です。
IMG_1523.PNG

#データ更新部分を準備

データ更新処理を待つためにセマフォを設定します。


let semaphore = DispatchSemaphore(value: 1)

リフレッシュ時に以下の関数を呼ぶこととします。
ここで通信リクエストなど行います。

func updateData () {
    DispatchQueue.global().async {
        
        //*** ここでデータを更新する処理をする ***

        DispatchQueue.main.async {
            self.tableView.reloadData()
            self.semaphore.signal() // 処理が終わった信号を送る
        }
    }
}

#下向きスクロールで更新
下向きに引っ張ってリフレッシュする場合は、UIRefreshControlが使えます。

この記事:[Swift/iOS] フリックで更新するTableViewの方法です。

###1、UIRefreshControlを設置します

var refreshControl:UIRefreshControl!
override func viewDidLoad() {
        super.viewDidLoad()
        refreshControl = UIRefreshControl()
        refreshControl.attributedTitle = NSAttributedString(string: "再読み込み中")
        refreshControl.addTarget(self, action: #selector(ViewController.refresh), for: UIControl.Event.valueChanged)
        tableView.addSubview(refreshControl)
}

###2、リフレッシュ時に呼ばれる関数を設定します

    @objc func refresh() {
        updateData()

        semaphore.wait()
        semaphore.signal()
        // データ更新関数が終了したら、リフレッシュの表示も終了する
        refreshControl.endRefreshing()
    }

#上向きスクロールで更新
TableViewの一番下までスクロールしたら続きを更新する方法。YoutubeなどのUIみたいな。
ScrollViewのデリゲートメソッドを使います。TableViewはScrollViewクラスを継承しているので。

func scrollViewDidScroll(_ scrollView: UIScrollView) {
   let height = scrollView.frame.size.height
   let contentYoffset = scrollView.contentOffset.y
   let distanceFromBottom = scrollView.contentSize.height - contentYoffset
   if distanceFromBottom < height {
       if self.reloading { // デリゲートは何回も呼ばれてしまうので、リロード中はfalseにしておく
           updateData()
           semaphore.wait()
           semaphore.signal()        
           self.reloading = false
       }
   }
}

🐣


お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

Twitter
Medium

5
8
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
5
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?