Customize UISearchBar for different iOS versions

Change the overall appearance of UISearchBar from iOS 10 to 14 version and keeping the appearance consistent across this versions

Amazing animation by by Benjamin Vevang

No Direct Apple API

I am sure we all have struggled at some point in customizing small UI tweaks for UISearchBar.

We know that Apple API’s are not flexible to customize the UISearchBar like accessing UITextField , It was in iOS 13 Apple has made this searchTextField API available but it was not easy in previous iOS 10– 12 versions and there are many apps which support this iOS versions.

Changing Placeholder color, Changing Background color or change UITextField rightView the list is very long.

I have wasted so many hours every time to tweak different parts of UISearchBar so thought of listing them to one place and sharing it to our iOS community.

Here is the list of tweak we will implement today

• Accessing UITextField reference w.r.t to all iOS versions
• Adding Left Padding from Search Icon
• Changing UITextField Left View (Search Icon)
• Changing Placeholder Color
• Showing Loader in UISearchBar
• Changing UITextField Right View(Bookmark Icon) in UISearchBar
• Consistent UISearchBar UI

Photo by Markus Winkler on Unsplash

Let’s start with UITextField

We know that Apple has made not easy for us to access the UITextField reference on different OS. So here is the code to help u guys for safe access of UITextField across all iOS versions.

Code snippet for accessing textfield and changing it’s properties

This will help us to customize the font, Background color, Search icon of UITextField and many more, Below is example snippet

searchBar.textField?.textColor = UIColor.gray
searchBar.textField?.font = // Your font

Left Padding in UISearchBar

Code snippet for adding padding and changing left icon

Now with one line of code we can customize left icon of UISearchBar and also add padding to it.

searchBar.setLeftImage(UIImage(named: "dark mode")!, with: 20)

Output: Left without padding and Right with padding

Change Placeholder Color

Note: This will not work if you call in viewDidLoad , call it in viewDidAppear

Code snippet for changing UISearchBar placeholder color

Now with just single line of code you can change UISearchBar placeholder color. Note: This call doesn’t work in viewDidLoad call this above method in viewDidAppear

searchBar.changePlaceholderColor(UIColor.orange)

Output: Placeholder color change

UIActivityIndicatorView in UISearchBar

Code snippet for adding loader in UISearchBar

searchBar.isLoading = true // show loader 
searchBar.isLoading = false // hide loader

Output: Loader in Search icon

UISearchBar(UITextField) Right View Image

Code snippet for adding right icon in UISearchBar

Now with just single line of code you can change UISearchBar right view icon. Note: This call doesn’t work in viewDidLoad call this above method in viewDidAppear

Output: Filter Icon in UISearchbar in right

To invoke your method on click of Right View of UISearchBar override below method of UISearchBarDelegate

// Set Custom Right View
searchBar.setRightImage(normalImage: UIImage(named: “filter”)!,
                        highLightedImage: UIImage(named: “filter_selected”)!)
// Override method
func searchBarBookmarkButtonClicked(_ searchBar: UISearchBar) {
    // Filter Action
    tappedFilter()
}

UISearchBar UI Consistency

Actually I debugged UISearchBar so much because I need custom UI for Dark mode and Light mode. So this is final piece which helped me to accomplish the result, Basically keep the UISearchBar consistent across all iOS versions for any mode.

Code snippet for customizing UISearchBar in Dark mode

Output: Dark Mode UISearchBar

Code snippet for customizing UISearchBar in Light mode

Output: Light Mode UISearchBar

Here is the code of UISeachBar extension to customize it according to your requirement. I know this extension still has scope of improvements this is just for reference, I am sure you may have to customise it for your project needs.

Thank you for reading

I hope this article helps you in customizing different UI properties of UISearchBar. Do share your valuable feedback.

Credits

• StackOverflow Community