如何让搜索栏在 uicollectionview 中工作答案

【问题标题】：How to get search bar to work in a uicollectionview如何让搜索栏在 uicollectionview 中工作
【发布时间】：2017-06-25 03:33:24
【问题描述】：

我想在 uicollection 视图上方放置一个搜索栏，如下图所示。我想以编程方式执行此操作。

当前视图

这是我的搜索栏设置功能代码。我在主视图控制器中有它。

func setupSearchBar() {

    let searchBar = UISearchBar(frame: CGRect(x: 0, y: 64, width:UIScreen.main.bounds.width, height: 32))
    searchBar.barTintColor = UIColor(red: 64/255, green: 64/255, blue: 64/255, alpha: 1)
    searchBar.backgroundColor = UIColor.blue
    searchBar.isTranslucent = true
    searchBar.placeholder = "Search Timeline"
    searchBar.searchBarStyle = UISearchBarStyle.prominent
    view.addSubview(searchBar)

}

【问题讨论】：

标签： ios swift uicollectionview uisearchbar

【解决方案1】：

您可以将搜索栏添加到您的 UICollectionview 标题中。

这会以编程方式创建 searchBar

    lazy var searchBar : UISearchBar = {
    let s = UISearchBar()
        s.placeholder = "Search Timeline"
        s.delegate = self
        s.tintColor = .white
        s.barTintColor = // color you like
        s.barStyle = .default
        s.sizeToFit()
    return s
}()

接下来，在您的视图中确实加载注册了标题视图。

collectionView?.register(UICollectionViewCell.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headerCellId")

重写下面的方法来定义你希望你的标题的高度。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    return CGSize(width: view.frame.width, height: 40)
}

最后，将搜索栏添加到 UICollectionview 标题，定义约束以适应整个标题视图。

    override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "headerCellId", for: indexPath)
        header.addSubview(searchBar)
        searchBar.translatesAutoresizingMaskIntoConstraints = false
        searchBar.leftAnchor.constraint(equalTo: header.leftAnchor).isActive = true
        searchBar.rightAnchor.constraint(equalTo: header.rightAnchor).isActive = true
        searchBar.topAnchor.constraint(equalTo: header.topAnchor).isActive = true
        searchBar.bottomAnchor.constraint(equalTo: header.bottomAnchor).isActive = true
    return header
}

【讨论】：

【解决方案2】：

尝试添加这些代码：

    // Call sizeToFit() on the search bar so it fits nicely in the UIView
    self.searchController!.searchBar.sizeToFit()
    // For some reason, the search bar will extend outside the view to the left after calling sizeToFit. This next line corrects this.
    self.searchController!.searchBar.frame.size.width = self.collectionView!.frame.size.width

【讨论】：

我将什么 UIViewController 提供给搜索控制器？
@jhaywoo8 你可能只是想在 setupSearchBar() 函数中添加：searchBar.sizeToFit() ，看看结果是否是你想要的。