[Swift3]テーブルビューの内容を検索して絞りこむ

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Swift

UITableViewUISearchBarを組み合わせて、テーブルの内容を検索し、条件に合致するセルだけを表示する処理を実装する。

今回作るもの

テーブルビューで日本の都道府県一覧を表示する。検索バーから都道府県名の漢字検索・ふりがな検索が実行でき、条件に合致する都道府県のみを表示させる。

テーブルの最下部には、何件の都道府県が表示されているかをラベルで表示する。

下準備

ストーリーボード

ストーリーボード上で、テーブルビューとサーチバーを配置。

ストーリーボードの画像

サーチバーについては、アトリビュートインスペクタで以下の赤塗り箇所を設定する。

サーチバーのアトリビュートインスペクタの画像

アウトレット接続・変数

配置したテーブルビュー・サーチバーをアウトレット接続。また、今回都道府県を表示するために必要な都道府県配列を「漢字名とふりがな」、「マスタ用と表示用」に分けて宣言する。

加えて、デリゲート類の記述も済ませておく。

viewDidLoadでの処理

テーブルビューのデリゲートとデータソース、サーチバーのデリゲートを自身に設定する。

設定が済んだら、最初に全件表示するための処理を行う。表示用配列にマスタ配列の内容をコピーし、reloadData()でテーブルの再表示を行う。(あとで説明するが、テーブルは表示用配列の内容を表示するようにしている)

テーブル周りの処理

テーブルの行数を指定する処理

テーブルは都道府県の他に「何件表示されているか」を示すセルも表示するため、セルの数は「表示用配列の要素数+1」となる。

セルの内容を作る処理

最終行かそうでないかで処理が大きく変わる。最終行かの判断は、indexPath.rowが表示用配列の要素数と等しいかどうかで行う。

最終行の場合は、灰色の文字で検索件数を表示し、セルを選択不可能にする。(セルを押してもハイライト表示されない)

最終行以外の場合は、表示用配列(漢字・ふりがな)から内容を取り出し、セルに表示する。

最終行だけ選択不可にする処理

今回はセルをタップしても何も起こらないためあまり関係はないが、willSelectRowAtにて最終行をタップしても何もしないよう処理を書いておく。

サーチバー周りの処理

検索ボタンが押された時の処理

おそらくここが一番肝になる。以下のようなことを順番に実行する。

  1. キーボードをしまう
  2. 表示用配列(漢字、ふりがな)を初期化する
  3. サーチバーのスコープ(漢字検索かふりがな検索か)により分岐
  4. 漢字検索の場合は漢字名のマスタ配列、ふりがな検索の場合はふりがなのマスタ配列の要素を1つずつ見ていき、検索条件に当てはまった要素を表示用配列に追加する
  5. 検索が終わったら、reloadData()でテーブルを再表示する

サーチバーのスコープボタンのインデックスは、左から順番に0,1,2,…となる。

キャンセルボタンが押された時の処理

サーチバーの「Cancel」ボタンが押されたら、キーボードをしまい、サーチバー・テーブルの初期化を行い、全件表示に戻す。

完成したソース

 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。