- 検索枠をタップしたら、検索枠を大きくする
- tableviewをタップしたら、検索枠が元に戻る
この2つのアニメーションを含む、レイアウトと実装をご紹介します。
Auto Layoutを使って、UIコンポーネントを配置する
上記の設定になるように、Auto Layout機能を使ってUIコンポーネントを配置します。
どのデバイスでも正常に表示されるように、検索のみwidthを指定して、それ以外は相対距離でconstraintを設定します。
UIコンポーネントをViewControllerと関連付けする
|
1 2 3 4 5 6 7 8 9 10 |
class ViewController: UIViewController, UITextFieldDelegate { @IBOutlet weak var SearchBox: UIView! @IBOutlet weak var SearchTextField: UITextField! @IBOutlet weak var SearchBoxHeightConstraint: NSLayoutConstraint! @IBOutlet weak var MainTableView: UITableView! override func viewDidLoad() { super.viewDidLoad() SearchTextField.delegate = self } } |
- SearchBox・・・検索用テキストフィールドと検索ボタンを配置するUIView
- SearchTextField・・・検索用テキストフィールド
- SearchBoxHeightConstraint・・・SearchBoxの高さのConstraint(アニメーションする際に、この値を変更します)
- MainTableView・・・Table View(タップしたときのアクションを設定します)
このような形で、UIコンポーネントとViewControllerを紐付けしてください。
また、UITextFieldをViewControllerにDelegateする記述も書いておきます。
検索フォーム(UITextField)にフォーカスしたら、アニメーションを実行する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
func textFieldDidBeginEditing(_ textField: UITextField) { UIView.animate(withDuration: 0.2) { self.SearchBoxHeightConstraint.constant = 80 self.view.layoutIfNeeded() } } func textFieldDidEndEditing(_ textField: UITextField) { UIView.animate(withDuration: 0.2) { self.SearchBoxHeightConstraint.constant = 50 self.view.layoutIfNeeded() } } |
上記の記述で、UITextFieldの編集を始めたタイミングと終了したタイミングを検知して、処理を行います。
行っている処理は、SearchBoxHeightConstraintの高さをアニメーションしながら変更しているだけです。
テーブルビューがタップされたときのイベントを実装する
|
1 2 3 4 5 6 7 8 |
override func viewDidLoad() { let tapGesture = UITapGestureRecognizer(target: self, action: #selector(mainTableTapped)) MainTableView.addGestureRecognizer(tapGesture) } @objc func mainTableTapped() { SearchTextField.endEditing(true) } |
最後に、Table Viewがタップされたら、textFieldDidEndEditing()を実行する処理を記述します。
よくありそうな検索フォームの完成！
これで、よくありそうな検索フォームが完成しました！笑
あとは、横からキャンセルボタンがアニメーションするようにしたり、Alamofireを使って実際に検索APIを叩いた結果をTableViewに描写したり、好きなように使ってください！！
全部のソース(ViewController.swift)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import UIKit class ViewController: UIViewController, UITextFieldDelegate { @IBOutlet weak var SearchBox: UIView! @IBOutlet weak var SearchTextField: UITextField! @IBOutlet weak var SearchBoxHeightConstraint: NSLayoutConstraint! @IBOutlet weak var MainTableView: UITableView! override func viewDidLoad() { super.viewDidLoad() SearchTextField.delegate = self let tapGesture = UITapGestureRecognizer(target: self, action: #selector(mainTableTapped)) MainTableView.addGestureRecognizer(tapGesture) } @objc func mainTableTapped() { SearchTextField.endEditing(true) } func textFieldDidBeginEditing(_ textField: UITextField) { UIView.animate(withDuration: 0.2) { self.SearchBoxHeightConstraint.constant = 80 self.view.layoutIfNeeded() } } func textFieldDidEndEditing(_ textField: UITextField) { UIView.animate(withDuration: 0.2) { self.SearchBoxHeightConstraint.constant = 50 self.view.layoutIfNeeded() } } } |
