CODEWITHSUNDEEP
swiftuisearchbar
Ios developer
Ios developer

Reputation: 105

Search bar with corner radius in swift

Example Image

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)

        }
    }
}
 }*

Upvotes: 3

Views: 2910

Answers (1)

unixb0y
unixb0y

Reputation: 1048

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.

Upvotes: 2

Related Questions