Transparent UISearchBar in iOS 13 or newer
Need a couple of tips on UISearchBar in iOS 13+ mobile apps? Here they are!
The latest versions of iOS (i.e. iOS 13 or higher) changed the
UISearchBar a little bit. If you want to add a transparent background or any other customization of the search bar in your iOS mobile app, I thought a simple tutorial like this would be useful.
Objects changed in iOS 13
Many well-known objects have been changed in iOS 13. Not always for good in my opinion, but this is another story. Examples? Take
UISearchBar has been modified in a similar way.
Previously, in the older iOS versions, to change the search bar's background color, we only needed to call this method:
let searchBar = UISearchBar()
searchBar.backgroundColor = .clear
The iOS 13 premiere made things less obvious. For changing the background in the
UISearchBar you do not only need to set the
.backgroundColor method, but also add some trick.
UISearchBar transparency in iOS 13
First of all, let’s create an empty UIImage:
let image = UIImage()
Then we need to assign it to our Search Bar:
searchBar.backgroundImage = image
After this, we can set the .backgroundColor method and
.barTintColor. Both with clear
Background color in the search bar
This solution also sets the background color for the text field inside the search bar:
searchBar.searchTextField.backgroundColor = .gray
Setting clear background color for
UISearchBar is useful when we want to customize this object, e.g. by adding corner radius or integrating it with the whole view.
Now, that's it! If you found this one helpful or have another way of dealing with transparency and colors of
UISearchBar, let me know in the comments section!