如何在UICollectionView上方添加搜索栏？

Question

如何在UICollectionView上方添加搜索栏？

iosuiviewcontrolleruicollectionviewuisearchbar

15

我想让我的应用程序用户可以使用位于UICollectionView上方的UISearchBar搜索图像。据我了解，UICollectionView必须在UICollectionViewController中才能正常工作。但是，Xcode不允许我将搜索栏放在UICollectionViewController中。我也不能使用通用的UIViewController，因为集合视图将无法正常工作。我该如何实现所需的功能？

- A Tyshka

请查看以下链接，这可能会对您有所帮助。示例-如何将UICollectionview与UISearchbar集成-1 - Chandan

2个回答

2

UICollectionView不一定非要在UICollectionViewController中使用，它就像UITableView一样可以添加到任何地方。您只需要实现UICollectionViewDelegate和UICollectionViewDataSource协议。您可以参考以下教程Supplementary Header，将搜索栏作为UICollectionView的补充头部。

- Vishnu gondlekar

我已经这样做了，但是即使我实现了UICollectionViewDelegate和UICollectionViewDataSource，我仍然会收到NSExceptions。 - A Tyshka

1

什么是异常？ - Vishnu gondlekar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mourodrigo · Accepted Answer

使用 Swift3 + Storyboard 实现 CollectionView + SearchBar。

创建 Header View：

创建搜索栏：

创建可重用的视图自定义类

设置可重用的视图自定义类

创建搜索栏 outlet

技巧：将搜索栏委托连接到 COLLECTION VIEW 类，搜索栏 outlet 连接到 CUSTOM REUSABLE VIEW CLASS。

实现协议的 CollectionView header 方法

    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()
    }
}