制作带下划线的自定义 UISearchBar

Question

我需要制作 UISearchBar 无边框。我需要在最后（右上角）插入图片，删除周围的边框并制作下划线。 UISearchBar 应该是图片中的样子。请帮忙。我是 swift 的新手，但我不知道该怎么做。

Answer 1

创建自定义 xib 视图并添加文本字段视图，就像您提供的图片一样。

现在，取出 UITextField 并在自定义视图的 class 文件中添加以下代码。看代码

class CustomSearchBar: UIView {

    //------------------------------------------------------------------------------
    // MARK:- Outlets
    //------------------------------------------------------------------------------

    @IBOutlet weak var txtSearch        : UITextField!


    //------------------------------------------------------------------------------
    // MARK:- Abstract Method
    //------------------------------------------------------------------------------

    class func instantiateView() -> CustomSearchBar {
        let customSearchBar = UINib(nibName: "CustomSearchBar", bundle: .main).instantiate(withOwner: self, options: nil)[0] as! CustomSearchBar

        let uiView = UIView.init(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
        let imageView = UIImageView(frame: CGRect(x: 0, y: 8, width: 24, height: 24))
        imageView.image = #imageLiteral(resourceName: "icon_down_arrow").withRenderingMode(.alwaysTemplate)
        imageView.tintColor = .blue
        uiView.addSubview(imageView)

        // Add right button
        customSearchBar.txtSearch.rightViewMode = .always
        customSearchBar.txtSearch.rightView = uiView

        return customSearchBar
    }
}

现在，在您的 UIViewController 的 viewDidLoad 方法中添加以下代码以编程方式添加自定义搜索栏。

class ViewController: UIViewController {

    override func viewDidLoad() {

        let customSearchBar = CustomSearchBar.instantiateView()
        customSearchBar.translatesAutoresizingMaskIntoConstraints = false
        customSearchBar.txtSearch.delegate = self

        self.view.addSubview(customSearchBar)

        customSearchBar.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 0).isActive = true
        customSearchBar.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: 0).isActive = true
        customSearchBar.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
        customSearchBar.heightAnchor.constraint(equalToConstant: 60).isActive = true
    }
}

extension ViewController: UITextFieldDelegate {

    func textFieldDidEndEditing(_ textField: UITextField) {

    }

    //------------------------------------------------------------------------------

    func textFieldDidEndEditing(_ textField: UITextField, reason: UITextField.DidEndEditingReason) {

    }
}

输出：

希望对您有所帮助。

制作带下划线的自定义 UISearchBar

Make a custom UISearchBar with underlined

swift

uisearchbar