CODEWITHSUNDEEP
iosswiftuitextfielduisearchbaruisearchcontroller
Thomas
Thomas

Reputation: 2386

UISearchBar custom corners

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

enter image description here

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

enter image description here

If I set this:

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

The search bar comes out like this:

enter image description here

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?

Upvotes: 19

Views: 20864

Answers (6)

Usman
Usman

Reputation: 467

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;
                    }
                }

Upvotes: 12

Zeynal
Zeynal

Reputation: 132

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.

Upvotes: 1

Hamid Reza Ansari
Hamid Reza Ansari

Reputation: 1147

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

Upvotes: 14

NSMohammad
NSMohammad

Reputation: 131

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]
}

Upvotes: 1

devjme
devjme

Reputation: 720

This IS working for me in swift 3 iOS 10:

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

enter image description here

Upvotes: 1

mbottone
mbottone

Reputation: 1235

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

Upvotes: 6

Related Questions