In every WWDC edition, Apple releases a significant number of improvements and requirements to modernize the user interface to allow building better applications. WWDC 2019 was no exception.
Besides SwiftUI, the show stealer, Apple introduced quite a few new features in the search bar. Before we delve into them, let’s take a quick look at the search bar of the
A search bar largely consists of three components:
A text field.
A cancel button.
Setting up a simple
UISearchBarController is quick and easy as shown below:
|let search = UISearchController(searchResultsController: nil)|
|search.obscuresBackgroundDuringPresentation = false|
|search.searchBar.placeholder = "Type something here..."|
|search.searchBar.scopeButtonTitles = ["Title", "Genre", "Rating", "Actor"]|
|navigationItem.searchController = search|
On tapping the search bar, the cancel button and the scoped bars are displayed near the
UISearchTextField, as shown below:
iOS 13 allows us to customize our
UISearchBarController in quite a few ways by introducing and exposing some new goodies for us. Let’s walk through each of them.
Exposing Search Text Field Property
Until iOS 12, the
searchTextField property couldn’t be accessed, hence no customizations were possible. With the advent of iOS 13, Apple decided to expose the
SearchTextField property in its API:
let textField = search.searchBar.searchTextField
It’s now possible to customize the background color, fonts, and almost anything on a
searchTextField to suit our needs.
|textField.textColor = .white|
|textField.backgroundColor = .systemPink|
|textField.font = UIFont.boldSystemFont(ofSize: 14)|
Accessing Properties of UISearchController
Until iOS 12,
UISearchController shows the cancel button and scoped bars (if defined) always when the
SearchTextField is active.
Starting with iOS 13, we can opt-out of automatically displaying these UI components on our search bar by invoking the following lines of code:
|search.automaticallyShowsCancelButton = false|
|search.automaticallyShowsScopeBar = false|
|search.showsSearchResultsController = true|
Also, iOS 13 allows us to show the search results controller as soon as the search bar is activated.
This is currently available in the Mail app in iOS 13 and above devices. Furthermore, developers can leverage this to customize search filters, thereby making it visually appealing to the users.
Search Tokens is the new class introduced in iOS 13. It is a subclass of the
NSObject and allows representing a query in a rich way with text and icons.
The upgraded Photos app in iOS 13 uses this new Search Token API.
While search tokens support copy-paste and drag and drop, they always precede the text entered into the text field.
The following code shows how to create a search token with additional customizations as well.
|let iosToken = UISearchToken(icon: UIImage(systemName: "tag"), text: "iOS")|
|let shopToken = UISearchToken(icon: UIImage(systemName: "cart.fill"), text: "Shop")|
|search.searchBar.searchTextField.insertToken(iosToken, at: 0)|
|search.searchBar.searchTextField.insertToken(shopToken, at: 1)|
|search.searchBar.searchTextField.tokenBackgroundColor = .systemYellow|
Additionally, we can choose to disable the copying and deletion of search tokens. The following properties need to be invoked to do that:
|searchBar.searchTextField.allowsCopyingTokens = false|
|searchBar.searchTextField.allowsDeletingTokens = false|
|searchBar.searchTextField.clearButtonMode = .never|
allowsDeletingTokens has no effect if the clear button is present in the
UISearchBarController, Apple introduced quite a few enhancements to modernize the UI for iOS 13 and above. With changes in the default view controller presentation, Apple aims to promote the use of modal sheets in iOS applications.
Amongst the important UI announcements this year, Apple requires all applications submitted after April 2020 with the iOS 13 SDK to have a launch storyboard specified. Submitting applications only with launch images will no longer be possible.
This is something that’s already been done in popular social networking apps like WhatsApp and Instagram. (Did you notice the new launch screen with logo in those applications?)
That’s a wrap for this one. I hope you enjoyed reading.