[swift]検索窓(UISearchbar)をコードで実装

広告

■画面内での検索機能の実装

iPhoneの小さな画面で演劇感想文リンクの膨大な公演情報を効率よく見てもらうためには検索機能は必須になると考えています。

色々な検索機能を実装していきたいと思っているのですが、とりあえず一番簡単なTableViewに表示されている公演の一覧から、公演名にもとづいて検索する機能を実装することにします。

以下の方針で実装。

  • 検索バーを画面上に表示。(UISearchBarで実装)
  • 入力された文字列に応じて、配列として保有している配列を絞り込む(filter)
  • 絞りこまれた配列に応じて、TableViewを再表示。(datareroad)

■UISearchBarの実装

ネットを検索したところ、UISearchBarという部品によって検索窓の実装が行えるようです。検索窓を実装し、画面上に表示するコードを作成しました。検索窓の実装の為に、画面のクラスにprotocol[UISearchBarDelegate]を加えます。

検索窓の生成は、以下のように各プロパティを実装します。

サイズは、別途他の要素との関係で設定するので、適当です。サーチバーのタイトルや、デフォルト表示はしないので、.text ,.promptのプロパティは未設定としました。他のプロパティは基本的にはデフォルトで設定。

検索窓の配置は、ラベルとTableViewの間に配置するので、そんな感じで。

とりあえず、表示までは、こういった感じです。スクリーンショット 2016-05-08 18.38.34

 

 

 

 

 

 

 

 

■配列の絞り込み

 

これまで、あくまで画面設計に注力してきたこともあり、データの取り扱いはかなりいい加減に作ってきました。このアプリを作成するためには、データの取り扱いと配列の取り扱いはかなり勉強しなければならないのですが、まだまだです。

今回は、画面に設定されている配列から、検索文字列での検索をします。

配列の絞り込みには、filter関数を利用しました。

公演クラスの題名でフィルタリングします。

スクリーンショット 2016-06-11 23.38.57
フィルタリングをしたデータを絞込後の公演集として、公演集画面にセット。

公演集画面をリロード(reloadData())処理を施すことで、絞りこまれたデータのみが表示されました。

 

 

 

なお、検索前の表示したリスト(この場合は、公演の一覧である「公演集」)は、直接更新せず、別に残しておく必要があります。

そうすれば、Cancelボタン押下時には、以下のように簡単に元の状態に戻すことができます。

 

 

 

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です