XcodeでUISearchBarを追加する方法【初心者向け】

XcodeのUIパーツの1つである【UISearchBar(サーチバー)】を追加する方法について初心者向けに解説した記事です。サーチバーを使うと、iPhoneアプリなどに検索の機能を追加することができます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。

今回は、XcodeUISearchBar(サーチバー)を追加する方法を初心者向けに解説します。

 

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

UISearchBarとは

UISearchBarはデータを検索したい時に使えるUIパーツです。一般的にはテーブルビューのヘッダー部などに配置して検索に用いられることが多くなっています。

情報量が多いアプリや、ECのアプリなどで設置されていると便利です。

UISearchBar

 

UISearchBarの設置と利用準備

他のUIパーツと同じように、ストーリーボードにドラッグ&ドロップすることで設置できます。

UISearchBar2
XcodeScreenSnapz001

 

設置しただけでは動作しませんので、事前準備としてコードを入力します。

まずは、ヘッダーファイルに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つのオプションが選べるようになります。

XcodeScreenSnapz002

 

このうち、よく使うのはBookmarks ButtonとCancel Buttonですので、どのように表示されるか知っておきましょう。

 

Bookmarks Buttonの場合

ブックマークアイコンが表示されます。

Bookmarks Button

なお、この処理を記述すると下記のようになります。1行目でresignFirstResponderを送っているのは、キーボードを隠すためです。

– (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar
{
[_searchBar resignFirstResponder];
// ブックマークの処理
}

 

Cancel Buttonの場合

サーチフィールドの幅が狭くなって、キャンセルボタンが表示されます。

Cancel Button

この処理を記述すると下記のようになります。

– (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar
{
[_searchBar resignFirstResponder];
// サーチキャンセル
}

 

今回の記事は以上です。
ぜひ参考にしてみてください。

 

他のUIパーツの使い方も知りたい場合は、XcodeでUIProgressViewを追加する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。