【Swift】Table View Controllerの使い方 その2。テーブルをビヨーンと引っ張って更新する。(Swift 2.1、XCode 7.2)

2020年6月16日

Refresh Controlとは

前回の記事でTable View Controller(以下、テーブルビューコントローラー)の基本的な使い方について説明した。⇒「記事

Table View Controller

 

その続きで、本記事ではテーブルビューコントローラーのプロパティにあるRefresh Control(以下、リフレッシュコントロール)について説明する。

リフレッシュコントロールとは、テーブルを下に引っ張ったときにActive Indicator Viewを表示する機能である。⇒「Active Indicator Viewとは

ブラウザやTwitterで画面を下にビヨーンと伸ばしてページ更新したときに表示される読込中のあのマークだ。

 

リフレッシュコントロールを試す。

テーブルビューコントローラーはリフレッシュコントローラーを設定するためのプロパティ(refreshControl)を持っていて、そのプロパティにリフレッシュコントローラーのインスタンスを設定するだけで、テーブルビューを引っ張ったときに読込中マークが表示されるようになる。

そこでリフレッシュコントローラーを使って読込中マークを表示するものを作ってみよう。

以降の手順を開始する前のXcodeプロジェクトをGitHubに置いたので、実装を試してみる人はご利用されたし。
⇒「テスト用プロジェクト

事前準備では、テーブルビューコントローラーのテーブルビューに苗字一覧が表示されるようにしておいた。この時点ではテーブルビューを下に引っ張っても何も起きない。これにリフレッシュコントローラーを追加して、待ち時間のあいだ読込中を表示するようにする。

 

リフレッシュコントロールは部品リストの中には無いのでソースコードから設定する。

TestTableViewController.swiftを以下のコードに変更する。

ViewDidLoadメソッドの中でリフレッシュコントロールをテーブルビューコントローラーに設定している。「テーブルビュー引っ張り時の呼び出しメソッド」で、レコードの半分を削除してテーブルビューの再読み込みを行っている。

 

以下は実際のプレイ動画

引っ張らずにインジケーターを表示する

テーブルビューを引っ張らずにインジケーターを表示することができる。では、画面左端をドラッグするとインジケーターが表示されるものを作ってみよう。

Screen Edge Pan Gesture Recognizer(以下、エッジリコグナイザー)を下図黄緑枠のTable Viewまでドラッグ&ドロップで運ぶ。すると紫枠のエッジリコグナイザーが追加されるので選択する。水色枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Leftにチェックを入れる。

Ctrlキーを押しながら紫枠のエッジリコグナイザーをソースコードまで運んで吹き出しの設定画面を表示させる。Connectionに「Action」、Nameに「panLeftEdge」を入力し、Connectボタンを押す。これで画面左端をドラッグしたイベントをソースコードで受けれるようになった。

Screen Edge Pan Recognizerを配置する。

 

TestTableViewController.swiftを以下のコードに変更する。

画面左端のドラッグを開始したらbeginRefreshingメソッドを呼び出してインジケーターを表示する。この時、テーブルビューの位置を下にずらしてインジケーターを見えるようにしているのがポイントだ。

ドラッグが終了したら「テーブルビュー引っ張り時の呼び出しメソッド」を呼んでテーブルの更新を行っている。つまり、下に引っ張ったときと、左端をドラッグしたときで同じメソッドを呼び出してテーブルの更新をしている。

 

以下は実際のプレイ動画。左端をドラッグしたときは「読込中」の文字列が表示されないのが残念だ(Swift 2.1、XCode 7.2)。

 

文字列を設定するときの注意点

インジケーターの文字列を設定するタイミングには注意が必要だ。

以下のコードのように、テーブルビューコントローラーのrefreshControlプロパティにリフレッシュコントロールのインスタンスを設定したあとに文字列を設定すると、レコードの数が少ない状況ではアプリ起動時にいきなりインジケーターの文字列が表示る事象が発生する(Swift 2.1、XCode 7.2)。

バグが解消されるまではrefreshControlプロパティにリフレッシュコントロールのインスタンスを設定するようにしよう。

 

以下は実際のプレイ動画。最初から「読込中」が表示されてしまっている。

 

テーブルビューコントローラー以外でも使える

リフレッシュコントロールはテーブルビューコントローラーだけでなく、UIWebViewやUIColloctionViewや普通のUITableViewなどビヨーンと引っ張れる部品にaddSubViewでリフレッシュコントロールの機能を追加できる。

以下はUITableViewにリフレッシュコントロールを追加したプレイ動画