Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 600
danqing Avatar asked Oct 13 '19 09:10

danqing


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
}
like image 125
Travis C. Avatar answered Nov 16 '22 17:11

Travis C.