[英]Floating/fixed search bar above TableView - Swift 3
I'm having a problem that many other users have asked about on StackOverflow (examples: 1 , 2 , 3 ). 我有一个问题,许多其他用户都问在计算器上(例如: 1 , 2 , 3 )。
I'd like to have a fixed search bar when scrolling a tableview. 滚动桌面视图时,我想要一个固定的搜索栏 。 I originally had a
UITableViewController
with a UISearchBar
on top. 我最初有一个带
UISearchBar
的UITableViewController
。
Most solutions recommended that I should have a UIViewController
with a UISearchBar
and a UITableView
below it. 大多数解决方案建议我应该有一个带有
UISearchBar
的UIViewController
和一个UITableView
。 I did exactly this. 我做到了这一点。 Below is a screenshot of my interface builder.
下面是我的界面构建器的屏幕截图。
This solution doesn't fix it, however :( The search bar still doesn't float, and when scrolling it will hide behind the navigation bar. 但是,此解决方案无法修复它:(搜索栏仍然不会浮动,滚动时它会隐藏在导航栏后面。
I have also tried this solution but I'd rather not have the search bar in the navigation bar itself. 我也试过这个解决方案,但我宁愿在导航栏中没有搜索栏。
Here's all of my TableView or Search related code (I removed everything irrelevant): 这是我的所有TableView或搜索相关代码(我删除了所有不相关的代码):
class NumberSelectorViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, UISearchBarDelegate, UISearchControllerDelegate {
@IBOutlet var searchBar: UISearchBar!
@IBOutlet var tableView: UITableView!
let searchController = UISearchController(searchResultsController: nil)
override func viewDidLoad() {
super.viewDidLoad()
tableView.delegate = self
tableView.dataSource = self
searchController.searchResultsUpdater = self as UISearchResultsUpdating
searchController.dimsBackgroundDuringPresentation = false
definesPresentationContext = true
// NOTE: Removing thie line removes the search bar entirely.
tableView.tableHeaderView = searchController.searchBar
addCancelButton()
}
// MARK: - Table view data source
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if isSearching() == true {
return filteredNumberList.count
}
return NumberList.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "numberCell")! as UITableViewCell
if isSearching() == true {
cell.textLabel?.text = filteredNumberList[indexPath.row].NumberName
} else {
cell.textLabel?.text = NumberList[indexPath.row].NumberName
}
return cell
}
// MARK: - Table view delegate
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: true)
if isSearching() == true {
selectedNumber = filteredNumberList[indexPath.row]
} else {
selectedNumber = NumberList[indexPath.row]
}
performSegue(withIdentifier: "someSegue", sender: self)
}
// MARK: Searching
func filterContentForSearchText(searchText: String, scope: String = "All") {
filteredNumberList = NumberList.filter({ (Number) -> Bool in
return (Number.NumberName?.lowercased().contains(searchText.lowercased()))!
})
tableView.reloadData()
}
// MARK: Search Bar
func isSearching() -> Bool {
return (searchController.isActive && searchController.searchBar.text != "")
}
func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
}
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
filteredNumbersList.removeAll()
}
func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
self.tableView.reloadData()
}
extension NumberSelectorViewController: UISearchResultsUpdating {
public func updateSearchResults(for searchController: UISearchController) {
filterContentForSearchText(searchText: searchController.searchBar.text!)
}
func updateSearchResultsForSearchController(searchController: UISearchController) {
filterContentForSearchText(searchText: searchController.searchBar.text!)
}
}
}
I actually discovered the answer. 我实际上发现了答案。 The issue was simply that I had the line:
问题只是我有这条线:
tableView.tableHeaderView = searchController.searchBar
I removed this, and then the search bar disappeared, but it was only being hidden behind the navigation bar! 我删除了这个,然后搜索栏消失了,但它只是隐藏在导航栏后面! So I played around with the constraints on the interface builder and it now works as normal :)
所以我玩了界面构建器上的约束,它现在正常工作:)
It appears you added the search bar to your view properly, it's just hidden under navigation bar. 您似乎已将搜索栏正确添加到视图中,它只是隐藏在导航栏下方。 Try in
viewDidLoad
试试
viewDidLoad
self.edgesForExtendedLayout = UIRectEdgeNone;
and get rid of 并摆脱
tableView.tableHeaderView = searchController.searchBar
you don't need to add the searchBar in the tableView or its header. 您不需要在tableView或其标题中添加searchBar。
In your viewDidLoad method you can give the Edge Inset so that the content in tableView is not overlapped by the searchBar 在viewDidLoad方法中,您可以提供Edge Inset,以便tableView中的内容不会被searchBar重叠
override func viewDidLoad() {
super.viewDidLoad()
let edgeInsets = UIEdgeInsetsMake(52, 0, 0, 0)
self.tableView.contentInset = edgeInsets
self.tableView.register(UINib(nibName: "AbcCell", bundle: nil), forCellReuseIdentifier: "AbcCell")
}
Following is an image how i have placed it in one of my project and it dosen't float. 以下是我将其放置在我的一个项目中并且它不会漂浮的图像。
我是另一种观点,所以你可以把它放在任何地方
anyView.addSubview(searchController.searchBar)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.