swift: UIRefreshControlを使ってみました

概要

画面を下に引っ張ってデータを更新する用UI部品、UIRefreshControlを使ってみました。UIRefreshControl Class Referenceでは、以下のような説明になっています。

UIRefreshControlは、Table Viewのコンテンツを更新するために使う標準コントロールを提供します。Table View Controllerはユーザージェスチャに応じてデータを更新する見た目を処理します。

UIRefreshControlを使ったサンプルコードはここから取得出来ます。

実装

UITableViewの準備

storyboardを使ってUITableViewControllerを使ったアプリを作成しました。これ以外にもUITableViewを作成する方法はあります。

UITableViewControllerクラスを継承したControllerを作成し、TableViewDataSourceプロトコルを実装します。 

class TableViewController: UITableViewController {
    var items = [Item]()
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }
    
    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
        cell.textLabel!.text = items[indexPath.row].title
        return cell
        
    }
}
class Item {
    var title = ""
    
    init(title: String) {
        self.title = title
    }
}

UIRefreshControlを追加します

UITableViewControllerは、プロパティにUIRefreshControlを持っているので作成したインスタンスをセットします。addTargetで指定したメソッドが呼び出されます。 

        self.refreshControl = UIRefreshControl()
        self.refreshControl?.attributedTitle = NSAttributedString(string: "引っ張って更新")
        self.refreshControl?.addTarget(self, action: "refresh", forControlEvents: UIControlEvents.ValueChanged)

イベント処理

データを更新しRefresh処理を終了します。Refresh処理終了メソッド(endRefreshing)を呼び出さないとずっとくるくる回ったままになります。 

    func refresh() {
        print("refresh...")
        
        let count = items.count
        items.append(Item(title: "item" + String(count + 1)))
        items.append(Item(title: "item" + String(count + 2)))
        items.append(Item(title: "item" + String(count + 3)))
        
        self.tableView.reloadData()
        self.refreshControl?.endRefreshing()
        
    }

画面キャプチャ

NavigationControlも追加していますが、これはUIRefreshControlの使い方には関係ありません。

f:id:unokun3:20151231163339p:plain

関連資料