UISearchBar custom corners

Question

I'm trying to create a search bar like this:

But I'm noticing that I'm probably going to have to replace the search bar with my own image because the search bar corners comes out wrong when I set:

self.searchController.searchBar.layer.cornerRadius = 50 // I've tried other numbers besides this too with no luck
self.searchController.searchBar.clipsToBounds = true

If I set this:

self.searchController.searchBar.layer.cornerRadius = self.searchController.searchBar.bounds.height/2

The search bar comes out like this:

Which still isn't exact like in the image.

Is there a way to replace the left and right side of the textfield with an image that way I can use the rounded corners from my custom search bar?

Hylomorphism

Answer 1

The issue here is you are setting the corner radius on the UISearchBar, not the UITextField inside it. You can do some sort of hack to get the UITextField, but that's not really recommended.

As you mentioned in your question, you'll need to use custom images and the methods shown here: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISearchBar_Class/#//apple_ref/doc/uid/TP40007529-CH3-SW40

Airline

Answer 2

You should change the radius of searchTextField inside UISearchBar .

you can do that like this :

searchBar.searchTextField.layer.cornerRadius = 20
searchBar.searchTextField.layer.masksToBounds = true

* searchBar is an outlet of UISearchBar from storyBoard

Ula

Answer 3

I am using this code with UISearchBar but you can use this code with UISearchController.

    let searchBar = UISearchBar()
                searchBar.sizeToFit()
                searchBar.placeholder = "Search"
                navigationItem.titleView = searchBar
                
                if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
                    textfield.textColor = UIColor.blue
                    if let backgroundview = textfield.subviews.first {
                        // Background color
                        backgroundview.backgroundColor = UIColor.white
                        // Rounded corner
                        backgroundview.layer.cornerRadius = 14;
                        backgroundview.clipsToBounds = true;
                    }
                }

Rockafellow

In newer versions of iOS you can use textField = searchBar.searchTextField, rather than using the undocumented interface (value for key) to get it. – Tombolo

Answer 4

This IS working for me in swift 3 iOS 10:

    searchController.searchBar.layer.cornerRadius = 20
    searchController.searchBar.clipsToBounds = true

Tartrazine

working what? 1)"searchBar" is the rect around the text field, not the text field by itself; 2)you set cornerRadius = 20 - where are these corners on your picture? – Grice

This is not expected corner radius what he is looking for – Cachexia

Answer 5

ez way for searchbarview

for subview & POPUPs [Swift 5]

override func layoutSublayers(of layer: CALayer) {
    searchBarPopup.clipsToBounds = true
    searchBarPopup.layer.cornerRadius = 10
    searchBarPopup.layer.maskedCorners = [ .layerMaxXMinYCorner, .layerMinXMinYCorner]
}

Visser

Answer 6

If anyone can't get this working on some of the devices, make sure you don't set font to search bar. Custom fonts affect radius for some reason. For me, iPhone 13 Pro Max had no problem, while iPhone 13 Pro had weird rectangular radius instead.

Leban

wow - this worked for me to. Even using a UIFont.systemFont() prevented the corner radius having an effect. – Testudo