How to fix UISearchController search bar resizing when focused? - ios

I am trying to implement a UISearchController with a UITableView inside of a small popup screen like this:
Image displaying a popup with a UITableView and UISearchController.
However, when the search bar is focused, it moves up and becomes wider, as shown here:
Image displaying a glitched search bar.
I have found one other post about this issue here, but the accepted solution did not seem to fix the problem.
For reference, I am using a modal segue displaying over full screen. There is a content view in which the tableView and titleLabel are subviewed. Here is the relevant code for the popup view controller.
#IBOutlet weak var tableView: UITableView!
#IBOutlet weak var titleLabel: UILabel!
var items = ["Test", "oewrghp", "wopqet", "vbsjadsf", "rweoghp", "bmwehth", "pqeojnh"]
var filteredItems = [String]()
let searchController = UISearchController(searchResultsController: nil)
override func viewDidLoad() {
super.viewDidLoad()
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(dismissTapGesture(gesture:)))
view.addGestureRecognizer(tapGesture)
view.backgroundColor = UIColor(displayP3Red: 0, green: 0, blue: 0, alpha: 0.3)
searchController.searchResultsUpdater = self
searchController.hidesNavigationBarDuringPresentation = false
searchController.searchBar.barTintColor = .white
searchController.searchBar.backgroundColor = .clear
searchController.searchBar.delegate = self
searchController.obscuresBackgroundDuringPresentation = false
titleLabel.text = "Search"
tableView.tableHeaderView = searchController.searchBar
tableView.delegate = self
tableView.dataSource = self
tableView.reloadData()
tableView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.handleTap(_:))))
// Do any additional setup after loading the view.
}

Use a UISearchBar instead of a UISearchController
Something like:
let searchBar = UISearchBar(frame: CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 44))
Hope this helps someone!

Related

How do I set up my navigation search bar in Swift to look like the Reddit App

I just started to learn how to code with Swift in Xcode, I need some help regarding the search bar. I want to add a search field bar to my navigation bar in center, and next to it i want to add two items . So far I managed to add a UISearch to my navigation bar but once I try to add items next to it, it pushes my icons above the search field.
Pressed State
Normal State
Does anyone know what to add the two menu items next to it programmatically or in the storyboard? And how to make the search field centered and a bit thinner?
My code now:
override func viewDidLoad() {
super.viewDidLoad()
let searchController = UISearchController(searchResultsController: nil)
searchController.delegate = self as? UISearchControllerDelegate
let searchBar = searchController.searchBar
searchBar.tintColor = UIColor.white
searchBar.barTintColor = UIColor.white
if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
textfield.textColor = UIColor.blue
if let backgroundview = textfield.subviews.first {
// Background color
backgroundview.backgroundColor = UIColor.white
// Rounded corner
backgroundview.layer.cornerRadius = 10;
backgroundview.clipsToBounds = true;
}
}
if let navigationbar = self.navigationController?.navigationBar {
navigationbar.barTintColor = UIColor.blue
}
navigationItem.searchController = searchController
navigationItem.hidesSearchBarWhenScrolling = false
}
Reddit Example
Okay, fixed it! Just used the code below. Now my next struggle is changing the background of the textfield.
//SEARCH
let searchController = UISearchController(searchResultsController: nil)
searchController.hidesNavigationBarDuringPresentation = false
searchController.dimsBackgroundDuringPresentation = false
searchController.searchBar.delegate = self as? UISearchBarDelegate
let frame = CGRect(x: 0, y: 0, width: 300, height: 44)
let titleView = UIView(frame: frame)
searchController.searchBar.backgroundImage = UIImage()
searchController.searchBar.frame = frame
titleView.addSubview(searchController.searchBar)
navigationItem.titleView = titleView
}

UISearchController Swift 4: Spacing Problems

I'm adding a UISearchController but I keep experiencing spacing problems. In particular, when I conduct a search in the search bar, it shifts up and leaves a black space between the tableview and the search bar.
Then, when I type the the black space disappears but there's a large white space between the search bar and the table.
I tried adding the following line but the spacing problem becomes worse:
searchController.hidesNavigationBarDuringPresentation = false
Any helpful hints would be greatly appreciated.
Here is my current code:
class SearchViewController: UITableViewController {
var searchController: UISearchController!
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.clear
view.isOpaque = false
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
//Set up Table View
self.navigationController?.navigationBar.shadowImage = UIImage()
let searchResultsController = UITableViewController(style: .plain)
searchResultsController.tableView.delegate = self
searchResultsController.tableView.dataSource = self
searchResultsController.tableView.rowHeight = 65
searchResultsController.tableView.register(SearchCell.self, forCellReuseIdentifier: "SearchCell")
// Setup Search Controller
searchController = UISearchController(searchResultsController: searchResultsController)
searchController.searchBar.tintColor = UIColor.white
searchController.searchBar.barTintColor = UIColor(red: 34/255, green: 167/255, blue: 240/255, alpha: 1.0)
searchController.searchBar.layer.borderColor = UIColor(red: 34/255, green: 167/255, blue: 240/255, alpha: 1.0).cgColor
searchController.searchBar.layer.borderWidth = 1.00
tableView.tableHeaderView?.addSubview(searchController.searchBar)
let searchBar = searchController.searchBar
searchBar.sizeToFit()
searchBar.placeholder = "Search"
searchController.searchBar.delegate = self
searchController.searchResultsUpdater = self
definesPresentationContext = true
searchController.dimsBackgroundDuringPresentation = false
tableView.tableHeaderView = searchController.searchBar
}
try to Add
self.automaticallyAdjustsScrollViewInsets = false
self.extendedLayoutIncludesOpaqueBars = true
in viewDidload.
or uncheck "Adjust Scroll View Insets"

