UITextFieldをタップしたら、UIViewアニメーションする検索機能をAuto layoutで作成してみた!

  • 検索枠をタップしたら、検索枠を大きくする
  • tableviewをタップしたら、検索枠が元に戻る

この2つのアニメーションを含む、レイアウトと実装をご紹介します。

Auto Layoutを使って、UIコンポーネントを配置する

上記の設定になるように、Auto Layout機能を使ってUIコンポーネントを配置します。

どのデバイスでも正常に表示されるように、検索のみwidthを指定して、それ以外は相対距離でconstraintを設定します。

UIコンポーネントをViewControllerと関連付けする

  • SearchBox・・・検索用テキストフィールドと検索ボタンを配置するUIView
  • SearchTextField・・・検索用テキストフィールド
  • SearchBoxHeightConstraint・・・SearchBoxの高さのConstraint(アニメーションする際に、この値を変更します)
  • MainTableView・・・Table View(タップしたときのアクションを設定します)

このような形で、UIコンポーネントとViewControllerを紐付けしてください。

また、UITextFieldをViewControllerにDelegateする記述も書いておきます。

検索フォーム(UITextField)にフォーカスしたら、アニメーションを実行する

上記の記述で、UITextFieldの編集を始めたタイミングと終了したタイミングを検知して、処理を行います。

行っている処理は、SearchBoxHeightConstraintの高さをアニメーションしながら変更しているだけです。

テーブルビューがタップされたときのイベントを実装する

最後に、Table Viewがタップされたら、textFieldDidEndEditing()を実行する処理を記述します。

よくありそうな検索フォームの完成!

これで、よくありそうな検索フォームが完成しました!笑

あとは、横からキャンセルボタンがアニメーションするようにしたり、Alamofireを使って実際に検索APIを叩いた結果をTableViewに描写したり、好きなように使ってください!!

全部のソース(ViewController.swift)

ABOUTこの記事をかいた人

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