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 Search Bar:
Create the reusable view custom class
Set the reusable view custom class
Create the search bar outlet
Trick: Connect the search bar delegate to COLLECTION VIEW class, the search bar outlet goes to the CUSTOM REUSABLE 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()
}
}