アプリのユーザーがUISearchBar
の上にあるUICollectionView
を使用して画像を検索できるようにします。私の理解では、UICollectionView
はUICollectionViewController
に含まれていないと正常に動作しません。ただし、XcodeではUICollectionViewController
に検索バーを配置できません。コレクションビューが適切に機能しないため、汎用のUIViewController
も使用できません。必要な機能をどのように実現できますか?
CollectionView + SearchBarwithSwift3 + Storyboard実装.
ヘッダービューの作成:
検索バーの作成:
再利用可能なビューのカスタムクラスを作成します
再利用可能なビューのカスタムクラスを設定します
検索バーアウトレットを作成します
トリック:検索バーのデリゲートをCOLLECTION VIEWクラスに接続し、検索バーのアウトレットはCUSTOM REUSABLE VIEWクラスに移動します
プロトコルのCollectionViewヘッダーメソッドを実装します
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()
}
検索バーのデリゲートを設定する
class MyCollectionViewController: (other delegates...), UISearchBarDelegate {
そして最後に、検索バーのデリゲートメソッドがCollectionViewクラスで呼び出されます
//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()
}
}
UICollectionView
をUICollectionViewController
の中に入れることは必須ではありません。 UICollectionView
はUITableView
と同じで、どこにでも追加できます。必要なことは、UICollectionViewDelegate
およびUICollectionViewDataSource
プロトコルを実装することだけです。次のチュートリアル Supplementary Header に従い、UICollectionView
の補足ヘッダーとして検索バーを追加できます。