How to create a search bar with mic icon in iOS 13?

user_1161812 0
Viewed 1843

In iOS 13, search bars in all Apple apps have a mic icon on the right that allows for voice input. However, when I create a system search bar (or UISearchController), I don't get the mic icon. I've searched on Google and SO and couldn't find the answer - is it something we can adopt, and if so how?

ios13 uisearchbar accessibility ios
1 Answers

One important note is that currently there is not a way to programmatically put the user into "Dictation mode". This means to implement this, your must use the Speech framework in order to get "speech-to-text" working from a button press.

You can accomplish the visual styling by updating the image for the search bar's bookmark icon and setting showsBookmarkButton on the search bar to true.

Here is an implementation with a UISearchController:

let searchController = UISearchController(searchResultsController: nil)
let micImage = UIImage(systemName: "mic.fill")
searchController.searchBar.setImage(micImage, for: .bookmark, state: .normal)
searchController.searchBar.showsBookmarkButton = true

You handle the button tap via the search bar's delegate:

searchController.searchBar.delegate = self

func searchBarBookmarkButtonClicked(_ searchBar: UISearchBar) {
    // Do work here
}
user_90634710
Related