Search bar as header in tableview - appear and disappear

Question

I need to put a search bar at the top of my tableview. I am making a network call and when the results are greater than 100 I want to search bar to appear and when they are less than 100 I don't want to search bar to appear. The tableview is on the right side of the VC and does not take up the whole view controller. I want the search bar to be at the top of the table view as a header.

I cannot use a search controller because in iOS 11, using a search controller makes the search bar pop to the top of the VC when it is active.

I tried to set the tableviewheader to nil to get it to disappear. But I can't get it back obviously because I made the header nil.

self.rightDetailFilterTableView.tableHeaderView = nil
self.rightDetailFilterTableView.sectionHeaderHeight = 0

I have put the search bar into the storyboard as seen in the image below. Is this the right way to add the search bar as a header?

What is the best way to get it to appear and disappear in the tableview? I have tried a bunch of different methods. They all either leave a blank header or do something else that causes problems. I also tried using the header delegate methods but that still did not work.

I am not using a tableview controller, I am using a normal VC. I am also not using a search bar controller because of issues it causes in iOS 11.

Possible duplicate of [Hide UITableView search bar](https://stackoverflow.com/questions/9798901/hide-uitableview-search-bar) — ekscrypto, Sep 27 '17 at 10:49

score 1 · Accepted Answer · answered Sep 27 '17 at 03:10

Here's what I've done in one of my recent project. First, laid out my views like so:

That is, the Search Bar was added to the parent view rather than the table view. This allows me to hide/show it as needed.

Next, I've defined two optional layout constraint, one ensuring that the tableview is aligned to the top of the safe area, priority 750; the other aligning the top of the search bar to the top of the safe area; priority lower than 750 to hide it below the nav bar or priority higher than 750 to reveal it and push the table view down.

In code, I created a @IBOutlet to the layout constraint for the search bar to the top of the safe area, and I change its priority as needed:

@IBAction
func toggleSearchBar(_ sender: Any?) {
    if searchBarVisibleLayoutConstraint.priority.rawValue > 750.0 {
        searchBarVisibleLayoutConstraint.priority = UILayoutPriority(rawValue: 1.0)
        searchBar?.endEditing(true)
    } else {
        searchBarVisibleLayoutConstraint.priority = UILayoutPriority(rawValue: 999.0)
    }
    UIView.animate(withDuration: 0.3) {
        self.view.layoutIfNeeded()
    }
}

In my case, the navigation bar is opaque and the search bar is not visible behind it. Your case may be different so you may also want to either clip the parent view or alpha fade the search bar when it is not visible.

Good luck!

I didn't use this method exactly but it was the inspiration (LOL) for my solution. I used a stack view to handle the messy constraint stuff. — Nevin Jethmalani, Sep 27 '17 at 15:08

score 0 · Answer 2 · answered Sep 27 '17 at 03:43

Please check :

Created IBOutlet for my SearchBar.

@IBOutlet weak var testbar: UISearchBar!

And in my viewDidLoad :

override func viewDidLoad() {
    var contentOffset = tableView.contentOffset
    let showSearchBar = (results.count > 100)
    self.tableView.tableHeaderView?.isHidden = !(showSearchBar)
    if showSearchBar {
        contentOffset.y -= testbar.frame.size.height
    } else {
        contentOffset.y += testbar.frame.size.height
    }
    tableView.contentOffset = contentOffset
}

Here is my tableview storyboard

This will hide the search bar but there is still white space when it is hidden. I tried this method and it does not work. By setting the content offset, there will still be white space when the user scrolls up. — Nevin Jethmalani, Sep 27 '17 at 15:07

Search bar as header in tableview - appear and disappear

2 Answers2