swift 3 UISearchBar编辑时右边跳出“取消”按钮

需求

实现一个搜索框，开始时占满整个屏幕宽度，有导航栏。
开始点击搜索框之后，搜索框右边显示出一个取消按钮，隐藏导航栏。
点击取消后，恢复到初始状态。
如下图：

storyboard

storyboard

• 设置好相关控件的约束，开始的时候让searchBar占满整个屏幕宽度
• 让“取消 ”按钮紧贴在searchBar右边
• 把searchBar与他的父控件右边的约束作为属性拉倒 .swift 文件中去

searchBar的约束 取消按钮的约束 黄色的就是要拉取到.swift文件中的约束

代码

遵守代理，设置属性

class PhoneABViewController: UIViewController,UITableViewDataSource,UITableViewDelegate,UISearchBarDelegate {
    let cellIdentifier = "phone_address_0_cell"
    var contacts:[Contact] = []
    var searchResults:[Contact] = []
    var isSearchControllerActive = false
    
    @IBOutlet weak var searchBar: UISearchBar!
    @IBOutlet weak var tableView: UITableView!

    @IBOutlet weak var trailling_SearcBar_SuperView_0: NSLayoutConstraint! //整个屏幕宽度时searchBar的约束
    var trailling_SearcBar_SuperView_1: NSLayoutConstraint! //（整个屏幕宽度-取消按钮的宽度）时searchBar的约束
}

searchBar的代理方法

    func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
        trailling_SearcBar_SuperView_1 = NSLayoutConstraint.init(item: self.view , attribute: .trailing, relatedBy: .equal, toItem: self.searchBar, attribute: .trailing, multiplier: 1, constant: 50)
        NSLayoutConstraint.activate([trailling_SearcBar_SuperView_1])
        NSLayoutConstraint.deactivate([trailling_SearcBar_SuperView_0])
        
        self.navigationController?.setNavigationBarHidden(true, animated: true)
        isSearchControllerActive = true
        tableView.reloadData()
    }
    
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        if searchBar.isFirstResponder {
            searchBar.resignFirstResponder()
        }
    }
    
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        let searchString = searchBar.text
        let resultPredicate = NSPredicate(format: "SELF.name contains[c] %@ or SELF.phone contains[c] %@", searchString!, searchString!)
        
        searchResults = contacts.filter(){resultPredicate.evaluate(with: $0)}
        
        tableView.reloadData()
    }

</br>

---

关键点

点击前后约束的设置

trailling_SearcBar_SuperView_1 = NSLayoutConstraint.init(item: self.view , attribute: .trailing, relatedBy: .equal, toItem: self.searchBar, attribute: .trailing, multiplier: 1, constant: 50)
        NSLayoutConstraint.activate([trailling_SearcBar_SuperView_1])
        NSLayoutConstraint.deactivate([trailling_SearcBar_SuperView_0])

点击取消之后恢复之前的约束

        trailling_SearcBar_SuperView_0 = NSLayoutConstraint.init(item: self.view , attribute: .trailing, relatedBy: .equal, toItem: self.searchBar, attribute: .trailing, multiplier: 1, constant: 0)
        NSLayoutConstraint.activate([trailling_SearcBar_SuperView_0])
        NSLayoutConstraint.deactivate([trailling_SearcBar_SuperView_1])