【Swift】Search Barの設定。検索を補助してくれる部品を追加する。(Swift 2.1、XCode 7.2)
2020年6月16日
Search Barの設定
本記事ではUISearchBar(以下、サーチバー)のアトリビュートインスペクタの設定項目について説明する。
サーチバーの使い方については別の記事で説明しているのでそちらを参照されたし。⇒「記事」
Text
サーチバーに最初から入力されている文字列。キーボードの×ボタンで消すことができる。
Placeholder
サーチバーのプレースホルダー。プレースホルダーとは、テキストフィールドが未入力のときに仮に表示しておく文字列のことをいう。入力を開始するとプレースホルダーは消える。
以下の動画はプレースホルダーに「雑誌名を入力して下さい。」を設定した場合のプレイ動画
Prompt
サーチバーの真上に表示する文字列。下図は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に「Black」を設定した場合
下図は背景に夕日の画像、Search Styleに「Minimal」、Bar Styleに「Defalut」を設定した場合。サーチバー内のテキストフィールドの外側が透明、内側が半透明になる。
下図は背景に夕日の画像、Search Styleに「Minimal」、Bar Styleに「Black」を設定した場合。テキストフィールドの黒が濃くなった。
Translucent
サーチバーを透過するかどうかの設定。しかし、チェックを外すとストーリーボード上は透過されなくなるが、シュミレーターを起動するといつもどおり透過される事象が発生している(Swift 2.1、XCode 7.2)。何か分かったら追加する。
Tint Color
サーチバーの色。この設定を反映するにはSearch Styleを「Prominent」にする必要がある。
下図はTint Colorを緑色に設定した場合
Background
サーチバーの背景の画像ファイル名。下図はBackgroundに木目の画像を設定した場合
Scope Bar
スコープバーの背景画像。スコープバーとは、検索結果を絞り込むためのボタンを並べたバーのことで、サーチバーの真下に表示される。スコープバーを表示する方法は後述する。下図はScope Barに木目の画像を設定した場合
Search Text
文字の入力位置を「Default Position」、「Custom Offset」から選択する。「Custom Offset」を選択した場合は、Horizontal(水平方向の距離)、Vertical(垂直方向の距離)の入力欄が現れるので、デフォルト位置からの距離を入力する。
下図は「Default Position」に設定した場合
下図は「Custom Offset」でHorizontalに「100」、Verticalに「5」を設定した場合
Background
テキストフィールドの位置を「Default Position」、「Custom Offset」から選択する。「Custom Offset」を選択した場合は、Horizontal(水平方向の距離)、Vertical(垂直方向の距離)の入力欄が現れるので、デフォルト位置からの距離を入力する。
下図は「Custom Offset」でHorizontalに「100」、Verticalに「0」を設定した場合
Show Search Results Button
チェックを入れるとテキストフィールド内の右端に検索結果ボタンが表示される。
Show Bookmarks Button
チェックを入れるとテキストフィールド内の右端にブックマークボタンが表示される。
Show Cancel Button
チェックを入れるとテキストフィールドの右横にキャンセルボタンが表示される。
Show Scope Bar
チェックを入れるとテキストフィールドの真下にSegmented Controlが表示される。検索するときの絞り込み条件として使える。
上記4つのボタンを押したイベントはUISearchBarDelegateのデリゲートメソッドで受けることができる。
Scope Titles
スコープバーに表示するタイトルを追加する。「+」ボタンで新しいタイトルを追加、「-」ボタンで登録されているタイトルを削除する。しかし、タイトルの追加削除ができるものの、タイトルの変更ができない(Swift2.1、XCode7.2)。以下のようにソースコードからタイトルを設定することはできる。
1 2 |
testSearchBar.scopeButtonTitles = ["毎日", "週刊", "月刊"] |
ここで1つ、スコープを使って検索結果を絞り込むものを実装してみよう。
以降の手順を開始する前のXcodeプロジェクトをGitHubに置いたので、実装を試してみる人はご利用されたし。
⇒「テスト用プロジェクト」
事前準備では、サーチバーに入力した文字列でテーブルビューを検索するところまでを実装している。これにスコープバーを追加して、選択したボタンで検索結果を絞り込むようにする。
ストーリーボードを開き、サーチバーを選択する(下図赤枠)。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Shows Scope Barにチェックを入れる。これで、サーチバーの真下にスコープバーが表示されるようになった。
ViewController.swiftを以下のコードに変更する。
サーチバーとスコープの両方の文字列を含むデータを検索結果配列に格納するようにした。また、「スコープ変更時の呼び出しメソッド」の中で「テキスト変更時の呼び出しメソッド」を呼び出すことで、スコープ変更時にも検索結果を更新するようにした。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
// // ViewController.swift // import UIKit class ViewController: UIViewController, UITableViewDataSource, UISearchBarDelegate{ @IBOutlet weak var testTableView: UITableView! @IBOutlet weak var testSearchBar: UISearchBar! //データ let dataList = ["月刊コロコロコミック(小学館)", "コロコロイチバン!(小学館)", "最強ジャンプ(集英社)", "Vジャンプ(集英社)", "週刊少年サンデー(小学館)", "週刊少年マガジン(講談社)", "週刊少年ジャンプ(集英社)", "週刊少年チャンピオン(秋田書店)", "月刊少年マガジン(講談社)", "月刊少年チャンピオン(秋田書店)", "月刊少年ガンガン(スクウェア)", "月刊少年エース(KADOKAWA)", "月刊少年シリウス(講談社)", "週刊ヤングジャンプ(集英社)", "ビッグコミックスピリッツ(小学館)", "週刊ヤングマガジン(講談社)"] let scopeList = ["週刊","月刊","その他"] //検索結果配列 var searchResult = [String]() //最初からあるメソッド override func viewDidLoad() { super.viewDidLoad() //デリゲート先を自分に設定する。 testSearchBar.delegate = self //何も入力されていなくてもReturnキーを押せるようにする。 testSearchBar.enablesReturnKeyAutomatically = false //スコープのタイトルを設定する。 testSearchBar.scopeButtonTitles = scopeList //検索結果配列にデータをコピーする。 searchResult = dataList } //データを返すメソッド func tableView(tableView:UITableView, cellForRowAtIndexPath indexPath:NSIndexPath) -> UITableViewCell { //セルを取得する。 let cell = tableView.dequeueReusableCellWithIdentifier("TestCell", forIndexPath:indexPath) as UITableViewCell cell.textLabel?.text = searchResult[indexPath.row] return cell } //データの個数を返すメソッド func tableView(tableView:UITableView, numberOfRowsInSection section:Int) -> Int { return searchResult.count } //検索ボタン押下時の呼び出しメソッド func searchBarSearchButtonClicked(searchBar: UISearchBar) { //キーボードを閉じる。 testSearchBar.endEditing(true) } //スコープ変更時の呼び出しメソッド func searchBar(searchBar: UISearchBar, selectedScopeButtonIndexDidChange selectedScope: Int) { self.searchBar(searchBar, textDidChange:testSearchBar.text!) } //テキスト変更時の呼び出しメソッド func searchBar(searchBar: UISearchBar, textDidChange searchText: String) { //検索結果配列を空にする。 searchResult.removeAll() if(testSearchBar.text == "") { //検索文字列が空の場合はすべてを表示する。 searchResult = dataList } else { //検索文字列とスコープを含むデータを検索結果配列に追加する。 for data in dataList { if (data.containsString(searchText) && data.containsString(scopeList[searchBar.selectedScopeButtonIndex]) ){ searchResult.append(data) } } } //テーブルを再読み込みする。 testTableView.reloadData() } } |
以下は実際のプレイ動画
その他の設定項目
以下の設定については、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 | マスキングの設定 |