Search bar with corner radius in swift

Question

I want to create a view like the above image.it has a search bar with corner radius.but when i am trying to create, i am unable to make the search bar with corner radius.also i am unable to make the text field of the search bar with corner radius. i have writtenall my code in viewDidAppear method. It is ok or i have to write it in viewWillLayourSubview. so that i will be able to make the exact same search bar like this image. also i want the seach icon to be placed slightly right.

My code is:

override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(true)

for subView in searchBar.subviews  {


    for subsubView in subView.subviews  {
        if let textField = subsubView as? UITextField {
            var bounds: CGRect
            var placeHolder = NSMutableAttributedString()
            let Name  = "Search"
            placeHolder = NSMutableAttributedString(string:Name, attributes: [NSAttributedString.Key.font:UIFont(name: "Helvetica", size: 15.0)!])


            placeHolder.addAttribute(NSAttributedString.Key.foregroundColor, value: UIColor.gray, range:NSRange(location:0,length:Name.count))

            textField.attributedPlaceholder = placeHolder

            if let leftView = textField.leftView as? UIImageView {
                leftView.image = leftView.image?.withRenderingMode(.alwaysTemplate)

                leftView.frame.size.width = 15.0
                leftView.frame.size.height = 15.0
                leftView.tintColor = UIColor.gray

            }
            textField.layer.cornerRadius = 50.0

            bounds = textField.frame
            bounds.size.width = searchBar.frame.width
            bounds.size.height = searchBar.frame.height
            textField.bounds = bounds
            textField.borderStyle = UITextField.BorderStyle.roundedRect

            searchBar.backgroundImage = UIImage()
            textField.backgroundColor =  UIColor.lightGray.withAlphaComponent(0.2)
            searchBar.searchTextPositionAdjustment = UIOffset(horizontal: 5, vertical: 0)

        }
    }
}
 }*

You can follow this [answer](https://stackoverflow.com/a/53799711/2395636) and just increase the `cornerRadius` value from `10` to whatever fits your design. — Kamran, Sep 15 '19 at 04:31

score 1 · Answer 1 · answered Sep 14 '19 at 20:58

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(true)

    for subView in searchBar.subviews  {
        if !subView.subviews.contains(where: { $0 as? UITextField != nil }) { continue }
        guard let textField = subView.subviews.first(where: { $0 as? UITextField != nil }) as? UITextField else { return }

        let placeholder = NSMutableAttributedString(
            string: "Search",
            attributes: [.font: UIFont(name: "Helvetica", size: 15.0)!,
                         .foregroundColor: UIColor.gray
                         ])
        textField.attributedPlaceholder = placeholder
        textField.borderStyle = UITextField.BorderStyle.roundedRect

        textField.layer.cornerRadius = textField.frame.size.height / 2
        textField.layer.masksToBounds = true
        textField.textColor = .white
        textField.backgroundColor = .lightGray
    }

    searchBar.barTintColor = .white
    searchBar.backgroundColor = .white
    searchBar.searchTextPositionAdjustment = UIOffset(horizontal: 5, vertical: 0)
}

Doesn't look exactly like in the image that you linked, but actually fits better into the Apple design and works better than the code that you wrote.

For anything more sophisticated, I would advise to create a custom UISearchBar subclass.

Be aware of Apple's Human Interface Guidelines, so anything too crazy / different from default might not be accepted in the AppStore.

Thanks for your response. Can i increase the height of the text field ? So that it will look same as the image. or can i make the search bar rounded corner, so that i will make the text field color clear color. so that the image will be the same — Ios developer, Sep 15 '19 at 06:56
Yes sure but I already explained that for more customisation I would recommend to create a subclass, makes everything much cleaner and removes all of the styling and layout from your ViewController. — unixb0y, Sep 15 '19 at 08:37
ok.i will try to create subclass. Once again thanks for your time. — Ios developer, Sep 15 '19 at 08:42
Good luck, you’re welcome! This could help: https://www.appcoda.com/custom-search-bar-tutorial/ — unixb0y, Sep 15 '19 at 08:45

Search bar with corner radius in swift

1 Answers1