The search bar on iOS 9.3 keeps hiding behind table view although it is part of its header. How can I make it consistent between iOS versions?
One such difference:
on iOS 11
on iOS 9.3
in SelectCountryViewController: UITableViewController, UISearchBarDelegate, UISearchResultsUpdating:
self.tableView.delegate = self;
configureSearchController()
self.automaticallyAdjustsScrollViewInsets = false;
definesPresentationContext = true
let searchButton: UIBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: self, action: #selector(searchButtonAction))
searchButton.image = UIImage(named: "search")
self.navigationItem.rightBarButtonItem = searchButton
refreshController.attributedTitle = NSAttributedString(string: "")
refreshController.addTarget(self, action: #selector(refreshSelector), for: .valueChanged)
tableView.addSubview(refreshController)
func configureSearchController()
{
resultsController.tableView.delegate = self
resultsController.tableView.dataSource = self
self.searchController = UISearchController(searchResultsController: self.resultsController)
//self.tableView.tableHeaderView = self.searchController.searchBar
self.searchController.searchResultsUpdater = self
self.searchController.dimsBackgroundDuringPresentation = false
searchController.searchBar.delegate = self
self.searchController.searchBar.scopeButtonTitles = []
for subView in searchController.searchBar.subviews {
for subViewOne in subView.subviews {
if subViewOne is UITextField {
searchTextField = subViewOne as! UITextField
subViewOne.backgroundColor = UIColor.white
break
}
}
}
self.automaticallyAdjustsScrollViewInsets = false;
extendedLayoutIncludesOpaqueBars = true
definesPresentationContext = true
}
func searchBarShouldBeginEditing(_ searchBar: UISearchBar) -> Bool {
// tableView.setContentOffset(self.navigationItem, animated: true)
searchController.searchBar.barTintColor = UIColor.white
//searchController.searchBar.layer.borderColor = UIColor.white.cgColor
searchTextField.backgroundColor = UIColor.searchBarTextFieldGrey()
return true
}
func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {
self.searchController.searchBar.showsCancelButton = false
// searchController.searchBar.barTintColor = nil
searchTextField.backgroundColor = UIColor.white
searchController.searchBar.barTintColor = nil
}
override func viewWillDisappear(_ animated: Bool) {
self.navigationController?.navigationBar.shadowImage = nil
}
#objc func refreshSelector()
{
if(!searchLoaded)
{
searchLoaded = true
self.tableView.tableHeaderView = searchController.searchBar
print( "Got ya")
self.navigationItem.rightBarButtonItem = nil
}
refreshController.endRefreshing()
}
#objc func searchButtonAction() {
if(!searchLoaded)
{
searchLoaded = true
self.tableView.tableHeaderView = searchController.searchBar
// self.navigationItem.titleView = searchController.searchBar
}
self.searchController.searchBar.becomeFirstResponder()
self.searchController.searchBar.text = ""
self.navigationItem.rightBarButtonItem = nil
}
Related
I am trying to change the background color of the search bar text field and i have searched and tried lots of solutions but those are not working.
So, please anyone can tell me the exact solution for that. How can we change the background color of the search bar text field?
/// used to prepare searchController inside navigation.
private func prepareNavigationSearchControllerSetup() {
self.title = AppConstant.kContacts
let search = UISearchController(searchResultsController: nil)
search.searchResultsUpdater = self
search.searchBar.cornerRadius = 10.0
search.searchBar.textField?.backgroundColor = .red
search.searchBar.textField?.tintColor = .yellow
self.navigationItem.searchController = search
self.navigationItem.hidesSearchBarWhenScrolling = false
}
extension UISearchBar {
var textField: UITextField? {
let subViews = subviews.flatMap { $0.subviews }
return (subViews.filter { $0 is UITextField }).first as? UITextField
}
}
After a lot more search I found the correct answer that is working for me.
if #available(iOS 11.0, *) {
if let textfield = search.searchBar.value(forKey: "searchField") as? UITextField {
textfield.textColor = UIColor.blue
if let backgroundview = textfield.subviews.first {
backgroundview.backgroundColor = UIColor.white
backgroundview.layer.cornerRadius = 10;
backgroundview.clipsToBounds = true;
}
}
}
You can try this
UITextField.appearance(whenContainedInInstancesOf: [type(of: searchController.searchBar)]).backgroundColor = .yellow
UITextField.appearance(whenContainedInInstancesOf: [type(of: searchController.searchBar)]).tintColor = .blue
Output
Edit : Full Code
var searchController = UISearchController()
let resultsTableController = Storyboard.Home.instantiateViewController(withIdentifier: "GlobalTableVC") as! GlobalTableVC
resultsTableController.tableView.delegate = self
resultsTableController.tableView.dataSource = self
resultsTableController.tableView.register(UITableViewCell.self, forCellReuseIdentifier: "SearchCell")
searchController = UISearchController(searchResultsController: resultsTableController)
searchController.searchBar.placeholder = "Search"
searchController.dimsBackgroundDuringPresentation = true
searchController.searchBar.sizeToFit()
searchController.hidesNavigationBarDuringPresentation = false
searchController.searchBar.keyboardType = UIKeyboardType.alphabet
searchController.searchBar.tintColor = UIColor.white
searchController.searchBar.barTintColor = UIColor(hexString: "EB033B")
UITextField.appearance(whenContainedInInstancesOf: [type(of: searchController.searchBar)]).backgroundColor = .yellow
UITextField.appearance(whenContainedInInstancesOf: [type(of: searchController.searchBar)]).tintColor = .blue
searchController.searchBar.delegate = self
searchController.delegate = self
searchController.searchResultsUpdater = self
present(searchController, animated: true, completion: nil)
Since iOS 13:
if #available(iOS 13.0, *) {
searchController.searchBar.searchTextField.backgroundColor = .red
searchController.searchBar.searchTextField.tintColor = .yellow
}
I have a main view controller, it has a fullscreen UITableView which is populated by values from Firebase and a TabBarController below. All the code for the UITableView is handled programmatically. I need to add two options: Firstly, a search bar to query the results and a filter option for the various categories to fetch from Firebase.
Here is my updated code from the ViewController:
import UIKit
import Firebase
class PostTable: UIViewController, UITableViewDelegate, UITableViewDataSource, UISearchControllerDelegate,UISearchResultsUpdating {
func updateSearchResults(for searchController: UISearchController) {
}
var tableView:UITableView!
var posts = [Post]()
var searchController : UISearchController!
override func viewDidLoad() {
super.viewDidLoad()
if Auth.auth().currentUser == nil {
switchStoryboard()
}
tableView = UITableView(frame: view.bounds, style: .plain)
view.addSubview(tableView)
let cellNib = UINib(nibName: "PostTableViewCell", bundle: nil)
tableView.register(cellNib, forCellReuseIdentifier: "postCell")
var layoutGuide:UILayoutGuide!
layoutGuide = view.safeAreaLayoutGuide
tableView.leadingAnchor.constraint(equalTo: layoutGuide.leadingAnchor).isActive = true
tableView.topAnchor.constraint(equalTo: layoutGuide.topAnchor).isActive = true
tableView.trailingAnchor.constraint(equalTo: layoutGuide.trailingAnchor).isActive = true
tableView.bottomAnchor.constraint(equalTo: layoutGuide.bottomAnchor).isActive = true
tableView.delegate = self
tableView.dataSource = self
tableView.tableFooterView = UIView()
tableView.reloadData()
searchController = UISearchController(searchResultsController: nil)
searchController.delegate = self
searchController.searchResultsUpdater = self
searchController.dimsBackgroundDuringPresentation = false // displays tableview
let scb = self.searchController.searchBar
scb.tintColor = UIColor.white
scb.placeholder = "SEARCH"
scb.barTintColor = UIColor.white
if let textfield = scb.value(forKey: "searchField") as? UITextField {
textfield.textColor = UIColor.green
if let backgroundview = textfield.subviews.first {
backgroundview.backgroundColor = UIColor.white
backgroundview.layer.cornerRadius = 10
backgroundview.clipsToBounds = true
}
}
if #available(iOS 11.0, *) {
navigationItem.searchController = searchController
navigationItem.hidesSearchBarWhenScrolling = false
} else {
self.tableView.tableHeaderView = searchController.searchBar
searchController.searchBar.tintColor = UIColor.green
searchController.searchBar.barTintColor = UIColor.green
}
definesPresentationContext = true
observePosts()
}
Add variable of UISearchController
var searchController : UISearchController!
& then add code in viewDidLoad
searchController = UISearchController(searchResultsController: nil)
searchController.delegate = self
searchController.searchResultsUpdater = self
searchController.dimsBackgroundDuringPresentation = false // displays tableview
let scb = self.searchController.searchBar
scb.tintColor = UIColor.white
scb.placeholder = "SEARCH"
scb.barTintColor = UIColor.white
if let textfield = scb.value(forKey: "searchField") as? UITextField {
textfield.textColor = UIColor.greenColor
if let backgroundview = textfield.subviews.first {
backgroundview.backgroundColor = UIColor.white
backgroundview.layer.cornerRadius = 10
backgroundview.clipsToBounds = true
}
}
if #available(iOS 11.0, *) {
navigationItem.searchController = searchController
navigationItem.hidesSearchBarWhenScrolling = false
} else {
self.tableView.tableHeaderView = searchController.searchBar
searchController.searchBar.tintColor = UIColor.greenColor
searchController.searchBar.barTintColor = UIColor.greenColor
}
definesPresentationContext = true
An UITabbarController does not have a UINavigationController so it doesn't have a UINavigationBar.
So you could do:
Add a cell to your TableView to act like a search bar
Add a Navigationbar to the ViewController
Add a custom View to your View to act as a container
There may be more options, just want to point you into the right direction.
override func viewDidLoad() {
super.viewDidLoad()
searchController = UISearchController(searchResultsController: nil)
searchController.searchBar.autocapitalizationType = .none
if #available(iOS 11.0, *) {
navigationItem.searchController = searchController
// Make the search bar always visible.
navigationItem.hidesSearchBarWhenScrolling = false
} else {
// For iOS 10 and earlier, place the search controller's search bar in the table view's header.
tableView.tableHeaderView = searchController.searchBar
}
searchController.delegate = self
searchController.dimsBackgroundDuringPresentation = false // The default is true.
}
I am integrating UISearchController and UITableViewController in a ViewController.
Below is the code that I have implemented:
func configureSearchController() {
let searchTableViewController = UITableViewController()
self.searchController = UISearchController(searchResultsController: searchTableViewController)
self.searchController.searchResultsUpdater = self;
self.searchController.hidesNavigationBarDuringPresentation = false
self.searchController.searchBar.searchBarStyle = .default
self.navigationItem.titleView = self.searchController.searchBar
self.searchController.searchBar.becomeFirstResponder()
self.searchController.searchBar.placeholder = "Title"
let searchBar = self.searchController.searchBar
if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
textfield.textColor = UIColor.black
if let backgroundview = textfield.subviews.first {
// Background color
backgroundview.backgroundColor = UIColor.white
// Rounded corner
backgroundview.layer.cornerRadius = 5
backgroundview.clipsToBounds = false
}
}
self.definesPresentationContext = true
// Setting delegates and other stuff
searchTableViewController.tableView.dataSource = self
searchTableViewController.tableView.delegate = self
self.searchController.delegate = self
self.searchController.dimsBackgroundDuringPresentation = true
self.searchController.searchBar.delegate = self
}
Now the problem is when I start typing in SearchBar the TableViewController is appearing over SearchBar.
How to add space between SearchBar and TableViewController?
This is how it looks :
So I have a search icon as my right bar button item. When the user taps the icon, it allows the user to search and only show certain values in the tableview. It also hides the nav bar buttons at the top and the filterBar just below the navigation controller
func setupNavBarButtons() {
let searchImage = UIImage(named: "search_icon")?.withRenderingMode(.alwaysOriginal)
let searchBarButtonItem = UIBarButtonItem(image: searchImage, style: .plain, target: self, action: #selector(handleSearch))
navigationItem.rightBarButtonItem = searchBarButtonItem
setupFilterButton()
}
filter bar and navbar items to be hidden while searching like so:
func handleSearch() {
searchController.searchBar.isHidden = false
navigationItem.titleView = searchController.searchBar
searchController.searchBar.becomeFirstResponder()
navigationItem.rightBarButtonItems = nil
navigationItem.leftBarButtonItems = nil
filterBar.isHidden = true
tableView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
}
And then it to reappear again once user stops searching, like so:
func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
setupNavBarButtons()
searchController.searchBar.isHidden = true
filterBar.isHidden = false
tableView.topAnchor.constraint(equalTo: view.topAnchor, constant: 40).isActive = true
// Also tried tableView.topAnchor.constraint(equalTo: filterBar.bottomAnchor).isActive = true
}
Before Search:
During Search
After search: As you can see the tableview doesn't return to where it originally was. The filterBar is the gray view with 'Map' and 'Location'
Still got the same issue so I've uploaded my project here:
https://github.com/lukejones1/bug
At first, You added 'height' layout constraint with 40 px.
and you added 'height' layout constraint with 0 px when user clicked search button.
and again, you added 'height' layout constraint with 40 px when user clicked cancel button.
You need to reuse the layout constraint.
class ViewController: UIViewController {
var filterBarHeightLC : NSLayoutConstraint?
lazy var tableView : UITableView = {
let tv = UITableView()
tv.register(UITableViewCell.self, forCellReuseIdentifier: "cellId")
tv.layoutMargins = UIEdgeInsets.zero
tv.separatorInset = UIEdgeInsets.zero
tv.backgroundColor = .red
tv.translatesAutoresizingMaskIntoConstraints = false
return tv
}()
lazy var filterBar : UIView = {
let bar = UIView()
bar.backgroundColor = .blue
bar.translatesAutoresizingMaskIntoConstraints = false
return bar
}()
fileprivate lazy var filterButton : UIButton = {
let button = UIButton()
button.setTitleColor(UIColor.white, for: UIControlState())
button.setTitle("Filter", for: UIControlState())
button.contentHorizontalAlignment = UIControlContentHorizontalAlignment.left
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
fileprivate lazy var searchController: UISearchController = {
let sc = UISearchController(searchResultsController: nil)
sc.dimsBackgroundDuringPresentation = false
sc.hidesNavigationBarDuringPresentation = false
sc.searchResultsUpdater = self
sc.delegate = self
sc.view.tintColor = UIColor.white
sc.searchBar.tintColor = UIColor.white
sc.searchBar.delegate = self
return sc
}()
func setupNavBarButtons() {
let searchBarButtonItem = UIBarButtonItem(title: "Search", style: .plain, target: self, action: #selector(handleSearch))
navigationItem.rightBarButtonItem = searchBarButtonItem
setupFilterButton()
}
func setupFilterButton() {
let containerView = UIView()
containerView.frame = CGRect(x: 0, y: 0, width: 100, height: 40)
containerView.addSubview(filterButton)
filterButton.leftAnchor.constraint(equalTo: containerView.leftAnchor).isActive = true
filterButton.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
let filterBarButtonItem = UIBarButtonItem(customView: containerView)
navigationItem.leftBarButtonItem = filterBarButtonItem
}
override func viewDidLoad() {
super.viewDidLoad()
setupViews()
setupNavBarButtons()
view.backgroundColor = .white
}
func handleSearch() {
searchController.searchBar.isHidden = false
navigationItem.titleView = searchController.searchBar
searchController.searchBar.becomeFirstResponder()
navigationItem.rightBarButtonItems = nil
navigationItem.leftBarButtonItems = nil
// changed!
filterBarHeightLC?.constant = 0
}
func setupViews() {
view.addSubview(filterBar)
view.addSubview(tableView)
tableView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
tableView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
tableView.topAnchor.constraint(equalTo: filterBar.bottomAnchor).isActive = true
tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
filterBar.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
filterBar.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
filterBar.topAnchor.constraint(equalTo: view.topAnchor, constant: 64).isActive = true
// changed!
filterBarHeightLC = filterBar.heightAnchor.constraint(equalToConstant: 40)
filterBarHeightLC?.isActive = true
}
extension ViewController: UISearchControllerDelegate, UISearchResultsUpdating, UISearchBarDelegate {
func filteredContentForSearchText(_ searchText: String, scope: String = "All") {
tableView.reloadData()
}
func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
setupNavBarButtons()
searchController.searchBar.isHidden = true
// changed!
filterBarHeightLC?.constant = 40
}
func updateSearchResults(for searchController: UISearchController) {
filteredContentForSearchText(searchController.searchBar.text!)
}
}
Have a fun coding! :)
I try to add SearchController.searchBar under navigation bar.
override func viewDidLoad() {
super.viewDidLoad()
searchController = UISearchController(searchResultsController: nil)
searchController.searchResultsUpdater = self
searchController.searchBar.sizeToFit()
searchController.hidesNavigationBarDuringPresentation = false
searchController.delegate = self
searchController.dimsBackgroundDuringPresentation = false //
searchController.searchBar.delegate = self
let SearchFrame = CGRectMake(0,(self.navigationController?.navigationBar.frame.height)!, (self.navigationController?.navigationBar.frame.width)!,searchController.searchBar.frame.height)
searchController.searchBar.frame = SearchFrame
self.navigationController?.navigationBar.addSubview(searchController.searchBar)
}
This code add a searchBar under navigationBar, but searchBar can't detect user interaction! I can't click on search text input field!! What did I do wrong?
Try this. It works for me
var SearchFrame : CGRect?
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let searchController = UISearchController(searchResultsController: nil)
searchController.searchResultsUpdater = self
searchController.searchBar.sizeToFit()
searchController.hidesNavigationBarDuringPresentation = false
searchController.delegate = self
searchController.dimsBackgroundDuringPresentation = false //
searchController.searchBar.delegate = self
SearchFrame = CGRectMake(0,(self.navigationController?.navigationBar.frame.height)!, (self.navigationController?.navigationBar.frame.width)!,searchController.searchBar.frame.height)
searchController.searchBar.frame = SearchFrame!
self.navigationController?.navigationBar.addSubview(searchController.searchBar)
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
var navbarFrame = self.navigationController!.navigationBar.frame
navbarFrame.size = CGSize(width: navbarFrame.width, height: navbarFrame.height + SearchFrame!.height)
self.navigationController?.navigationBar.frame = navbarFrame
}
My problem was solved!
First we need to create a XIB file with class and add two navigationBar to them!
Then need to add a IBOutlets!
Then write the code:
var TitleNavigationBar = UINavigationBar() //This need to add Title and Subtitle to NavigationBarTitleView
override func viewDidLoad() {
super.viewDidLoad()
let NavBarWithSearch = NSBundle.mainBundle().loadNibNamed("NavBarWithSearchBar", owner: self, options: nil)[0] as! NavBarWithSearchBar
self.navigationController?.navigationBar.frame = CGRectMake((self.navigationController?.navigationBar.frame.origin.x)!, 0.0, (self.navigationController?.navigationBar.frame.width)!, (self.navigationController?.navigationBar.frame.height)! + self.searchController.searchBar.frame.height)
NavBarWithSearch.frame = CGRectMake(0.0,0.0, (self.navigationController?.navigationBar.frame.width)!, (self.navigationController?.navigationBar.frame.height)!)
NavBarWithSearch.NavigationBarForSearchBar.topItem?.titleView = searchController.searchBar
TitleNavigationBar = NavBarWithSearch.CustomNavigationBar //=======This need to add Title and Subtitle to NavigationBarTitleView`
self.navigationController?.navigationBar.addSubview(NavBarWithSearch)
self.automaticallyAdjustsScrollViewInsets = false
tableView.contentInset = UIEdgeInsetsMake((self.navigationController?.navigationBar.frame.height)! + UIApplication.sharedApplication().statusBarFrame.height, 0, (self.tabBarController?.tabBar.frame.height)!, 0)
searchController.hidesNavigationBarDuringPresentation = false
}
override func viewWillAppear(animated: Bool) {
//This need to add Title and Subtitle to NavigationBarTitleView
let titleView = NSBundle.mainBundle().loadNibNamed("NavTitleView", owner: self, options: nil)[0] as! NavTitleView
titleView.TitleLabel.text = "Title"
titleView.contentMode = UIViewContentMode.ScaleAspectFit
titleView.SubtitleLabel.text = "SubTitle"
let TitleViewFrame = CGRectMake((UIScreen.mainScreen().bounds.width/2) - 80, 0, 160, 44)
titleView.frame = TitleViewFrame
TitleNavigationBar.topItem?.titleView = titleView
//========This need to add Title and Subtitle to NavigationBarTitleView
self.navigationController?.navigationBar.frame = CGRectMake((self.navigationController?.navigationBar.frame.origin.x)!, 20, (self.navigationController?.navigationBar.frame.width)!, (self.navigationController?.navigationBar.frame.height)! + self.searchController.searchBar.frame.height)
}
XIB file with Class for NavBarTitleView with subtitle should be look like
like this:
Finally i get beautiful Navigation Bar with search bar!
P.S. searchController.hidesNavigationBarDuringPresentation = true // This doesn't work because Custom navigation bar added to main navigation bar as subview!