What’s New With UISearchController and UISearchBar

Hiding the Scope Bar

You still have a few more things to do before you can call this ready for production. The L.I.S.T.E.D. design team has determined that the scope bar shouldn’t be visible when the results controller is showing the token selection UI.

To implement this, go to viewDidLoad() and add this as the last line:

searchController.automaticallyShowsScopeBar = false

Prior to iOS 13, the scope bar would always display automatically. Now, you can control this behavior by using the new automaticallyShowsScopeBar.

Next, find selectedScopeYear() and add the following after it:

func showScopeBar(_ show: Bool) {
  guard searchController.searchBar.showsScopeBar != show else { return }
  searchController.searchBar.setShowsScope(show, animated: true)
  view.setNeedsLayout()
}

Here, you check if the search bar’s showsScopeBar matches show. If it does, you’ll stop because there’s nothing to do.

If it doesn’t match, you use the new setShowsScope(_:animated:) to show or hide the scope bar.

Finally, you must call setNeedsLayout() on the view controller’s view.

You’ll now use this new function to show and hide the scope bar. In UISearchBarDelegate, find searchBar(_:textDidChange:) and add the following as the last lines:

let showScope = !searchText.isEmpty
showScopeBar(showScope)

If the search text is not empty, the scope bar should be shown.

In searchBarCancelButtonClicked(_:), add the following as the last line:

showScopeBar(false)

Now, when the user taps the search bar’s Cancel button, you’ll hide the scope bar.

Finally, in ResultsTableViewDelegate, add the following to the end of didSelect(token:):

showScopeBar(true)

When the user selects a token, you’ll now show the scope bar.

Build and run, then tap the search bar. You’ll no longer see the scope bar.

Tap a token and the scope bar will appear.

Customizing the Search Bar and Text Field

Your final task is to add a theme to the search bar. Before exposing the search text field in iOS 13, customizing the field was fraught with issues. Now, with the text field exposed, you can customize it like any other UITextField.

Changing Text and Background Color

The design team wants the text field to stand out a bit more, so your first task is to change the color of the text.

In viewDidLoad(), add this as the last line:

searchController.searchBar.searchTextField.textColor = .rwGreen()

The project has a UIColor extension. This extension returns a very specific green, used by your favorite tutorial site. Here. you’re setting the search text field’s text color to that gorgeous shade of green.

Next on the list is to change the background color. When the search bar becomes the first responder, it should become a transparent green. When the user cancels the search, it should return to its default color.

To implement this, find updateSearchResults(for:) in the UISearchResultsUpdating extension and replace it with:

func updateSearchResults(for searchController: UISearchController) {
  // 1
  if searchController.searchBar.searchTextField.isFirstResponder {
    searchController.showsSearchResultsController = true
    // 2
    searchController.searchBar
      .searchTextField.backgroundColor = UIColor.rwGreen().withAlphaComponent(0.1)
  } else {
    // 3
    searchController.searchBar.searchTextField.backgroundColor = nil
  }
}

Here, you’re:

1. Showing the results controller if the search text field is the first responder.
2. Changing the search text field’s background color to rwGreen. You use an alpha component to make the color transparent.
3. If the search text field is not the first responder, you set the background color back to its default.

In UISearchDelegate, find searchBarCancelButtonClicked(_:) and add this as the last line:

searchController.searchBar.searchTextField.backgroundColor = nil

If the user cancels the search, you’ll set the text field’s background to the default.

Build and run. Tap the search bar, tap Search by Africa and type “faso”. You’ll see the following:

You’ve now set the search text field’s text and background theme. Things are looking sharp!

But, now the token doesn’t look quite right. There’s always something, isn’t there? Don’t worry, you’ll fix that next.

Changing the Color of Tokens

Tokens have a few theming options. For example, you can set the token’s icon, as you did earlier. You can also change the background color, which is what you’ll do next.

In viewDidLoad(), add this as the last line:

searchController.searchBar.searchTextField.tokenBackgroundColor = .rwGreen()

Here, you’re setting the default background color for tokens to rwGreen.

Build and run. Tap search and tap Search by Oceania and you’ll see this:

Look at all that green! It really helps your fantastic new search functionality stand out.

Where to Go From Here?

You can download the completed project using the Download Materials button at the top or bottom of this article.

Congratulations! You now have the latest UISearchController functionality in your app.

While refactoring the app, you’ve learned how to:

• Control displaying the search results view controller.
• Use search tokens.
• Control the visibility of the scope bar.
• Customize the newly-exposed search text field.
• Customize search tokens.

Whew! That’s a lot. Take a look at these great resources to learn even more about UISearchController:

• UISearchController Tutorial: Getting Started from raywenderlich.com.
• Modernizing Your UI for iOS 13 from WWDC 2019.

Please share any comments or questions about this article in the forum discussion below!