【Swift】Search Barの設定。検索を補助してくれる部品を追加する。(Swift 2.1、XCode 7.2)

2020年6月16日

Search Barの設定

本記事ではUISearchBar(以下、サーチバー)のアトリビュートインスペクタの設定項目について説明する。

サーチバーの使い方については別の記事で説明しているのでそちらを参照されたし。⇒「記事

Search BarのAttribute Inspector

 

Text

サーチバーに最初から入力されている文字列。キーボードの×ボタンで消すことができる。
Search Barの設定「Text」

 

Placeholder

サーチバーのプレースホルダー。プレースホルダーとは、テキストフィールドが未入力のときに仮に表示しておく文字列のことをいう。入力を開始するとプレースホルダーは消える。

以下の動画はプレースホルダーに「雑誌名を入力して下さい。」を設定した場合のプレイ動画

 

Prompt

サーチバーの真上に表示する文字列。下図はPromptに「サイト内検索」を設定した結果。

Search Barの設定「Prompt」

 

Search Style

サーチバーのスタイルを「Default」、「Prominent」、「Minimal」から選択する。後述するBar Styleとの組み合わせで外観が変わる。「Default」は「Prominent」と同じになる。

 

Bar Style

サーチバーのスタイルを「Default」、「Black」、「Black Translucent(非推奨)」から選択する。Search Styleとの組み合わせで外観が異なる。

下図はSearch Styleに「Prominent」、Bar Styleに「Defalut」を設定した場合

Search Styleに「Prominent」、Bar Styleに「Default」を設定

 

下図はSearch Styleに「Prominent」、Bar Styleに「Black」を設定した場合

Search Styleに「Prominent」、Bar Styleに「Black」を設定

 

下図は背景に夕日の画像、Search Styleに「Minimal」、Bar Styleに「Defalut」を設定した場合。サーチバー内のテキストフィールドの外側が透明、内側が半透明になる。

Search Styleに「Minimal」、Bar Styleに「Default」を設定

 

下図は背景に夕日の画像、Search Styleに「Minimal」、Bar Styleに「Black」を設定した場合。テキストフィールドの黒が濃くなった。

Search Styleに「Minimal」、Bar Styleに「Black」を設定

 

Translucent

サーチバーを透過するかどうかの設定。しかし、チェックを外すとストーリーボード上は透過されなくなるが、シュミレーターを起動するといつもどおり透過される事象が発生している(Swift 2.1、XCode 7.2)。何か分かったら追加する。

 

Tint Color

サーチバーの色。この設定を反映するにはSearch Styleを「Prominent」にする必要がある。

下図はTint Colorを緑色に設定した場合

Bar Tintに緑を設定

 

Background

サーチバーの背景の画像ファイル名。下図はBackgroundに木目の画像を設定した場合

Backgroundに木目画像を設定

 

Scope Bar

スコープバーの背景画像。スコープバーとは、検索結果を絞り込むためのボタンを並べたバーのことで、サーチバーの真下に表示される。スコープバーを表示する方法は後述する。下図はScope Barに木目の画像を設定した場合

Scope Barの背景に木目の画像を設定

 

Search Text

文字の入力位置を「Default Position」、「Custom Offset」から選択する。「Custom Offset」を選択した場合は、Horizontal(水平方向の距離)、Vertical(垂直方向の距離)の入力欄が現れるので、デフォルト位置からの距離を入力する。

下図は「Default Position」に設定した場合

Search Styleに「Prominent」、Bar Styleに「Default」を設定

 

下図は「Custom Offset」でHorizontalに「100」、Verticalに「5」を設定した場合

Search Textに「CustomOffset」を設定

 

Background

テキストフィールドの位置を「Default Position」、「Custom Offset」から選択する。「Custom Offset」を選択した場合は、Horizontal(水平方向の距離)、Vertical(垂直方向の距離)の入力欄が現れるので、デフォルト位置からの距離を入力する。

下図は「Custom Offset」でHorizontalに「100」、Verticalに「0」を設定した場合

Backgroundに「CustomOffset」を設定

 

Show Search Results Button

チェックを入れるとテキストフィールド内の右端に検索結果ボタンが表示される。

Shows Search Results Button

 

Show Bookmarks Button

チェックを入れるとテキストフィールド内の右端にブックマークボタンが表示される。

Shows Bookmarks Buttonにチェックを入れた結果

 

Show Cancel Button

チェックを入れるとテキストフィールドの右横にキャンセルボタンが表示される。

Shows Cancel Buttonにチェックを入れた結果

 

Show Scope Bar

チェックを入れるとテキストフィールドの真下にSegmented Controlが表示される。検索するときの絞り込み条件として使える。

Shows Scope Barにチェックを入れた結果

 

上記4つのボタンを押したイベントはUISearchBarDelegateのデリゲートメソッドで受けることができる。

 

Scope Titles

スコープバーに表示するタイトルを追加する。「+」ボタンで新しいタイトルを追加、「-」ボタンで登録されているタイトルを削除する。しかし、タイトルの追加削除ができるものの、タイトルの変更ができない(Swift2.1、XCode7.2)。以下のようにソースコードからタイトルを設定することはできる。

 

ここで1つ、スコープを使って検索結果を絞り込むものを実装してみよう。

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

事前準備では、サーチバーに入力した文字列でテーブルビューを検索するところまでを実装している。これにスコープバーを追加して、選択したボタンで検索結果を絞り込むようにする。

テーブルを検索

 

ストーリーボードを開き、サーチバーを選択する(下図赤枠)。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Shows Scope Barにチェックを入れる。これで、サーチバーの真下にスコープバーが表示されるようになった。

Shows Scope Barにチェックを入れる

 

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

サーチバーとスコープの両方の文字列を含むデータを検索結果配列に格納するようにした。また、「スコープ変更時の呼び出しメソッド」の中で「テキスト変更時の呼び出しメソッド」を呼び出すことで、スコープ変更時にも検索結果を更新するようにした。

 

以下は実際のプレイ動画

 

その他の設定項目

以下の設定については、UITextViewの記事に同じことが記載されているので、そちらを参照されたし。⇒「UITextViewの記事

しかし、設定しても有効にならない事象が発生している(Swift 2.1、XCode 7.2)。理由が分かったら追記する。

設定名 説明
1 Capitalization 単語の先頭の大文字入力の設定
2 Correction 文章校正の設定
3 Spell Checking スペルチェックの設定
4 Keyboard Type サーチバーをタップしたときに表示されるキーボードタイプの設定
5 Appearance キーボードの外観の設定
6 Return Key Returnキーに表示する文字の設定
7 Auto-enable Return Key チェックを入れるとテキストフィールドに何も入力されていない場合はReturnキーが押せなくなる。
8 Secure Text Entry マスキングの設定