Change the normal search bar to below image like search bar

Question

Here I Just placed one search bar controller which default design in Xcode. Can any will help me to make search bar likes the second one?

Default

Expected output/UI Design

Here I have attached my own UITextField design it's may help you to solve this problem: Github

Answer 1

I have tried your question by adding UISearchBar to UINavigationBar.

Customising :

@IBOutlet weak var BGView: UIView! //CONSTRAINTS top, left and right = 0, height = 64
@IBOutlet var topSearchBarr: UISearchBar!

override func viewWillAppear(_ animated: Bool) {

    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.isTranslucent = true
    self.navigationController?.view.backgroundColor = .clear


    let gradient: CAGradientLayer = CAGradientLayer()
    //Set the two colors of your gradient
    gradient.colors = [UIColor.purple.cgColor, UIColor.red.cgColor]
    //Set it's location
    gradient.locations = [0.0 , 1.0]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradient.frame = CGRect(x: 0.0, y: 0.0, width:   self.view.frame.size.width, height: 64)

    BGView.layer.insertSublayer(gradient, at: 0)
    getSearchBarSubViews()
}

func getSearchBarSubViews()
{
    let navSubVws = self.navigationController?.navigationBar.subviews

    for subVws in navSubVws!
    {
        if (String(describing: subVws).range(of:"UINavigationBarContentView") != nil)
        {
            let barContentSubVws = subVws.subviews

            for subVws in barContentSubVws
            {
                if (String(describing: subVws).range(of:"UISearchBar") != nil)
                {
                    let searchbarVws = subVws.subviews

                    for subVws in searchbarVws
                    {
                        if (String(describing: subVws).range(of:"UIView") != nil)
                        {
                            let searchbarTopSubVws = subVws.subviews

                            for subVws in searchbarTopSubVws
                            {
                                if (String(describing: subVws).range(of:"UISearchBarTextField") != nil)
                                {
                                    let searchBarVw = subVws as! UITextField
                                    let searchbarTxtFldSubVws = subVws.subviews

                                    (subVws as! UITextField).backgroundColor = UIColor(red: 255/255, green: 0/255, blue: 0/255, alpha: 1.0)
                                    (subVws as! UITextField).tintColor = UIColor.white
                                    (subVws as! UITextField).textColor = UIColor.white
                                    (subVws as! UITextField).clearButtonMode = .never


                                    for subVws in searchbarTxtFldSubVws
                                    {
                                        if (String(describing: subVws).range(of:"UISearchBarTextFieldLabel") != nil)
                                        {
                                            (subVws as! UILabel).textColor = UIColor.white
                                        }

                                        if (String(describing: subVws).range(of:"UIImageView") != nil)
                                        {
                                            var searchIconImgVw = (subVws as! UIImageView)

                                            searchIconImgVw.image = searchIconImgVw.image!.withRenderingMode(.alwaysTemplate)
                                            searchIconImgVw.tintColor = UIColor.white

                                            searchBarVw.leftViewMode = .never
                                            searchBarVw.rightView = searchIconImgVw
                                            searchBarVw.rightViewMode = .always

                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }


        }
    }

}

Storyboard

Output 1

Output 2

Answer 2

Drag and drop a textfield on your view controller.

Create border beneath the textfield. Here is an example code for border

let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.white.cgColor
border.frame = CGRect(x: 0, y: textField.frame.size.height - width, 
width:  textField.frame.size.width, height: 
textField.frame.size.height)
border.borderWidth = width
textField.layer.addSublayer(border)
textField.layer.masksToBounds = true

Create right view on textfield and search icon image. Suppose the name of your textfield is txtSearch

txtSearch.rightViewMode = UITextFieldViewMode.always
//Textfields has right and left view. While are by default off. 
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20)) // Define size of the imageView you want.
imageView.contentMode = .scaleAspectFit
imageView.image = UIImageView(named: "SearchIcon")
imageView.tintColor = UIColor.white 
txtSearch.rightViewMode = imageView // Put your imageView in rightViewMode.