I want to add a button (bar) inside a UISearchbar and another one just outside the UISearchbar as shown in the image. Any help on this appreciated.
Thanks in advance
Naveen
Edit :
As stated by #NicolasMiari in the comments :
This no longer works post-iOS 7, since the bookmarks button is rendered inside the bar's input text field.
For the button inside the search bar, you can use the bookmark button and change its image. You simply go to your storyboard (if you use one), select the search bar, and activate the option "Shows Bookmarks Button". Then, in your code, set the image you want :
[_searchBar setImage:[UIImage imageNamed:#"My-Custom-Image"] forSearchBarIcon:UISearchBarIconBookmark state:UIControlStateNormal];
You can detect a click on this button with the following delegate method :
- (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar {
NSLog(#"click");
}
Swift 4
class ViewController: UIViewController {
var searchController = UISearchController(searchResultsController: nil)
override func viewDidLoad() {
searchController.delegate = self
searchController.searchBar.delegate = self
searchController.searchBar.showsBookmarkButton = true
searchController.searchBar.setImage(UIImage(named: "myImage"), for: .bookmark, state: .normal)
}
}
extension ViewController: UISearchBarDelegate {
func searchBarBookmarkButtonClicked(_ searchBar: UISearchBar) {
print("click")
}
}
The fastest way to add a button in UISearchBar is to update the bookmark button like this:
[self.searchDisplayController.searchBar setImage:[UIImage imageNamed:#"customImage.png"] forSearchBarIcon:UISearchBarIconBookmark state:UIControlStateNormal];
If you need to adjust the offset,
[self.searchDisplayController.searchBar setPositionAdjustment:UIOffsetMake(-10, 0) forSearchBarIcon:UISearchBarIconBookmark];
Don't forget to activate the option "Shows Bookmarks Button" in story board.
Related
What is the best way to align right bar button items with left title in UINavigationBar ?
(now I have the icons at the top right corner)
maybe there is a more correct and optimal solution, but it is suitable for me.
Do not be alarmed by the syntax, I use SnapKit
Create button or view
lazy private var settingsButton = UIButton().then {
$0.setImage(Image.settings, for: .normal)
}
override viewDidAppear(_ animated: Bool)
navigationController?.navigationBar.subviews.forEach { subview in
let stringFromClass = NSStringFromClass(subview.classForCoder)
guard stringFromClass.contains("UINavigationBarLargeTitleView") else { return }
subview.subviews.forEach { label in
guard label is UILabel else { return }
subview.addSubview(settingsButton)
settingsButton.snp.makeConstraints{
$0.top.equalTo(label)
$0.right.equalToSuperview().offset(-14)
$0.height.width.equalTo(35)
}
}
}
set UIScrollViewDelegate and in scrollViewDidScroll method get ahead of the navigationBar state and then hide / show the UIBarButtonItem
Result
screenshot
I can display and hide keyboard. There is a problem: when I tap something in the searchBar, there is a X symbol in the left of the searchBar and a cancel button. If I click cancel button first and then click the X symbol, I will got an fatal error: Index out of range.
So I want to hide the “x” symbol rather than “cancel” button. Is this possible?
Get the textfield and hide it.
UITextField *textField = [searchBar valueForKey:#"_searchField"];
textField.clearButtonMode = UITextFieldViewModeNever;
or Swift you can alwasy extend the search bar and override it.
class NoCancelButtonSearchController: UISearchController {
let noCancelButtonSearchBar = NoCancelButtonSearchBar()
override var searchBar: UISearchBar { return noCancelButtonSearchBar }
}
class NoCancelButtonSearchBar: UISearchBar {
override func setShowsCancelButton(_ showsCancelButton: Bool, animated: Bool) { /* void */ }
}
Swift 5
hide the x icon within the UISearchBar:
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).clearButtonMode = .never
My goal is to prevent the cancel button from appearing in a search bar in a UISearchController. I started with Apple's Table Search with UISearchController sample code and hid the cancel button as seen in the code snip below. However, when the user taps in the text field, the cancel button still appears. Any help?
override func viewDidLoad() {
super.viewDidLoad()
resultsTableController = ResultsTableController()
searchController = UISearchController(searchResultsController: resultsTableController)
searchController.searchResultsUpdater = self
searchController.searchBar.sizeToFit()
tableView.tableHeaderView = searchController.searchBar
searchController.searchBar.delegate = self
//Hide cancel button - added by me
searchController.searchBar.showsCancelButton = false
...
I think there are three ways of achieving that:
Override searchDisplayControllerDidBeginSearch and use the following code:
searchController.searchBar.showsCancelButton = false
Subclass UISearchBar and override the layoutSubviews to change that var when the system attempts to draw it.
Register for keyboard notification UIKeyboardWillShowNotification and apply the code in point 1.
Of course can always implement your search bar.
For iOS 8, and UISearchController, use this delegate method from UISearchControllerDelegate:
func didPresentSearchController(searchController: UISearchController) {
searchController.searchBar.showsCancelButton = false
}
Don't forget to set yourself as the delegate: searchController.delegate = self
Simply subclass UISearchController & UISearchBar.
class NoCancelButtonSearchController: UISearchController {
let noCancelButtonSearchBar = NoCancelButtonSearchBar()
override var searchBar: UISearchBar { return noCancelButtonSearchBar }
}
class NoCancelButtonSearchBar: UISearchBar {
override func setShowsCancelButton(_ showsCancelButton: Bool, animated: Bool) { /* void */ }
}
The following github project subclasses UISearchBar which is presented as solution 2:
https://github.com/mechaman/CustomSearchControllerSwift
On top of it, it also subclasses UISearchController to enable one to put the search bar in places other than the tableView header!
Hope this helps.
This was the simplest solution I could come up with in Swift.
Custom search controller:
class CustomSearchController: UISearchController {
var _searchBar: CustomSearchBar
override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: NSBundle?) {
self._searchBar = CustomSearchBar()
super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
}
override init(searchResultsController: UIViewController?) {
self._searchBar = CustomSearchBar()
super.init(searchResultsController: searchResultsController)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override var searchBar: UISearchBar {
return self._searchBar
}
}
Custom search bar:
class CustomSearchBar: UISearchBar {
override func setShowsCancelButton(showsCancelButton: Bool, animated: Bool) {
// do nothing
}
}
The most important piece of this was to only create the _searchBar object once in init vs. creating it inside of the stored property.
Just subclass your UISearchController and do the following:
class CustomSearchController: UISearchController {
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
searchBar.showsCancelButton = false
}
}
This was the easiest solution I could came up with in order to solve the flashing cancel-button issue.
TL;DR:
Subclassing UISearchBar and overriding setShowsCancelButton: and setShowsCancelButton:animated: hides the cancel button.
SOLUTION
I set active to NO if the search bar is not the first responder (keyboard is not active and displayed), since that is effectively a cancel command.
FJSearchBar
Marking searchController.searchBar.showsCancelButton = NO doesn't seem to work in iOS 8. I haven't tested iOS 9.
FJSearchBar.h
Empty, but placed here for completeness.
#import UIKit;
#interface FJSearchBar : UISearchBar
#end
FJSearchBar.m
#import "FJSearchBar.h"
#implementation FJSearchBar
- (void)setShowsCancelButton:(BOOL)showsCancelButton {
// do nothing
}
- (void)setShowsCancelButton:(BOOL)showsCancelButton animated:(BOOL)animated {
// do nothing
}
#end
FJSearchController
Here's where you want to make the real changes. I split the UISearchBarDelegate into its own category because, IMHO, the categories make the classes cleaner and easier to maintain. If you want to keep the delegate within the main class interface/implementation, you're more than welcome to do so.
FJSearchController.h
#import UIKit;
#interface FJSearchController : UISearchController
#end
#interface FJSearchController (UISearchBarDelegate) <UISearchBarDelegate>
#end
FJSearchController.m
#import "FJSearchController.h"
#import "FJSearchBar.h"
#implementation FJSearchController {
#private
FJSearchBar *_searchBar;
BOOL _clearedOutside;
}
- (UISearchBar *)searchBar {
if (_searchBar == nil) {
// if you're not hiding the cancel button, simply uncomment the line below and delete the FJSearchBar alloc/init
// _searchBar = [[UISearchBar alloc] init];
_searchBar = [[FJSearchBar alloc] init];
_searchBar.delegate = self;
}
return _searchBar;
}
#end
#implementation FJSearchController (UISearchBarDelegate)
- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar {
// if we cleared from outside then we should not allow any new editing
BOOL shouldAllowEditing = !_clearedOutside;
_clearedOutside = NO;
return shouldAllowEditing;
}
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
// hide the keyboard since the user will no longer add any more input
[searchBar resignFirstResponder];
}
- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {
if (![searchBar isFirstResponder]) {
// the user cleared the search while not in typing mode, so we should deactivate searching
self.active = NO;
_clearedOutside = YES;
return;
}
// update the search results
[self.searchResultsUpdater updateSearchResultsForSearchController:self];
}
#end
Some parts to note:
I've put the search bar and the BOOL as private variables instead of properties because
They're more lightweight than private properties.
They don't need to be seen or modified by the outside world.
We check whether the searchBar is the first responder. If it's not, then we actually deactivate the search controller because the text is empty and we're no longer searching. If you really want to be sure, you can also ensure that searchText.length == 0.
searchBar:textDidChange: is invoked before searchBarShouldBeginEditing:, which is why we handled it in this order.
I update the search results every time the text changes, but you may want to move the [self.searchResultsUpdater updateSearchResultsForSearchController:self]; to searchBarSearchButtonClicked: if you only want the search performed after the user presses the Search button.
Swift:
The following worked for me, added under viewDidLoad, because I never wanted that button:
let searchBarStyle = searchBar.value(forKey: "searchField") as? UITextField
searchBarStyle?.clearButtonMode = .never
Make sure to add the ID for the searchBar in the storyboard.
Use UISearchControllerDelegate.
func willPresentSearchController(_ searchController: UISearchController) {
searchController.searchBar.setValue("", forKey:"_cancelButtonText")
}
I'm trying to achieve the same effect as Apple's Contacts app (left screenshot). The cancel button in UISearchBar is enabled even when the keyboard is dismissed. My app behaves differently (right screenshot). The cancel button automatically becomes disabled when the keyboard is dismissed. The user is forced to tap the cancel button one time to enable it and then another time to actually trigger the dismissal. This is not good user experience. How would I always keep the cancel button enabled like Apple's Contacts app?
Technical Details:
I'm not using UISearchDisplayController due to some design requirements. This is just a UISearchBar with my own custom search controller. The cancel button is shown using [self.searchBar showsCancelButton:YES animated:YES]. The keyboard is dismissed using [self.searchBar resignFirstResponder].
Call to [self.searchBar resignFirstResponder] will make the cancel button disabled. Hence, you should always update cancel button to enable after calling it.
Objective-C
[searchBar resignFirstResponder];
UIButton *cancelButton = (UIButton *)[searchBar valueForKey:#"cancelButton"];
[cancelButton setEnabled:YES];
Swift
searchBar.resignFirstResponder()
if let cancelButton = searchBar.value(forKey: "cancelButton") as? UIButton {
cancelButton.isEnabled = true
}
In my experience, view.endEditing(true) is the problem. Because it's also called .resignFirstResponder if there's a UITextField inside the view, which is contained in UISearchBar.
https://developer.apple.com/reference/uikit/uiview/1619630-endediting
For Swift 4.0
if let cancelButton : UIButton = searchBar.value(forKey: "cancelButton") as? UIButton{
cancelButton.isEnabled = true
}
This is what worked for me to handle any dismissal such as searchBar.resignFirstResponder(), view.endEditing(false), interactive swipe to dismiss, presenting a view controller, etc.
extension ViewController: UISearchBarDelegate {
func searchBarShouldEndEditing(_ searchBar: UISearchBar) -> Bool {
//cancel button becomes disabled when search bar isn't first responder, force it back enabled
DispatchQueue.main.async {
if let cancelButton = searchBar.value(forKey: "cancelButton") as? UIButton {
cancelButton.isEnabled = true
}
}
return true
}
}
Making sure to set searchBar.delegate = self.
You can use the runtime API to access the cancel button.
UIButton *btnCancel = [self.searchBar valueForKey:#"_cancelButton"];
[btnCancel setEnabled:YES];
As far as your question is concerned, there is no way you can enable the cancel button when the keyboard is dismissed, like there is no callback as such.
Since iOS 7 all the subview of UISearchBar are one level deeper. This should work:
for (UIView *subView in searchBar.subviews) {
for (UIView *secondLevelSubview in subView.subviews) {
if ([view isKindOfClass:[UIButton class]]) {
[(UIButton *)view setEnabled:YES];
}
}
Still hacky and can easily break in the next iOS version.
You could do this:
- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {
[self enableCancelButton];
}
- (void)enableCancelButton {
for (UIView *view in _seachBar.subviews) {
if ([view isKindOfClass:[UIButton class]]) {
[(UIButton *)view setEnabled:YES];
}
}
}
BUT this is a pretty hackish method and I'm fairly certain it's generally frowned upon by Apple and could potentially lead to the app being rejected. As far as I know, there doesn't seem to be any other way to do what you're trying to do.
Here's a recursive solution that is working for me.
func enableButtons(_ view:UIView) {
for subView in view.subviews {
enableButtons(subView)
}
if let buttonView = view as? UIButton {
buttonView.isEnabled = true
}
}
Try this simple solution, works perfect for me
extension UISearchBar {
func enableCancelButton(in view: UIView) {
view.subviews.forEach {
enableCancelButton(in: $0)
}
if let cancelButton = view as? UIButton {
cancelButton.isEnabled = true
cancelButton.isUserInteractionEnabled = true
}
}
}
extension ViewController: UISearchBarDelegate {
func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {
DispatchQueue.main.async {
searchBar.enableCancelButton(in: searchBar)
}
}
}
Implement the below searchBarShouldEndEditing delegate method in your code. Hope it will helpful.
(BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar
{
[[searchBar valueForKey:#"_cancelButton"] setEnabled:YES];
return YES;
}
Here's a simple way:
searchBar.resignFirstResponder()
(searchBar.value(forKey: "_cancelButton") as? UIButton)?.isEnabled = true
I would like to know how to hide or not display the UISearchBar cross that appears in the textField fo the UISearchBar
I have tried using this
filterSearchBar.showsCancelButton = NO;
However this is an actual cancel button not the small grey cross, so I would like to know if there is an equivalent for the small grey button that shows in the UISearchBar.
You need to get the textField of the Search Bar:
UITextField *textField = [searchBar valueForKey:#"_searchField"];
textField.clearButtonMode = UITextFieldViewModeNever;
hope this help! =)
There's a better way to do this, and you don't have to use private APIs or traverse subviews to do it, so this solution is App Store safe.
UISearchBar has a built-in API for doing this:
[UISearchBar setImage:forSearchBarIcon:state]
The SearchBar icon key you want is UISearchBarIconClear, and you want the UIControlStateNormal state. Then give it a clear image for the image, and you're done.
So, it should look like this:
[searchBar setImage:clearImage forSearchBarIcon:UISearchBarIconClear state:UIControlStateNormal];
Swift 4
Adding to Alexander's answer and block user interaction on clear button:
To hide button:
searchBar.setImage(UIImage(), for: .clear, state: .normal)
To disable user interaction on the clear button, simply subclass UISearchBar
class CustomSearchBar: UISearchBar {
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
let view = super.hitTest(point, with: event)
if view is UIButton {
return view?.superview // this will pass-through all touches that would've been sent to the button
}
return view
}
}
Based on #Gines answer, here is the Swift version:
func searchBarTextDidBeginEditing(searchBar: UISearchBar) {
guard let firstSubview = searchBar.subviews.first else { return }
firstSubview.subviews.forEach {
($0 as? UITextField)?.clearButtonMode = .never
}
}
Swift 5
Tested on iOS 13
One liner working for me:
searchBar.searchTextField.clearButtonMode = .never
You can also set it to .whileEditing to have it displayed when the user is typing and then removed when the search bar loses focus.
Swift 3, based on #Alexsander answer:
searchBar.setImage(UIImage(), for: .clear, state: .normal)
You can remove the clear text button for all UISearchBar instances:
[UITextField appearanceWhenContainedInInstancesOfClasses:#[[UISearchBar class]]].clearButtonMode = UITextFieldViewModeNever;
Swift 5
Just add a single line below
searchBar.searchTextField.clearButtonMode = .never
Swift 3 solution :
extension UISearchBar{
var textField : UITextField{
return self.value(forKey: "_searchField") as! UITextField
}
}
Usage :
searchBar.textField.clearButtonMode = .never
I tried different solutions about this issue, even the one selected in this post, but they didn't work.
This is the way I found to solve this issue:
UIView *subview = [[searchBar subviews] firstObject]; //SearchBar only have one subview (UIView)
//There are three sub subviews (UISearchBarBackground, UINavigationButton, UISearchBarTextField)
for (UIView *subsubview in subview.subviews)
{
//The UISearchBarTextField class is a UITextField. We can't use UISearchBarTextField directly here.
if ([subsubview isKindOfClass: [UITextField class]])
{
[(UITextField *)subsubview setClearButtonMode:UITextFieldViewModeNever];
}
}
Try this:
- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {
UITextField *textField = [searchBar valueForKey:#"_searchField"];
textField.clearButtonMode = UITextFieldViewModeNever;
}
In Case of Swift 2.3 just use :
var searchBar = UISearchBar();
searchBar.frame = CGRectMake(0, 0, 00, 20))
for subview: UIView in (searchBar.subviews.first?.subviews)!
{
if (subview.isKindOfClass(UITextField) )
{
let textFieldObject = (subview as! UITextField)
textFieldObject.clearButtonMode = .Never;
}
}
Swift 2.3, based on #Alexsander answer:
searchBar.setImage(UIImage(named: "SearchClearIcon"), forSearchBarIcon: UISearchBarIcon.Clear, state: UIControlState.Highlighted)
searchBar.setImage(UIImage(named: "SearchClearIcon"), forSearchBarIcon: UISearchBarIcon.Clear, state: UIControlState.Normal)
Converting Soto_iGhost's answer to Swift 4:
func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
let textField: UITextField = searchBar.value(forKey: "_searchField") as! UITextField
textField.clearButtonMode = .never
}
If you have an outlet of UISearchBar the you can write above code anywhere in your class.
thijsonline's answer in swift:
(UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self])).clearButtonMode = .never