将普通搜索栏更改为下图，如搜索栏

Question

这里我只是放置了一个默认设计在Xcode中的搜索栏控制器。任何人都可以帮助我使搜索栏像第二个一样吗？

默认

预期output/UI设计

这里我附上了我自己的UITextField设计，它可能会帮助你解决这个问题：Github

Answer 1

将文本字段拖放到视图控制器上。

在文本框下方创建边框。这是 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

在文本字段和搜索图标图像上创建右视图。假设您的文本字段的名称是 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.

Answer 2

我已经通过将 UISearchBar 添加到 UINavigationBar 来尝试你的问题。

自定义：

@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

                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }


        }
    }

}

故事板

输出 1

输出 2

将普通搜索栏更改为下图，如搜索栏

Change the normal search bar to below image like search bar

uisearchbar

ios

swift

ibdesignable

swift3