What’s New in the iOS 13 Search Bar?

Enhancements in the UISearchBarController and UIKit

Photo by João Silas on Unsplash

This article was originally posted on my Substack, iOSDevie.

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 UISearchBarController.

A search bar largely consists of three components:

• A text field.
• A cancel button.
• Scoped bars.

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:

A random screengrab from my application.

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

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

Note: Disabling allowsDeletingTokens has no effect if the clear button is present in the UISearchTextField.

There’s More

Besides 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.