A quick question, for what should've been an easy implementation.

Im trying to implement a UISearchcontroller and the UIsearchbar property when trying to customize it and set constraints behaves properly appears perfect but the minute i click on the search bar it resets its constraints to nil(guessing based on visual debugger).

Before clicking

and here is the second image which shows what happens when clicked

After clicking

Ive been trying to do this for a day now.

Context: My Main VC is a collection view and another button.

below is the search view specific code, I tried isolating the issue in a playground file and noticed issue starts when i add constraints to it.

 var searchController:UISearchController!

 private func setupSearchView(){
    
    let viewController = UISearchController(searchResultsController: nil)
    viewController.delegate = self
    let bar = viewController.searchBar
    bar.delegate = self
    bar.searchBarStyle = .minimal
    bar.translatesAutoresizingMaskIntoConstraints=false
    bar.searchTextField.layer.cornerRadius = 20
    bar.searchTextField.textColor = .darkGray
    bar.searchTextField.backgroundColor = .white
    bar.showsCancelButton = false
    bar.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).cgColor
    bar.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
    bar.layer.shadowOpacity = 1.0
    bar.layer.shadowRadius = 0.0
    bar.layer.masksToBounds = false
    guard let customFont = UIFont(name: "Poppins-SemiBold", size: 14.0) else {
        fatalError("""
           Failed to load the "CustomFont-Light" font.
           Make sure the font file is included in the project and the font name is spelled correctly.
           """
        )}
    bar.searchTextField.font=customFont
    self.searchController = viewController
    self.view.addSubview(bar)
    bar.isHidden = true
    
  }

func setupContstraints() {
    //NSLayoutConstrainst
    let searchBar:UISearchBar=searchController!.searchBar
    NSLayoutConstraint.activate([
        searchButton!.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30),
        searchButton!.topAnchor.constraint(equalTo: view.topAnchor, constant: 30),
        searchButton!.widthAnchor.constraint(equalToConstant: 50),
        searchButton!.heightAnchor.constraint(equalToConstant: 50),
        //search bar
         searchBar.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
        searchBar.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 30),

        searchBar.widthAnchor.constraint(equalToConstant: 170.0),
        searchBar.heightAnchor.constraint(equalToConstant: 50.0)]

       )

Update: When i gave the search bar fixed width and height(not ideal for different device size) it now appears with the width and height but doesn't obey the top anchor constraint.

See current image

also updated the snippet with current constraints

CodePudding user response：

Give a fixed width and height value for your "SearchBar" object. It will probably be fixed.

It may take up as much width as the cursor when clicked.

Comment out or delete the 2 lines below while giving a fixed height and width for the searchBar.

searchBar.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 50),
searchBar.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -100)

CodePudding user response：

Rid of the UISearchController and use a UISearchBar instead.

let searchBar = UISearchBar()
let clearButton = UIButton()

override func viewDidLoad() {
    super.viewDidLoad()
        
    view.backgroundColor = .gray
    setupSearchView()
}

private func setupSearchView(){
        
    searchBar.searchBarStyle = .minimal
    searchBar.translatesAutoresizingMaskIntoConstraints=false
    searchBar.searchTextField.layer.cornerRadius = 20
    searchBar.searchTextField.textColor = .darkGray
    searchBar.searchTextField.backgroundColor = .white
    searchBar.showsCancelButton = false
    searchBar.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).cgColor
    searchBar.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
    searchBar.layer.shadowOpacity = 1.0
    searchBar.layer.shadowRadius = 0.0
    searchBar.layer.masksToBounds = false
//        guard let customFont = UIFont(name: "Poppins-SemiBold", size: 14.0) else {
//            fatalError("""
//               Failed to load the "CustomFont-Light" font.
//               Make sure the font file is included in the project and the font name is spelled correctly.
//               """
//            )}
//        bar.searchTextField.font=customFont
        
   // set your search clear button
   clearButton.setImage(UIImage(systemName: "multiply.circle.fill"), for: .normal)
   clearButton.tintColor = .red
        
   let searchStack = UIStackView(arrangedSubviews: [searchBar, clearButton])
   searchStack.axis = .horizontal
   searchStack.distribution = .fill
   searchStack.alignment = .fill
   searchStack.spacing = 16
   searchStack.translatesAutoresizingMaskIntoConstraints = false
        
   self.view.addSubview(searchStack)
//        bar.isHidden = true
        
    NSLayoutConstraint.activate([
            clearButton.heightAnchor.constraint(equalTo: clearButton.widthAnchor),
            searchStack.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 30),
            searchStack.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 30),
            searchStack.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -30),
            searchStack.heightAnchor.constraint(equalToConstant: 50)
        ])
        
   }