XcodeでUISearchBarを追加する方法【初心者向け】
XcodeのUIパーツの1つである【UISearchBar（サーチバー）】を追加する方法について初心者向けに解説した記事です。サーチバーを使うと、iPhoneアプリなどに検索の機能を追加することができます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。
今回は、XcodeでUISearchBar（サーチバー）を追加する方法を初心者向けに解説します。
なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。
UISearchBarとは
UISearchBarはデータを検索したい時に使えるUIパーツです。一般的にはテーブルビューのヘッダー部などに配置して検索に用いられることが多くなっています。
情報量が多いアプリや、ECのアプリなどで設置されていると便利です。
UISearchBarの設置と利用準備
他のUIパーツと同じように、ストーリーボードにドラッグ&ドロップすることで設置できます。
設置しただけでは動作しませんので、事前準備としてコードを入力します。
まずは、ヘッダーファイルにIB Outletを作ります。
@property (weak, nonatomic) IBOutlet UISearchBar *searchBar;
また、delegateを受け取るための準備もしておきます。
@interface ViewController : UIViewController<UISearchBarDelegate>
これで準備は完了です。
[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中
処理の記述
実際に検索が使えるようにさらに処理を記述していきます。
まず最初に、UISearchBarのdelegateを受け取るためにviewDidLoadに下記のコードを記述します。
_searchBar.delegate = self;
さらに、UISearchBarのフィールド内をタップするとキーボードが表示されるように設定します。キーボードの「完了」部分が「検索」になっているので、この「検索」をタップするsearchBarSearchButtonClicked delegateが呼び出されます。
– (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar
{
[_searchBar resignFirstResponder];
// 検索処理
}
この際、1行目でUISearchBarにresignFirstResponderを送っているのは、キーボードを非表示にするためです。
また、入力候補を表示させるインクリメンタルサーチを行う場合は下記のコードを記述します。
– (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText
{
if( [searchText length] != 0 )
{
// インクリメンタル検索
}
}
UISearchBarの代表的オプション
最後に応用としてオプションを紹介します。
XcodeでUISearchBarを設置すると、4つのオプションが選べるようになります。
このうち、よく使うのはBookmarks ButtonとCancel Buttonですので、どのように表示されるか知っておきましょう。
Bookmarks Buttonの場合
ブックマークアイコンが表示されます。
なお、この処理を記述すると下記のようになります。1行目でresignFirstResponderを送っているのは、キーボードを隠すためです。
– (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar
{
[_searchBar resignFirstResponder];
// ブックマークの処理
}
Cancel Buttonの場合
サーチフィールドの幅が狭くなって、キャンセルボタンが表示されます。
この処理を記述すると下記のようになります。
– (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar
{
[_searchBar resignFirstResponder];
// サーチキャンセル
}
今回の記事は以上です。
ぜひ参考にしてみてください。
他のUIパーツの使い方も知りたい場合は、XcodeでUIProgressViewを追加する方法も合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
