如何在导航栏中添加带有范围栏的搜索栏，其中导航栏会自动增加其高度并显示范围栏 [英] How to add a searchBar with scopebar inside of a NavigationBar where the navBar automatically increase its height and shows the scopeBar

问题描述

我阅读了有关 stackoverflow 的所有问题，但没有一个能解决我的问题.我创建了一个 UICollectionView 并在没有使用 Storyboards 的情况下在导航栏中锚定了一个 searchBar！

I read all questions on stackoverflow but none of them could solve my problem. I created a UICollectionView and and anchored a searchBar inside of the navigationBar without using Storyboards!

   class UserSearchController: UICollectionViewController ,.. {..
    lazy var  searchBar: UISearchBar = {
    let sb = UISearchBar()
    sb.placeholder = "Enter username"
    sb.barTintColor = UIColor.gray
    UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = UIColor.rgb(red: 230, green: 230, blue: 230)
    sb.delegate = self
    sb.showsCancelButton = true
    return sb
}()  .... 

  // adding the searchBar to the collectionView as subView and      
    anchoring it  to the navigationBar

搜索栏显示在导航栏内，一切正常.当我尝试向搜索栏添加范围栏时会出现问题.我在搜索栏中添加了以下属性

The searchbar is shown inside of the navigationBar and everything works fine. The problem occurs when I try to add a scopebar to my searchbar. I added the following properties to my searchbar

      sb.showsScopeBar = true
      sb.scopeButtonTitles = ["Username", "Hashtag"]

scopeBar 隐藏在 navigationBar 后面，并且 navBar 不会自动增加其高度.您只会看到灰色背景.

The scopeBar is hide behind the navigationBar and the navBar is not automatically increasing its height. You just see a gray background.

将我的代码添加到一个简单的 UiViewController 一切正常

Adding my code to a simple UiViewController everything works fine

此代码在普通的 VIewController 中工作，其中 searchBar 作为子视图添加并锚定到视图.

This code works inside a normal VIewController where the searchBar is added as subView and anchored to the view.

    lazy var  searchBar: UISearchBar = {

    let sb = UISearchBar()
    sb.placeholder = "Enter username"
    sb.barTintColor = UIColor.gray
    UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = UIColor.rgb(red: 230, green: 230, blue: 230)
    sb.delegate = self
    sb.scopeButtonTitles = ["Username", "Hashtag"]
    sb.tintColor = UIColor.black
    sb.barTintColor = UIColor.lightGray


    return sb
}()

public func searchBarShouldBeginEditing(_ searchBar: UISearchBar) -> Bool {
    searchBar.showsScopeBar = true
    searchBar.sizeToFit()
    searchBar.setShowsCancelButton(true, animated: true)

    return true
}



func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
    searchBar.showsScopeBar = false
    searchBar.endEditing(true)
}

我的搜索栏如下所示.如果您开始输入，scopeBar 就会出现，如果您单击取消，它就会消失.我想要相同但只在导航栏内:

My searchBar looks like the following. If you start typing the scopeBar appears and if you click cancel it disappears. I want the same but only inside of the navBar :

如何在没有故事板的情况下在导航栏中添加带有 scopeBar 的 searchBar.有没有什么简单的办法.请您参考我的代码并使用我的代码向我展示这是如何工作的.我还尝试增加导航栏的大小，但它应该会自动工作，我不知道这是否是正确的方法.

How is it possible to add a searchBar with scopeBar inside of the navigationBar without Storyboards. Isn't there any easy way. Please can you refer to my code and use my code to show me how this works. I also tried to increase the size of the navigationBar but it should work automatically and I don't know if this is the right approach.

推荐答案

我认为这就是您正在寻找的实现方式:

I think this is the sort of implementation you are looking for:

您的网段控制器

// ( Declare Globaly )
var yourSegmentController = UISegmentedControl()
yourSegmentController.addTarget(self, action: #selector(ParentClass.filterChanged(_:)), for: .touchUpInside)

然后您必须使用您的 UICollectionView 注册您的自定义 UICollectionViewCell 类.在您的 viewDidLoad 或在您拥有 UICollectionView 的模块中使用的任何初始化方法中执行此操作:

Then you will have to register your custom UICollectionViewCell classes with your UICollectionView. Do this in your viewDidLoad or whatever initializer method is used in the module you have the UICollectionView inside of:

self.yourCollectionView.register(YourCustomUserCellClassHere.self, forCellWithReuseIdentifier: NSStringFromClass(YourCustomUserCellClassHere))

self.yourCollectionView.register(YourCustomHashtagCellClassHere.self, forCellWithReuseIdentifier: NSStringFromClass(YourCustomHashtagCellClassHere))

最后，在您的 cellForItemAt 委托方法中，执行以下操作以查看选择了哪个过滤器并相应地返回单元格:

Lastly, in your cellForItemAt delegate method, do the following to see which filter is selected and return the cells accordingly:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    var cellToReturn = UICollectionViewCell()

    // USERS
    if yourSegmentController.selectedSegmentIndex == 0 {

        let customUserCell = self.yourCollectionView.dequeueReusableCell( withReuseIdentifier: NSStringFromClass(YourCustomUserCellClassHere), for: indexPath) as? YourCustomUserCellClassHere

        // Do what you want with your custom cell here...


        cellToReturn = customUserCell
    }
    // HASHTAGS
    else if yourSegmentController.selectedSegmentIndex == 1 {

        let customHashtagCell = self.yourCollectionView.dequeueReusableCell( withReuseIdentifier: NSStringFromClass(YourCustomHashtagCellClassHere), for: indexPath) as? YourCustomHashtagCellClassHere

        // Do what you want with your custom cell here...


        cellToReturn = customHashtagCell

    }

    return cellToReturn

}

这将检查选择了哪个过滤器，然后返回适合过滤器的单元格.

This will check to see what filter is selected and then return the cell that suits the filter.

还要记住，每次用户更改您的细分过滤器时，您都必须刷新 UICollectionView.

Also keep in mind every time the user changes your segment filter you will have to refresh the UICollectionView.

像这样刷新它:

// Put this method at the same level where your cellForItemAt function is but not inside

func filterChanged (_ sender:UISegmentedControl) {
    self.yourCollectionView.reloadData()
} 

这篇关于如何在导航栏中添加带有范围栏的搜索栏，其中导航栏会自动增加其高度并显示范围栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！