代码之家 › 专栏 › 技术社区 › Pranavan SP

将普通搜索栏更改为类似图像的搜索栏下方

ibdesignable uisearchbar swift3 swift ios

Pranavan SP · 技术社区 · 7 年前

在这里,我只放置了一个搜索栏控制器,它是Xcode中的默认设计。有什么能帮我把搜索栏变成第二个吗?

违约

预期输出/UI设计

在此,我附上了我自己的UITextField设计,它可能会帮助您解决此问题: Github

2 回复 | 直到 7 年前

McDonal_11 7 年前

我试着通过添加 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

Hamza Khan 7 年前

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

在文本字段下创建边框。下面是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.