无法在 HeaderView(tableview 的 header 视图)中添加 UISearchBar?
Not able to add UISearchBar in HeaderView(tableview's header view)?
无法在 tableView 部分看到 searchBar header
一切都以编程方式完成,没有使用故事板
import UIKit
class ConversationsViewController: UITableViewController {
let searchBar:UISearchBar = {
let bar = UISearchBar()
bar.placeholder = "search conversations"
bar.translatesAutoresizingMaskIntoConstraints = false
return bar
}()
let headerView:UIView = {
let hView = UIView()
// hView.backgroundColor = .red
hView.translatesAutoresizingMaskIntoConstraints = false
return hView
}()
// we want custom cell and header view
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
}
// override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
// return "section \(section)"
// }
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
headerView.addSubview(searchBar)
searchBar.centerXAnchor.constraint(equalTo: headerView.centerXAnchor).isActive = true
searchBar.centerYAnchor.constraint(equalTo: headerView.centerYAnchor).isActive = true
searchBar.heightAnchor.constraint(equalToConstant: 100).isActive = true
searchBar.widthAnchor.constraint(equalToConstant: 40).isActive = true
return headerView
}
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 70
}
}
这是输出照片
我尝试了不同的方法,但我发现这种方法可以在 tableView 中添加 headerView 现在我不知道如何在 headerView 中添加搜索栏,我在上面尝试过但是打不开,请帮忙谢谢
两件事...
部分 header 的视图应该 NOT 将 .translatesAutoresizingMaskIntoConstraints
设置为 false
。保留默认值 true
.
不要给 UISearchBar
高度限制——让它使用其固有高度。
我们 DO 需要给搜索栏一个宽度限制。如果您希望它适合 table 的宽度,请使用:
searchBar.widthAnchor.constraint(equalTo: headerView.widthAnchor, constant: 0.0).isActive = true
如果您希望它只是部分宽度,请为该行指定 constant
的负值,或者使用乘数:
// this will make the search bar 90% of the width of the table
searchBar.widthAnchor.constraint(equalTo: headerView.widthAnchor, multiplier: 0.9).isActive = true
这是经过这些修改的 class:
class ConversationsViewController: UITableViewController {
let searchBar:UISearchBar = {
let bar = UISearchBar()
bar.placeholder = "search conversations"
bar.translatesAutoresizingMaskIntoConstraints = false
return bar
}()
let headerView:UIView = {
let hView = UIView()
// give it a background color so we can easily see
// if it is laying out correctly
hView.backgroundColor = .red
// section header view should leave this at the default TRUE
//hView.translatesAutoresizingMaskIntoConstraints = false
return hView
}()
override func viewDidLoad() {
super.viewDidLoad()
}
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
// add the searchBar
headerView.addSubview(searchBar)
// center it horizontally and vertically
searchBar.centerXAnchor.constraint(equalTo: headerView.centerXAnchor).isActive = true
searchBar.centerYAnchor.constraint(equalTo: headerView.centerYAnchor).isActive = true
// don't set height constraint - use UISearchBar intrinsic height
//searchBar.heightAnchor.constraint(equalToConstant: 100).isActive = true
// constrain width equal to headerView width
// we can adjust the constant if we don't want it to span the entire width of the table
// by using a negative value for the constant, or using a mulitplier to get a percent of the width
searchBar.widthAnchor.constraint(equalTo: headerView.widthAnchor, constant: 0.0).isActive = true
return headerView
}
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 70
}
}
无法在 tableView 部分看到 searchBar header 一切都以编程方式完成,没有使用故事板
import UIKit
class ConversationsViewController: UITableViewController {
let searchBar:UISearchBar = {
let bar = UISearchBar()
bar.placeholder = "search conversations"
bar.translatesAutoresizingMaskIntoConstraints = false
return bar
}()
let headerView:UIView = {
let hView = UIView()
// hView.backgroundColor = .red
hView.translatesAutoresizingMaskIntoConstraints = false
return hView
}()
// we want custom cell and header view
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
}
// override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
// return "section \(section)"
// }
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
headerView.addSubview(searchBar)
searchBar.centerXAnchor.constraint(equalTo: headerView.centerXAnchor).isActive = true
searchBar.centerYAnchor.constraint(equalTo: headerView.centerYAnchor).isActive = true
searchBar.heightAnchor.constraint(equalToConstant: 100).isActive = true
searchBar.widthAnchor.constraint(equalToConstant: 40).isActive = true
return headerView
}
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 70
}
}
这是输出照片
我尝试了不同的方法,但我发现这种方法可以在 tableView 中添加 headerView 现在我不知道如何在 headerView 中添加搜索栏,我在上面尝试过但是打不开,请帮忙谢谢
两件事...
部分 header 的视图应该 NOT 将 .translatesAutoresizingMaskIntoConstraints
设置为 false
。保留默认值 true
.
不要给 UISearchBar
高度限制——让它使用其固有高度。
我们 DO 需要给搜索栏一个宽度限制。如果您希望它适合 table 的宽度,请使用:
searchBar.widthAnchor.constraint(equalTo: headerView.widthAnchor, constant: 0.0).isActive = true
如果您希望它只是部分宽度,请为该行指定 constant
的负值,或者使用乘数:
// this will make the search bar 90% of the width of the table
searchBar.widthAnchor.constraint(equalTo: headerView.widthAnchor, multiplier: 0.9).isActive = true
这是经过这些修改的 class:
class ConversationsViewController: UITableViewController {
let searchBar:UISearchBar = {
let bar = UISearchBar()
bar.placeholder = "search conversations"
bar.translatesAutoresizingMaskIntoConstraints = false
return bar
}()
let headerView:UIView = {
let hView = UIView()
// give it a background color so we can easily see
// if it is laying out correctly
hView.backgroundColor = .red
// section header view should leave this at the default TRUE
//hView.translatesAutoresizingMaskIntoConstraints = false
return hView
}()
override func viewDidLoad() {
super.viewDidLoad()
}
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
// add the searchBar
headerView.addSubview(searchBar)
// center it horizontally and vertically
searchBar.centerXAnchor.constraint(equalTo: headerView.centerXAnchor).isActive = true
searchBar.centerYAnchor.constraint(equalTo: headerView.centerYAnchor).isActive = true
// don't set height constraint - use UISearchBar intrinsic height
//searchBar.heightAnchor.constraint(equalToConstant: 100).isActive = true
// constrain width equal to headerView width
// we can adjust the constant if we don't want it to span the entire width of the table
// by using a negative value for the constant, or using a mulitplier to get a percent of the width
searchBar.widthAnchor.constraint(equalTo: headerView.widthAnchor, constant: 0.0).isActive = true
return headerView
}
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 70
}
}