How can I add a search bar above a UICollectionView?

It is not mandatory to have UICollectionView inside UICollectionViewController. UICollectionView is just like UITableView and can be added anywhere. All you need to do is implement UICollectionViewDelegate and UICollectionViewDataSource protocols. You can follow following tutorial Supplementary Header and add search bar as a supplementary header of UICollectionView.


CollectionView + SearchBar with Swift3 + Storyboard implementation.

Creating the Header View:

Creating the Header View

Creating the Search Bar:

Creating the Search Bar

Create the reusable view custom class

Create the reusable view custom class

Set the reusable view custom class

Set the reusable view custom class

Create the search bar outlet

Create the search bar outlet in custom class

Trick: Connect the search bar delegate to COLLECTION VIEW class, the search bar outlet goes to the CUSTOM REUSABLE VIEW CLASS

Connect the search bar delegate to collection view class

Implement the CollectionView header method of protocol

    override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {

         if (kind == UICollectionElementKindSectionHeader) {
             let headerView:UICollectionReusableView =  collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "CollectionViewHeader", for: indexPath)

             return headerView
         }

         return UICollectionReusableView()

    }

Set the Searchbar delegate

    class MyCollectionViewController: (other delegates...), UISearchBarDelegate {

And finally, your the search bar delegate methods will be called in your CollectionView Class

//MARK: - SEARCH

func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
    if(!(searchBar.text?.isEmpty)!){
        //reload your data source if necessary
        self.collectionView?.reloadData()
    }
}

func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
    if(searchText.isEmpty){
        //reload your data source if necessary
        self.collectionView?.reloadData()
    }
}