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

需求

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

swift 3 UISearchBar编辑时右边跳出“取消”按钮_第1张图片

storyboard

swift 3 UISearchBar编辑时右边跳出“取消”按钮_第2张图片
storyboard
  • 设置好相关控件的约束,开始的时候让searchBar占满整个屏幕宽度
  • 让“取消 ”按钮紧贴在searchBar右边
  • 把searchBar与他的父控件右边的约束作为属性拉倒 .swift 文件中去
swift 3 UISearchBar编辑时右边跳出“取消”按钮_第3张图片
searchBar的约束
swift 3 UISearchBar编辑时右边跳出“取消”按钮_第4张图片
取消按钮的约束
swift 3 UISearchBar编辑时右边跳出“取消”按钮_第5张图片
黄色的就是要拉取到.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()
    }



关键点

点击前后约束的设置

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])

你可能感兴趣的:(swift 3 UISearchBar编辑时右边跳出“取消”按钮)