Swiftで虫眼鏡のアイコンを押すと検索バーが出てきて、自動的にフォーカスされるようにする

虫眼鏡のアイコンはナビゲーションバーの左右のどちらかに配置すると見栄えがいい。虫眼鏡をクリックしたときの動作は次のようにする。

@objc func showSearchBar() {
navigationItem.leftBarButtonItems?.removeAll()
navigationItem.rightBarButtonItems?.removeAll()
navigationItem.titleView = searchBar
searchBar.becomeFirstResponder()
}

まずナビゲーションバーの左右からすべてのアイテムを除去する。続いてナビゲーションバーのタイトルを検索バーにして、becomeFirstResponderを加える。ポイントはbecomeFirstResponderにある。

メモ

今回作成しているアプリでは、検索バーは以下の方針をとった。

• 検索バーはナビゲーションバーに置く。
• スマホでは隠し、普段は虫眼鏡アイコンにする。虫眼鏡アイコンを押すとナビゲーションバー全体に表示される。
• タブレットでは最初から右側に表示する。

検索バーをナビゲーションバーに置く方針は、Appleが望んでいるユーザーインターフェースに即している。優れたアプリは共通して、独自のナビゲーションとタブを廃し、Appleが最初から用意したナビゲーションやタブにボタンや検索を設置している。これらの方針は、ユーザーフレンドリーの画面遷移を深く関わっている。

また、タブレットで検索バーを虫眼鏡に縮めるやり方は間違っている。タブレットの利用者は、スマートフォンにない拡張的な世界観を欲している。窮屈な画面はユーザーの期待を裏切ることになる。