UISearchBarController iOS 11 issue - SearchBar and scope buttons overlap

Question

Referred here and here. No answer in first link. In the second link, though the answer is not accepted, but the link to apple developer forum gives error.

Before i

Answer 1

I met the same issue on my app, my solution is in iOS 11, using apple suggested new way for searchBar which is in navigationItem, otherwise, using the old way. My code in viewDidLoad() as below:

if #available(iOS 11.0, *) {
    navigationController?.navigationBar.prefersLargeTitles = false
    navigationItem.searchController = searchController
    navigationItem.hidesSearchBarWhenScrolling = false
    searchViewHeight.constant = 0
} else {
    searchView.addSubview(searchController.searchBar)
}

I have two IBOutlets: searchView and searchViewHeight:

@IBOutlet var searchView: UIView!
@IBOutlet var searchViewHeight: NSLayoutConstraint! // new added for iOS 11

Before iOS 11, my viewController's hierarchy as below:

I have a searchView which height is 44 to contains my searchController's searchBar view. It's under navigation bar.

In iOS 11, I add a new IBOutlet for searchView's height constraint, and set its constant to 0, hide this container view. And add searchController as a part of navigation item.

See apple's document: https://developer.apple.com/documentation/uikit/uinavigationitem/2897305-searchcontroller

One more thing is under iOS 11, the searchBar's textField background color is little darker than navigation bar color by default. For consistency, you can change it to white, the below code will work both for iOS11 and its prior:

if let textField = searchController.searchBar.value(forKey: "searchField") as? UITextField {
    if let backgroundView = textField.subviews.first {

        // Search bar textField background color
        backgroundView.backgroundColor = UIColor.white

        // Search bar textField rounded corner
        backgroundView.layer.cornerRadius = 10
        backgroundView.clipsToBounds = true
    }
}