在 UISearchController 下添加水平滚动过滤器选项

Posted 2023-03-11

【中文标题】在 UISearchController 下添加水平滚动过滤器选项

【英文标题】：Add horizontally scrollable filter options under UISearchController

【发布时间】：2018-06-08 20:42:36

【问题描述】：

我正在开发一个允许用户在表格中搜索内容的页面，并且我想在搜索栏下添加一些过滤器选项。我已经以编程方式将 UISearchController 添加到导航栏中，但我想知道如何在搜索栏下添加水平滚动过滤器选项列表（就像这张图片右侧的布局：https://i.stack.imgur.com/XrjIq.png）。谢谢！

我意识到这可能是以前被问过/回答过的问题，但我找不到一个讨论这个问题的页面。如果您有解决方案的链接，我将不胜感激！

【参考方案1】：

您可以创建一个带有过滤器按钮的水平滚动 collectionView，并将其设置在 UISearchController 下方。

您可以通过编程方式创建这样的集合视图：

 lazy var collectionView: UICollectionView = 
        let layout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        layout.minimumInteritemSpacing = 0
        layout.scrollDirection = UICollectionViewScrollDirection.horizontal
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.backgroundColor =  UIColor.white
        cv.dataSource = self
        cv.delegate = self
        cv.translatesAutoresizingMaskIntoConstraints = false
        return cv
    ()

现在您可以使用 cellForItemAtIndexPath、numberOfItemsInSection 和其他委托将项目添加到此 collectionView。

您需要像这样在 collectionView 上设置约束：

 collectionView.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
collectionView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
collectionView.topAnchor.constraint(equalTo: searchController.bottomAnchor).isActive = true
collectionView.heightAnchor.constraint(equalToConstant: 44).isActive = true

如果您需要进一步解释，请告诉我。

【讨论】：

那么，在这种情况下，collectionView 是以编程方式创建的吗？当我将 collectionView 添加到此代码时，它会引发错误“必须使用非零布局参数初始化 UICollectionView”

更新了答案，希望对您有所帮助。如果答案有帮助，请不要忘记将其标记为答案。祝你好运。

这很好用，除了一件事。搜索控制器没有组件bottomAnchor（用于设置集合视图的topAnchor）。当我将此代码更改为 searchController.searchBar.bottomAnchor 时，应用程序会引发 SIGABRT 错误。有解决办法吗？

另外，collectionView 覆盖了下面的 tableView。我想我只是将其顶部约束更改为等于 collectionView 的底部。这是最好的方法吗？

是的collectiokview底部应该是table view top。此外，如果您看到错误，请尝试发布它。如果答案有帮助，请考虑对其进行投票。谢谢。