• 2024/3/5
• 3分

【Swift/UIKit】Pull to Refresh(プルリフ)の実装方法！UIRefreshControlの使い方

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Xcode：15.0.1
• iOS：17.0
• Swift：5.9
• macOS：Sonoma 14.1

Pull to Refresh(プルリフ)とは？

Pull to Refresh(プルリフレッシュ)とは画面上のコンテンツを上から下に引っ張ってコンテンツを更新する操作のことです。主にUIScrollViewやUITableViewなどのUIコンポーネントで使用されます。

UIRefreshControl

公式リファレンス：UIRefreshControl

UIRefreshControlはスクロール可能なビューのコンテンツ更新をコントロールするためのクラスです。つまりプルリフレッシュを実装するためのクラスがSwiftでは提供されています。

プルリフレッシュを実装する手順

Swiftでプルリフレッシュを実装するためにはUIRefreshControlインスタンスを生成しUIScrollView/UITableViewのrefreshControlプロパティにセットするだけです。

1. UIRefreshControlインスタンスを実装
2. UIScrollView/UITableViewのrefreshControlプロパティにセット
3. 完了

class ViewController: UIViewController {
    
    @IBOutlet var scrollView: UIScrollView!
    private var refreshControl = UIRefreshControl()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        refreshControl.addTarget(self, action: #selector(handleRefreshControl), for: .valueChanged)
        scrollView.refreshControl = refreshControl
    }
    
    @objc func handleRefreshControl() {
        // 任意のデータ更新処理
        DispatchQueue.main.async {
            // プルリフレッシュ終了
            self.scrollView.refreshControl?.endRefreshing()
        }
    }
}

リフレッシュ後に実行させたい処理はaddTargetで追加します。データの更新が完了したらendRefreshingメソッドでプルリフレッシュを終了させます。

インジケータの色や文字を追加する

表示されるインジケータの色を変更したり、テキストを追加することも可能です。

refreshControl.addTarget(self, action: #selector(handleRefreshControl), for: .valueChanged)
refreshControl.tintColor = .orange
refreshControl.attributedTitle = NSAttributedString(string: "Loading...")
scrollView.refreshControl = refreshControl

引っ張る距離を調整する

参考文献：公式リファレンス：UIRefreshControl のプルダウンの距離を短くする

プルリフレッシュはUIScrollViewやUITableViewの高さなどによって引っ張る距離が内部的に決められます。その際に高さが高すぎると画面いっぱいに引っ張らないと更新処理が動作しなくなってしまうのでその対処法として引っ張る距離を調整する方法があるようです。詳しくは上記の記事を参考にしてください。

class MyRefreshControl: UIRefreshControl {
    
    override func setValue(_ value: Any?, forUndefinedKey key: String) {
    }
    
    override func value(forUndefinedKey key: String) -> Any? {
        return nil
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        changeSnappingHeight()
    }
    
    private func changeSnappingHeight() {
        self.setValue(60, forKey: "_snappingHeight")
    }
}

Androidの実装はこちら

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。