skip to Main Content

image link: https://github.com/Tambanco/issueSearchBar/blob/main/issue_Lines.jpg

I´ve tried to change background color inside class SearchBarView: UIView {}:

searchBar.searchTextField.backgroundColor = .clear
searchBar.backgroundColor = .clear

and tryed something like that inside MainViewController:

searchBar.searchTextField.backgroundColor = .clear
searchBar.backgroundColor = .clear
searchBar.layer.backgroundColor = UIColor.clear.cgColor

but, unfortunately I still see this lines inside my custom searchBar.
How can I get rid of these lines?

My SearchBarView class:

class SearchBarView: UIView {
    lazy var searchBar = createSearchBar()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        addSubview(searchBar)
        
        searchBar.snp.makeConstraints { make in
            make.leading.equalTo(32)
            make.centerY.equalToSuperview()
            make.height.equalTo(34)
            make.width.equalTo(300)
        }
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

fileprivate extension SearchBarView {
    private func createSearchBar() -> UISearchBar {
        let searchBar = UISearchBar()
        searchBar.placeholder = "   Search"
        searchBar.searchTextField.font = UIFont(name: "MarkPro", size: 15)
        searchBar.searchTextField.backgroundColor = .clear
        let textFieldInsideSearchBar = searchBar.value(forKey: "searchField") as? UITextField
        let imageV = textFieldInsideSearchBar?.leftView as! UIImageView
        imageV.image = imageV.image?.withRenderingMode(UIImage.RenderingMode.alwaysTemplate)
        imageV.tintColor = UIColor(hexString: "FF6E4E")
        return searchBar
    }
}

My MainViewController class:

class MainViewController: UIViewController {
    private var searchBarView: SearchBarView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupSearchBarView()
    }
    private func setupSearchBarView() {
        searchBarView = SearchBarView(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
        view.addSubview(searchBarView)
        
        searchBarView.searchBar.clipsToBounds = true
        searchBarView.searchBar.layer.cornerRadius = 17
        searchBarView.searchBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMaxYCorner]
        searchBarView.searchBar.searchTextField.clipsToBounds = true
        let directionalMargins = NSDirectionalEdgeInsets(top: 0, leading: 24, bottom: 0, trailing: 0)
        searchBarView.searchBar.directionalLayoutMargins = directionalMargins
        
        searchBarView.snp.makeConstraints { make in
            make.leading.equalToSuperview()
            make.top.equalTo(categoriesView.snp.bottom)
            make.trailing.equalToSuperview()
            make.height.equalTo(60)
        }
    }
}

2

Answers


  1. If you want to make the top and bottom border lines on the textfield disappear (the dark gray ones), you will want to tweak the text field’s border properties rather than the background colors. Try something like this:

    searchBar.searchTextField.layer.borderWidth = 0
    

    or

    searchBar.searchTextField.layer.borderColor = UIColor.clear.cgColor
    

    and adapt it to fit how you’ve set up the relevant subviews in your custom search bar.

    Login or Signup to reply.
  2. Set the searchBar background image to empty. This eliminates all background issues you may have such as unwanted lines. For more info reference Apple docs: https://developer.apple.com/documentation/uikit/uisearchbar/1624276-backgroundimage

    searchBar.backgroundImage = UIImage()
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search