web-dev-qa-db-ja.com

UICollectionViewの上に検索バーを追加するにはどうすればよいですか？

アプリのユーザーがUISearchBarの上にあるUICollectionViewを使用して画像を検索できるようにします。私の理解では、UICollectionViewはUICollectionViewControllerに含まれていないと正常に動作しません。ただし、XcodeではUICollectionViewControllerに検索バーを配置できません。コレクションビューが適切に機能しないため、汎用のUIViewControllerも使用できません。必要な機能をどのように実現できますか？

iosuiviewcontrolleruicollectionviewuisearchbar
12
A Tyshka

CollectionView + SearchBarwithSwift3 + Storyboard実装.

ヘッダービューの作成：

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 in custom class

トリック：検索バーのデリゲートをCOLLECTION VIEWクラスに接続し、検索バーのアウトレットはCUSTOM REUSABLE VIEWクラスに移動します

Connect the search bar delegate to collection view class

プロトコルの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()
    }
}
37
mourodrigo

UICollectionViewをUICollectionViewControllerの中に入れることは必須ではありません。 UICollectionViewはUITableViewと同じで、どこにでも追加できます。必要なことは、UICollectionViewDelegateおよびUICollectionViewDataSourceプロトコルを実装することだけです。次のチュートリアル Supplementary Header に従い、UICollectionViewの補足ヘッダーとして検索バーを追加できます。

1
Vishnu gondlekar