如何自定义 UISearchBar 内 UITextField 的背景颜色和其他属性？

Question

我正在尝试自定义 UISearchBar 内 UITextField 的外观。具体来说，我想更改背景颜色和其他样式属性。我正在使用以下代码进行一些调整

func configureMarkerSearchBar(with placeholder: String) {
backgroundColor = .clear
tintColor = .clear
searchTextField.layer.cornerRadius = CGFloat(SearchBarConstants.searchBarLayerRadius)
searchTextField.layer.masksToBounds = true
sizeToFit()

if let textField = value(forKey: SearchBarConstants.searchFieldKey) as? UITextField {
    let attributedString = NSAttributedString(string: placeholder,
                                              attributes: [NSAttributedString.Key.foregroundColor:
                                                  SearchBarConstants.searchBarTextInputColor])
    textField.attributedPlaceholder = attributedString
    textField.font = UIFont.regularDMSans(of: SearchBarConstants.textFieldFontSize)
    textField.layer.cornerRadius = SearchBarConstants.searchBarCornerRadius
    textField.translatesAutoresizingMaskIntoConstraints = false
    textField.backgroundColor = .clear
    textField.tintColor = .clear
    NSLayoutConstraint.activate([
        textField.heightAnchor.constraint(equalToConstant: CGFloat(46)),
        textField.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 0),
        textField.trailingAnchor.constraint(equalTo: trailingAnchor, constant: 0),
        textField.centerYAnchor.constraint(equalTo: centerYAnchor, constant: 0)
    ])
    searchTextField.clipsToBounds = true
    
    if let searchIcon = UIImage(named: SearchBarConstants.iconSearch) {
        let imageView = UIImageView(image: searchIcon)
        searchIcon.withRenderingMode(.alwaysTemplate)
        searchIcon.withTintColor(SearchBarConstants.searchBarTextInputColor)
        let paddingView = UIView(frame: CGRect(x: 0, y: 0,
                                               width: SearchBarConstants.searchIconOffset + searchIcon.size.width,
                                               height: searchIcon.size.height))
        imageView.frame = CGRect(x: SearchBarConstants.searchIconOffset, y: 0,
                                 width: searchIcon.size.width,
                                 height: searchIcon.size.height)
        paddingView.addSubview(imageView)
        textField.leftView = paddingView
        textField.leftViewMode = .always
    }
}

}

我面临的问题是，每当我尝试访问和修改 UITextField 的背景视图时，它总是默认为 tertiarySystemFillColor 而不是我设置的自定义颜色。

有人遇到过这个问题吗？如何成功更改背景颜色并确保正确应用我的自定义设置？

谢谢！

查看层次结构

有人遇到过这个问题吗？如何成功更改背景颜色并确保正确应用我的自定义设置？

Answer 1

您可以直接通过 UISearchBar 的 searchTextField 属性修改文本字段。

示例 UIViewController 演示文本字段的自定义。

import UIKit

class ViewController: UIViewController {
    
    // MARK: - UISearchController
    lazy var searchBar: UISearchBar = {
        let view = UISearchBar()
        view.placeholder = "Search here..."
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        setupSearchBar()
        customizeSearchBar()
    }
    
    private func setupSearchBar() {
        view.addSubview(searchBar)
        searchBar.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            searchBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            searchBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            searchBar.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
    }
    
    private func customizeSearchBar() {
        searchBar.setImage(UIImage(systemName: "magnifyingglass.circle.fill"), for: .search, state: .normal)
        searchBar.searchTextField.font = .italicSystemFont(ofSize: 15)
        searchBar.searchTextField.borderStyle = .none
        searchBar.searchTextField.backgroundColor = .red
        searchBar.searchTextField.layer.cornerRadius = 24.0
    }
}

结果：