JavaScriptプログラマがSwift iOSアプリを2週間で作って公開してみた〜その10 UIRefreshControl〜


JavaScriptプログラマー(JSer)がSwiftデビューして、ただ作りたいアプリを作ってみたシリーズ第10回目です。

前回はアプリ内にデータをstoreする仕組みであるCoreDataの活用についてでした。今回はiOSのアプリでよくみかける、TableViewで下に引っ張ってreloadするやつの実装についてです。

引っ張ってロードするやつ英語ではPull-to-Refreshと呼ばれる機能のようです。最近のiOSアプリでは定番の挙動ですね。どうやって実装するんでしょうか?
UIRefreshControlというUIKitのフレームワークの部品を使ってかなり簡単に実装できます。

こんなやつ。
iOS Simulator Screen Shot 2015.02.19 9.26.35

実際のコードは第7回目記事で紹介したBaseTweetViewController.swiftに手を入れていきます。

BaseTweetViewController.swift

import Foundation
import UIKit
import TwitterKit
 
class BaseTweetViewController: UIViewController {
     
    var tableView: UITableView!
    var tweets: [TWTRTweet] = []
    var prototypeCell: TWTRTweetTableViewCell?
    var refreshControl:UIRefreshControl!     

    override func viewDidLoad() {
        super.viewDidLoad()
        // set title
        self.navigationItem.title = "title"
         
        // UITableViewを作成して、delegateとdataSourceを自分自身としてセットする
        tableView = UITableView(frame: self.view.bounds)
        tableView.delegate = self
        tableView.dataSource = self

        // 引っ張ってロードする
        refreshControl = UIRefreshControl()
        refreshControl.attributedTitle = NSAttributedString(string: "refresh")
        refreshControl.addTarget(self, action: "refresh", forControlEvents: UIControlEvents.ValueChanged)
        tableView.addSubview(refreshControl)
         
        // tableで使用するcellのクラスを指定する
        prototypeCell = TWTRTweetTableViewCell(style: .Default, reuseIdentifier: "cell")
         
        tableView.registerClass(TWTRTweetTableViewCell.self, forCellReuseIdentifier: "cell")
        self.view.addSubview(tableView)
         
        // initial load
        self.load()
    }
 
    // for override
    func load(cb: ()->(), errcb: () -> ()) {
    }

    func refresh() {
        // clear existing tweets
        self.tweets = []
        load({() -> () in
            // API通信後のsuccess callbackでrefreshControlのローディング状態を終了する
            self.refreshControl.endRefreshing()
            }, errcb: {() -> () in
                self.refreshControl.endRefreshing()
            }
        )
    }
}

前回紹介したコードに追加した点は初期化時にUIRefreshControlを生成して、tableViewのsubviewとしてにセットしているところです。これだけで、tableViewを下に引っ張るとぐるぐるが出てくると思います。

下に引っ張って離すとaddTargetのactionで指定した”refresh”が呼ばれます。
refreshの実装の中では以前の記事で紹介したTwitterAPIをCallするものです。(各タブに対応したviewがoverrideして実装します。)

refreshのAPI通信の処理が終わったら、refresh中を表すぐるぐるしているindicatorを消すためにendRefreshingを呼んであげます。

以上でよく引っ張ってぐるぐる実装done!
次はスクロールして一番下の方へいったら随時ローディングをするInfinite Scroll(無限スクローリング/オートローディング)についての実装を紹介します〜

TwitStockerのダウンロードはこちらから。
https://itunes.apple.com/en/app/twitstocker/id958798898?l=ja&ls=1&mt=8