IOS: Scrollable search bar similar to Mail or Messages apps

Question

New iOS developer here! I love the design of scrolling up to a hidden search bar. I want to duplicate it but a lot of the solutions seem outdated, so i am really confused.

iPhone: Hide UITableView search bar by default

Going off of this, it seems like there's 2 steps.

1. Add search bar to the scrollable table view

2. Add code so it scrolls to the second row on app load (in viewdidload?) using

   yourTableView.scrollToRowAtIndexPath(NSIndexPath(forRow: 0, inSection: 0), atScrollPosition: UITableViewScrollPosition.Top, animated: false)

I can't get passed #1. I tried putting in a search bar in 3 spots...

• A) If I put it here (on top of the header?) it sticks at the top as expected, but not scrollable.
• B) If I put it here, it's still not scrollable and it blocks the first row
• C) If I put it here, it repeats on the row, as expected.

Somehow I need to put it on the table without duplicating, so I'm confused on that.

Answer 1

So I think you have to do this in code. If you want to do it, I followed the tutorial here and it worked.

http://www.ioscreator.com/tutorials/add-search-table-view-tutorial-ios8-swift

Add UISearchResultsUpdating

class TableViewController: UITableViewController, UISearchResultsUpdating {

Add these properties...

let tableData = ["One","Two","Three","Twenty-One", "vasdf", "vasdfd", "3343", "ad23", "454d", "vasdf32", "va343", "vasdf3r2", "vasdfd2", "vasr52f", "awefwr32vwf"]
var filteredTableData = [String]()
var resultSearchController = UISearchController()

Add self.resultSearchController here...

override func viewDidLoad() {
    super.viewDidLoad()

    self.resultSearchController = ({
        let controller = UISearchController(searchResultsController: nil)
        controller.searchResultsUpdater = self
        controller.dimsBackgroundDuringPresentation = false
        controller.searchBar.sizeToFit()

        self.tableView.tableHeaderView = controller.searchBar

        return controller
    })()

    // Reload the table
    self.tableView.reloadData()
}

Take care of self.resultSearchController.active conditions in these functions...

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // 2
    if (self.resultSearchController.active) {
        return self.filteredTableData.count
    }
    else {
        return self.tableData.count
    }
}


override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) 

    // 3
    if (self.resultSearchController.active) {
        cell.textLabel?.text = filteredTableData[indexPath.row]

        return cell
    }
    else {
        cell.textLabel?.text = tableData[indexPath.row]

        return cell
    }
}

Then do the search code here

func updateSearchResultsForSearchController(searchController: UISearchController)
{
    filteredTableData.removeAll(keepCapacity: false)

    let searchPredicate = NSPredicate(format: "SELF CONTAINS[c] %@", searchController.searchBar.text as String!)
    let array = (tableData as NSArray).filteredArrayUsingPredicate(searchPredicate)
    filteredTableData = array as! [String]

    self.tableView.reloadData()
}

And I think that's it. Good luck!