【Swift】Search Controllerの使い方。検索されたら検索結果用のビューコントローラーを呼び出す。(Swift 2.1、XCode 7.2)

2020年6月16日

Search Controllerとは

本記事ではSwiftで使える部品のUISearchController(以下、サーチコントローラー)について説明する。

Xcodeの部品リストにSearch Bar and Search Display Controllerというものがある。これはサーチコントローラーと同じような部品ではあるが、現在はDeprecated(非推奨)になっていて、代わりにサーチコントローラーを使うのが推奨されている。

Search Bar and Search Display Controller

 

サーチコントローラーとは、Search Bar(以下、サーチーバー)を持ち、検索時にデリゲートメソッドの呼び出しと結果表示用のビューコントローラーを表示する部品である。

なお、サーチコントローラーはXcodeの部品リストの中には無いのでソースコードで実装する必要がある(Xcode 7.2)。

 

サーチコントローラーを試す

サーチコントローラーを使ってテーブルのデータを検索するものを実装してみよう。

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

事前準備では、テーブルビューに人気雑誌の一覧を表示するところまで実装している。これにサーチコントローラーを追加して、入力文字列を含む雑誌の一覧が表示される動きを実装する。

 

サーチコントローラーはサーチバーの文字列が変更されると、下図のように、結果表示用ビューコントローラーのデリゲートメソッドを呼び出し、画面に表示されているビューの上に結果表示用ビューコントローラーのビューを重ねる。

検索用と結果表示用のビューコントローラーは同じにできるので、今回は1つのビューコントローラーのテーブルビューを更新する方法で検索結果を表示する。

Serch Controllerの実行イメージ

 

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

ViewDidLoadメソッドで、結果表示用のビューコントローラーに自分を設定するのと、テーブルビューのヘッダーにサーチコントローラーのサーチバーを登録している。

「検索文字列変更時の呼び出しメソッド」が呼ばれたら、検索文字列を含むデータを抽出して検索結果配列に格納している。

 

以下は実際のプレイ動画。サーチコントローラーが持っているサーチバーは最初からキャンセルボタンや削除ボタンが実装されているので嬉しい。

結果表示用のビューコントローラーを使う

先ほどの実装だとサーチバーの記事とほとんど変わらないので、結果表示用のビューコントローラーを使ってビューの上にビューを重ねるものを実装してみよう。

メニューから「File」⇒「New」⇒「File…」を選択する。

新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、「iOSのSource」⇒「Cocoa Touch Class」を選択する。

Cocoa Touch Classを選択する

 

クラス名を入力する画面が表示されるので、Classに「TestViewController」、Subclass ofに「UIViewController」を入力し、Nextボタンを押す。

クラス名を入力する

 

保存先を指定する画面が表示されるので、プロジェクトと同じ場所であることを確認し、Createボタンを押す。

保存先を指定

 

TestViewController.swift(以下、検索結果用ビューコントローラー)を以下のコードに変更する。

「検索文字列変更時の呼び出しメソッド」などの検索実行の処理をViewControllerクラスから検索結果用ビューコントローラーに移行した。検索結果用ビューコントローラーで新たにテーブルビューを作成し、検索結果をテーブルビューに表示している。

 

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

 

以下は実際のプレイ動画。サーチバーに文字を入力すると最初からあるテーブルビューの上に検索結果のテーブルビューが表示される。

入力文字列をすべて消すかキャンセルボタンを押すまで検索結果のテーブルビューは表示され続け、その間は最初からあるテーブルビューをスクロールすることはできない。