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


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

前回は下に引っ張ってreloadするやつ(Pull-to-Refresh)についてでした。今回は下にスクロールを続けた時に随時データを読み込むInfinite Scroll(無限スクローリング)についてです。

無限スクロールはJSで実装するときは通常スクロールポジションを判定して逐次APIリクエスト発行するのが普通だと思います。

iOSのtableViewを使ったUIで無限スクロールを実装するときは、UITableViewのdelegateとして提供されるUITableViewDataSourceの中のfuncでRenderingされる時に各table cellのindexに応じた実装をすることができます。

第7回記事Tweet with UITableViewCellでUITableViewでTwitter APIのレスポンスを受け取ってレンダリングする部分の紹介をしました。その中の、BaseTweetViewController.swiftのUITableViewDelegateを実装している部分を書き換えます。

BaseTweetViewController.swift

// UITableViewDataSourceを実装する
extension BaseTweetViewController : UITableViewDataSource {
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tweets.count
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell") as TWTRTweetTableViewCell
        if tweets.count > indexPath.row {
            // for TWTRTweetViewDelegate to handling on select
            cell.tweetView.delegate = self
            let tweet = tweets[indexPath.row]
            cell.tag = indexPath.row
            cell.configureWithTweet(tweet)
            // load more data by showing a last table cell
            if (tweets.count - 1) == indexPath.row && self.maxIdStr != "" {
                self.loadMore({() -> () in }, errcb: {() -> () in })
            }
        }
        return cell
    }
}

この最後の方に記述している”(tweets.count – 1) == indexPath.row“という条件式が一番下まできたら、という判定を行っています。このUITableViewDataSourceのfunc tableviewは各Cellが画面に表示れるタイミングで呼ばれます。そこで、現在APIレスポンスとしてのtweetsの数とcellのindexをチェックすれば判定できるということです。

maxIdStrはtwitterのAPIのresponseで返される値でこれがある時は、次のリクエストのパラメーターの”max_id”に渡すとそのID以降のtweetsを返してくれるようになります。(なので、API responseを受け取った時にselfのmaxIdStrにセットしておく必要があります。)

これ以上読み込むものがない場合はTwitter APIのレスポンスで”max_id”が空になりますので、その場合はloadMoreは呼ばないようにすれば完成です。

もしぐるぐる回るようなloading indicatorを表示したい場合はもっと複雑になるかもしれませんが、今回はindicator無しで無限スクロールを実現しました。

次回の記事はNavigationやUITabBarItemのテーマカラーとかアイコンの設定のあたりについて紹介します。

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