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

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

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

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

この実装にすれば、

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

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

ABOUTこの記事をかいた人

新卒でノマドワーカー(webデザイナー)として独立し、半年で月収100万円を達成する。その後、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んできました。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは、お金のことを考えずに、様々な企業でエンジニア修行をさせていただきながら、複数のメディアやアプリとweb制作事務所を運営しています。 趣味は株式投資(米国・日本株メイン)で、トレードを楽しむ日も多いです!