tableViewのヘッダー部分に検索ボックス(UISearchController)を追加する方法

このようにTableViewの上部に検索機能がついたUIは、iphoneアプリでよく見られます。

今回は、tableViewとUISearchControllerを使って、実装する方法を紹介します!

ソースはこのような形になります!

この実装にすれば、

  • tableViewのヘッダー部分に検索ボックスを設置できる
  • 検索ボックスフォーカス時にiphoneの入力欄が出現する
  • 検索ボックスフォーカス時に、その他の部分をタップするとフォーカスが外れる

といった具合に、いい感じのUI・UXを組み込みの機能で作ることができます!

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。