Upgrading our application to support iPhone X. How can I add a search bar to the header of a table view and have it within the safe zone? Here is how we currently build the search bar.
let searchController = UISearchController(searchResultsController: nil)
func buildSearchBar() {
self.searchController.searchResultsUpdater = self
self.searchController.hidesNavigationBarDuringPresentation = false
self.searchController.dimsBackgroundDuringPresentation = false
self.searchController.searchBar.sizeToFit()
self.tableView.tableHeaderView = searchController.searchBar
self.definesPresentationContext = true
}
This topic is discussed explicitly in Building Apps for iPhone X video. (Designing for iPhone X also a good video.)
Bottom line, Apple suggests using navigation controller and showing it there:
let searchController = UISearchController(searchResultsController: nil)
searchController.searchResultsUpdater = self
searchController.obscuresBackgroundDuringPresentation = false
if #available(iOS 11, *) {
navigationItem.searchController = searchController
searchController.isActive = true
} else {
present(searchController, animated: true)
}
(By the way, even in the absence of a navigation controller, present-ing the search controller, rather than setting it to be the table header, can prevent it from scrolling out of the safe area.)
Unclear what you mean by "within the safe zone". The table view can scroll, so the search bar is not necessarily "within" any part of the screen; it can be scrolled up behind the sensor area and on beyond.
You'll notice, however, that the native apps do not put the search bar as the header of the table. They put it in the navigation bar. You should do the same. Put the search bar into the navigation bar by setting the searchController of the navigationItem.
Related
Left side displays my app in the iPhone 7 simulator. Right side is the app as displayed in my device. When tapping in the search bar, the navbar sildes up but then slides back down as showing in the image with the "What is this?" text.
The code for my search controller is as follows and it is being called in viewDidLoad.
//MARK: - Search Controller
func configureSearchController() {
searchController.dimsBackgroundDuringPresentation = false
definesPresentationContext = true
// to receive updates
searchController.searchResultsUpdater = self
// Set up searchbar of search controller
searchController.searchBar.scopeButtonTitles = ["All", "Something", "Something"]
searchController.searchBar.delegate = self
// add the searchbar to the tableview
tableView.tableHeaderView = searchController.searchBar
// hack to fix ocassional bugs
searchController.searchBar.sizeToFit()
}
I am running into a small problem, I implemented the new iOS 11's style search bar in my app, and I noticed that it disappeared with a slightly different animation from the one in Messages for example. It's faster and less smooth.
Anyone has ever stumble upon this "problem" ?
Here is the code I use :
searchController.searchResultsUpdater = self
searchController.obscuresBackgroundDuringPresentation = false
searchController.searchBar.delegate = self
if #available(iOS 11.0, *) {
navigationItem.searchController = searchController
} else {
tableView.tableHeaderView = searchController.searchBar
searchController.searchBar.barTintColor = .white
searchController.searchBar.layer.borderColor = UIColor.white.cgColor
searchController.searchBar.layer.borderWidth = 1
}
definesPresentationContext = true
searchController.searchBar.placeholder = "all_search".localized
EDIT:
I don't know if it will help you, but I am scrolling at a normal pace .
Thanks
Adding
self.extendedLayoutIncludesOpaqueBars = true
to my viewDidLoad solved the issue, your navigation bar must not be translucent and note that extendedLayoutIncludesOpaqueBars = true is being attributed to my main view which holds the tableview.
This happens when your table view doesn't go all the way to the top of the view. Make sure your table view is "behind" the navigation bar and uses extended edges and extend under opaque edges if your navigation bar is opaque.
Try this, it fixes it for me. I used a different UIViewController as the searchResultsUpdater and just set extendedLayoutIncludesOpaqueBars as true.
searchResultsUpdater.extendedLayoutIncludesOpaqueBars = true
searchController.searchResultsUpdater = searchResultsUpdater
UIView.animate(withDuration: 1, animations: {
//your codes to implement
}, completion: nil)
change withDuration: in seconds
Custom UITableViewController for UISearchController overlays the search bar in iOS 11 when you set the search controller to the navigationItem.searchController. The table view controller covers the whole screen so you cannot see the search bar while typing. This is not an issue when you send nil to UISearchController. Basically, I have a search bar for this map app, so I am setting a UITableViewController to the UISearchController to handle the display of the search result when searching for location. Previously, the table view shows up at the bottom of the search bar, now it covers the whole screen.
Here's a code snippet:
searchController = UISearchController(searchResultsController: searchResultsController)
searchController.searchBar.sizeToFit()
searchController.hidesNavigationBarDuringPresentation = true
searchController.dimsBackgroundDuringPresentation = true
searchController.definesPresentationContext = false
searchController.searchResultsUpdater = self
searchController.delegate = self
if #available(iOS 11.0, *){
self.navigationItem.searchController = searchController
}
Found the issue. Need to set the right origin value in willPresentSearchController
In my app, I used to have a search bar in the header view of my table view. However, I have added a search bar button item, and when a user taps it, I want a search bar to animate across the navigation bar, and the user should be able to search. This is kind of like the search bar in the Twitter iOS app. here is the code for my UISearchController:
self.searchController = ({
let controller = UISearchController(searchResultsController: nil)
controller.searchResultsUpdater = self
controller.hidesNavigationBarDuringPresentation = true
controller.dimsBackgroundDuringPresentation = false
controller.searchBar.sizeToFit()
//self.tableView.tableHeaderView = controller.searchBar
self.definesPresentationContext = true
controller.searchBar.returnKeyType = .Search
controller.searchBar.delegate = self
return controller
})()
Here is how my UINavigationBar looks like right now:
How would I go about doing this?
You're almost there. You need to do four things:
searchController.hidesNavigationBarDuringPresentation = false
navigationItem.titleView = searchController.searchBar
hide all the current UIBarButtonItems you have in the navigation bar
searchController.searchBar.becomesFirstResponder()
That is, you setup your UISearchController so it doesn't hide the navigation bar, as the UISearchBar is gonna be displayed there.
Then, when your IBAction runs, you do something like:
navigationItem.hidesBackButton = true
navigationItem.titleView = searchController.searchBar
navigationItem.rightBarButtonItem = nil
searchController.searchBar.becomeFirstResponder()
That guarantees the UISearchBar will use the entire UINavigationBar when it becomes the first responder. You also get the UISearchBar animation, which does a good job in hiding the unanimated removal of the UIBarButtonItems.
You will need to implement the UISearchBarDelegate (or if you prefer UISearchControllerDelegate) to restore the original navigation bar state once the user is done with the search.
One very important detail is that in order for your UISearchBar to be editable in the titleView, no other view controller can be set with definesPresentationContext = true at the time yours is pushed.
I'm using an UISplitViewController and on the detail view I have an UISearchController, but when the search bar gets active, the component suddenly goes to the right and half of it stay out of screen.
I tried to post the image, but sadly "You need at least 10 reputation to post images.", so I uploaded here http://iferiados.com.br/bug.jpg
It occurs only in the iPad and only when the display mode is .AllVisible, if I expand the detail view to all screen, the search bar stay in the correct place.
My code for the search controller:
var searchController: UISearchController!
//and in the viewDidLoad():
searchController = UISearchController(searchResultsController: nil)
searchController.hidesNavigationBarDuringPresentation = false
searchController.dimsBackgroundDuringPresentation = false
searchController.searchBar.placeholder = "Procure pelo nome"
searchController.searchBar.delegate = self
searchController.searchResultsUpdater = self
searchController.searchBar.sizeToFit()
tableView.tableHeaderView = searchController.searchBar
Thanks.
It doesn't look like you have any necessary constraints for the search bar. If you are configuring it through the storyboard then make sure you have all constraints or check out apple's documentation regarding constraints. Also, if you say the problem only occurs on the iPad, make sure that at the bottom of the storyboard "Any Any" is selected.