Swift 3 - Push a new view but keep the same NavigationBar

I have a UISearchBar in my application. When I press a button to "open" the searchbar does a new view appear. But the problem is that the NavigationController changes and the UISearchBar disappear. How can I do so I can keep the current NavigationController with my searchbar even if a new view appear. (So I still searching when the new view appear)
P.s my code is not the best and I´m not using Storyboard!
class HomeController: UICollectionViewController, UICollectionViewDelegateFlowLayout, UISearchBarDelegate {
override func viewDidLoad() {
super.viewDidLoad()
collectionView?.backgroundColor = UIColor.white
setupNavigationBar()
}
Here is the new view that appear:
class UserSearchController: UICollectionViewController, UISearchBarDelegate {
override func viewDidLoad() {
super.viewDidLoad()
collectionView?.backgroundColor = UIColor.blue
}
}
And here is the whole searchbar code:
import UIKit
var searchBar = UISearchBar()
var searchBarButtonItem: UIBarButtonItem?
var logoImageView: UIImageView!
extension HomeController {
func setupNavigationBar() {
let button = UIButton(type: .system)
button.setImage(#imageLiteral(resourceName: "search"), for: .normal)
button.addTarget(self, action: #selector(showSearchBar), for: .touchUpInside)
button.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let barButton = UIBarButtonItem(customView: button)
self.navigationItem.rightBarButtonItem = barButton
let logoImage = UIImage(named: "home")!
logoImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: logoImage.size.width, height: logoImage.size.height))
logoImageView.image = logoImage
navigationItem.titleView = logoImageView
searchBar.delegate = self
searchBar.searchBarStyle = UISearchBarStyle.minimal
searchBar.placeholder = "Search"
searchBar.barTintColor = UIColor.gray
searchBarButtonItem = navigationItem.rightBarButtonItem
}
func showSearchBar() {
let layout = UICollectionViewFlowLayout()
let userSearchController = UserSearchController(collectionViewLayout: layout)
self.navigationController?.pushViewController(userSearchController, animated: true)
searchBar.alpha = 0
navigationItem.titleView = searchBar
navigationItem.setLeftBarButton(nil, animated: true)
navigationItem.rightBarButtonItem = nil
searchBar.showsCancelButton = true
UIView.animate(withDuration: 0.5, animations: {
self.searchBar.alpha = 1
}, completion: { finished in
self.searchBar.becomeFirstResponder()
})
}
public func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
hideSearchBar()
}
func hideSearchBar() {
navigationItem.setRightBarButton(searchBarButtonItem, animated: true)
logoImageView.alpha = 0
UIView.animate(withDuration: 0.3, animations: {
self.navigationItem.titleView = self.logoImageView
self.logoImageView.alpha = 1
}, completion: { finished in
})
}
}
The reason why your search bar is only visible on your first View Controller is because you are using the View Controller's titleView property. Each UIViewController has it's own titleView property, so if you push a View Controller onto your first VC, it will also need to have the titleView property set to a search bar view with the required configuration.
I think you can create a base class, add UISearchBar above the base class, and then you want the current controller with UISearchBar to inherit your base class

How to add SearchController.searchBar under navigationBar (UITableView) swift

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!

adding searchBar to navigationBar in swift

i'm trying to add a searchBar to the navigationBar. i've researched a bit and this is what i've done so far:
The problem is nothing appear to the navigationBar using this code.
searchBar = UISearchBar(frame: CGRectMake(0, 0, 320, 44))
searchBar?.delegate = self
searchBar?.showsCancelButton = true
searchController = UISearchDisplayController()
searchController?.delegate = self
searchController?.searchResultsDelegate = self
searchController?.displaysSearchBarInNavigationBar = true
Try this code that worked for me:
lazy var searchBars:UISearchBar = UISearchBar(frame: CGRectMake(0, 0, 200, 20))
override func viewDidLoad() {
super.viewDidLoad()
var leftNavBarButton = UIBarButtonItem(customView: searchBars)
self.navigationItem.leftBarButtonItem = leftNavBarButton
}
Try this
lazy var searchBar = UISearchBar(frame: .zero)
override func viewDidLoad() {
super.viewDidLoad()
navigationItem.titleView = searchBar}
You can use this
private let searchController = UISearchController(searchResultsController: nil)
override func viewDidLoad() {
self.navigationItem.searchController = searchController
self.navigationItem.hidesSearchBarWhenScrolling = false
}

Resources