CODEWITHSUNDEEP
iosswiftuisearchbarsearchbaruisearchbartextfield
Tambanco
Tambanco

Reputation: 1

Can't hide the top and bottom lines in custom searchBar

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)
        }
    }
}

Upvotes: 0

Views: 71

Answers (2)

snksnk
snksnk

Reputation: 1595

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()

Upvotes: 0

mimo
mimo

Reputation: 272

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.

Upvotes: 0

Related Questions