【问题标题】:Add horizontally scrollable filter options under UISearchController在 UISearchController 下添加水平滚动过滤器选项
【发布时间】:2018-06-08 20:42:36
【问题描述】:

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

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

【问题讨论】:

    标签: ios swift xcode uicollectionview uisearchcontroller


    【解决方案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。此外,如果您看到错误,请尝试发布它。如果答案有帮助,请考虑对其进行投票。谢谢。
    猜你喜欢
    • 2014-12-09
    • 1970-01-01
    • 1970-01-01
    • 2019-02-27
    • 1970-01-01
    • 2014-01-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多