【Swift】UISearchBar 検索文字を含むデータをインスタントサーチで一覧表示する。 | はじはじアプリ体験記

Search Bar
【Swift】Search Barの使い方。入力した文字列を含むデータを一覧表示する。

  • 2016年6月3日
    Swift 2.1で検証
  • Twitterでシェア
  • Facebook
  • LINEで送る

Search Barとは

本記事ではSwiftで使える部品のSearch Bar(以下、サーチバー)について説明する。

Search Bar

 

UISearchBarとは、検索文字列を入力するために使われるテキストフィールドである。UITextFieldでも同じようなことができるが、サーチバーを使うとブックマークボタンや絞り込み検索を行うためのスコープバーなど、検索の補助機能が使えるので便利だ。

iOSの設定画面にサーチバーがあり、設定項目を検索できるようになっている。

 

サーチバーを使ってみる

検索するものといえばテーブルビューのセルの絞り込みだ。そこで、入力した文字列を含むセルの一覧を表示するものを実装してみよう。

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

事前準備では、デバイス画面にTable View(以下、テーブルビュー)を配置し、人気漫画雑誌の一覧が表示されるようにしておいた。この画面にサーチバーを配置して、入力文字列を含む雑誌の一覧が表示される動きを実装する。

テーブルビューを使ったことのない人は、先にテーブルビューの記事を読んでおくことをお勧めする。⇒「テーブルビューの記事

テスト開始前


サーチバーをデバイス画面に配置する(下図赤矢印)。黄緑枠のアシスタントエディタボタンを押してViewController.swiftを開く。

Ctrlキーを押しながらサーチバーをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示させる。Connectionに「Outlet」、Nameに「testSearchBar」を入力し、Connectボタンを押す。これでサーチバーをソースコードで操作できるようになった。

サーチバーをデバイス画面に配置する。

 

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

アプリ起動時は画面に全データを表示するために、検索結果配列に全データを格納している。

キーボードの検索ボタンが押されたらデリゲートメソッドの「検索ボタン押下時の呼び出しメソッド」が呼び出されるので、検索結果配列を抽出されたデータのみにしてテーブル再読込みを行い、絞り込んだデータのみを画面に表示している。

 

以下は実際のプレイ動画

スポンサーリンク

入力中に検索する

昔は、検索ボタンが押されて初めて検索結果を表示するのが普通だったが、CPUの処理能力が向上している現在では、検索文字列を入力している最中に検索結果を表示するもの(インスタントサーチ)が多い。実装してみよう。

ViewController.swiftを以下のコードに変更する。「検索ボタン押下時の呼び出しメソッド」の処理を「テキスト変更時の呼び出しメソッド」に移行し、「検索ボタン押下時の呼び出しメソッド」はキーボードを閉じる処理のみにした。

 

以下は実際のプレイ動画

Swift記事一覧へ
  • Twitterでシェア
  • Facebook
  • LINEで送る
はじはじビットコイン目指せ!最強の暗号通貨トレーダー

コメント

  1. 初学者 より:

    お世話になります。「Ctrlキーを押しながらサーチバーをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示させる。Connectionに「Outlet」、Nameに「testSearchBar」を入力し、Connectボタンを押す」という操作をxcode8で行うとエラーが出ます。xcode7だと問題ありません。どうしてこのようなエラーが出てしまうのかわからない初学者です。よろしければ解説などいただければ幸いです。

    • 管理人 より:

      お世話になっております。

      エラーとはどのようなエラーが発生するのでしょうか?
      どこまで協力できるか分かりませせんが、良かったら事象内容やエラーメッセージを教えて下さい。

コメントを残す

お名前