The UI search bar disappears when clicked( possibly NSLayoutConstraint issue)

Question

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

So where do you want your search bar to be exactly then? Can you describe it in words? — Sweeper
– Sweeper, Commented Aug 17, 2022 at 7:18
yes my bad, i tried to make a few changes to check whether it works, i got rid of the centreX constraints but its still the same. — Ashutosh Mane
– Ashutosh Mane, Commented Aug 17, 2022 at 7:44

iOSDeveloper · Accepted Answer · 2022-08-17 07:13:28Z

0

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)

edited Aug 17, 2022 at 7:13

answered Aug 17, 2022 at 7:09

iOSDeveloper

5551 gold badge4 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ashutosh Mane Over a year ago

I updated it, now the uisearch bar is visible but doesn't obey the top anchor constraint.

iOSDeveloper Over a year ago

Convert the "SearchBar" and "SearchButton" objects into a UIStackView structure. Use horizontal alignment. Then position this StackView you created.

Ashutosh Mane Over a year ago

Okay, i was thinking of the same but was wondering why does it reset the top Anchor constraint. Wondering what i'm doing wrong

iOSDeveloper Over a year ago

After fixing the width and height it probably overlaps the "SearchButton" so it might be floating. Or it can be this way because "SearchBar.trailingAnchor" and "SearchButton.leadingAnchor" are not assigned. As I said, the most logical and effective solution here is the "UIStackView" structure.

Ashutosh Mane Over a year ago

I cant use the stack view, because i want to hide and animate the search bar by clicking on the search button, and when i toggle isHidden for the UIsearchbar the stack view resets layout

Sreekuttan · Accepted Answer · 2022-08-17 08:37:01Z

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

but getting rid of the Searchcontroller and using the UISearchbar would mean that i cant use the searchresultscontroller, search suggestions in the future implementations.

Collectives™ on Stack Overflow

The UI search bar disappears when clicked( possibly NSLayoutConstraint issue)

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related