LoginSignup
4
6

More than 3 years have passed since last update.

UISearchBarのキャンセルボタンをアニメーション付きで表示したい話

Last updated at Posted at 2020-01-22

UISearchBarをタップして編集状態中だけキャンセルボタンを表示したいと、
ちょびっと悩んだので備忘録として書いときます。

↓こんな感じのやつ
qqytl-ojzlm.gif

アニメーション無しの場合

showsCancelButtonを使うことで表示の制御はできますが、アニメーションはありません。

searchBar.showsCancelButton = true

アニメーション有りの場合

setShowsCancelButtonを使いましょう

searchBar.setShowsCancelButton(true, animated: true)

実装例

コピペをこよなく愛する者たちへの贈り物です😘

import UIKit

class  ViewController: UIViewController,UISearchBarDelegate {

    @IBOutlet weak var searchBar: UISearchBar!

    override func viewDidLoad() {
        super.viewDidLoad()

        // デリゲート設定
        searchBar.delegate = self
    }

    // 検索バー編集開始時にキャンセルボタン有効化
    func searchBarTextDidBeginEditing(_ searchBar: UISearchBar){
        searchBar.setShowsCancelButton(true, animated: true)
    }

    // キャンセルボタンでキャセルボタン非表示
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        searchBar.resignFirstResponder()
        searchBar.setShowsCancelButton(false, animated: true)
    }

    // エンターキーで検索
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar){
        searchBar.resignFirstResponder()
        searchBar.setShowsCancelButton(false, animated: true)
    }

    // 入力された文字出力
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        print(searchText)
    }
}

4
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
6