searchBarの以下の画像のような実装方法について

Question

初めてこのサイトを使わせていただきます。
高校2年のプログラミング初心者女子です。
練習でinstaguramを作っています。
皆さんの助言が欲しいです。よろしくお願いします。

前提・実現したいこと

このような画像のsearchBarの実装方法が知りたいです。

インスタの検索画面はsearchbarに何も入力していなと、以下のような左の画面です。
ただ、searchbarをタップすると、右のような画面に変わります。
どのような処理を書いているのでしょうか？知りたいです。

試したこと

おそらく最初の画面（searchbarに入力前）は、collectionViewを使っているとわかりましたが、文字を入力した途端に、tableViewを使った画面に遷移する方法が知りたいです。

Answer 1

UISearchBarを選択した時にUICollectiionViewを隠してUITableViewを表示するようにViewを調整すればでできると思います。
また、もう1つの方法としては、UISearchControllerを使って、検索を開始した時に別の検索結果表示用画面に切り替えることもできますので、その検索結果表示用画面をUITableViewの表示にすればできると思います。
(参考)
https://qiita.com/on0z/items/ba84c1df0b9a5163d31a

質問のInstagramの画面はUISearchControllerを使っているような気がします。

Comments

[hfdainvk]

わぁ〜ありがとうございます????‍♀️
ひとつお聞きしたいんですけど、UISearchControllerがストーリーボードに追加するボタンの一覧(UISearchBar やUIButtonなどがあるところです！)の中にないんですけど、どうしたらいいでしょーか？

[TakeOne]

UISearchControllerはStoryboaedでは追加できません。コードで書く必要があります。まずは参考記事の通りにプロジェクトを作ってアプリを動かしてみて、どのような動きになるのか確かめ、UISearchControllerの使い方を勉強するところから始める必要があると思います。