Magnifying Glass Right Alignment Icon in UISearchBar

Question

In Cocoa -Touch, we find the UISearchBar control. I need to configure it so that the search icon (which we click, perform the corresponding action) present in the text box is aligned to the right . Usually we find left alignment . Can this be done? I did R and D, but could not find it ...

How can i do this? Are there any good tutorials where we can find him?

Answer 1

Unfortunately, UISearchBar not intended to directly support this. In doing what we want, it is likely that we will have to use workarounds that can compromise visually or functionally, or write a lot of code to set up.

I have outlined several approaches that come close to what we want and which can be useful.

Access to the Subviews Approach

The text inside the UISearchBar is a UITextField , which is a subset of this UISearchBar and is accessible through the usually means ie view.subviews .

The magnifying glass search icon is the UIImageView in the leftView property of the UITextField . We can switch it to the right using the following code:

 // The text within a UISearchView is a UITextField that is a subview of that UISearchView. UITextField *searchField; for (UIView *subview in self.searchBar.subviews) { if ([subview isKindOfClass:[UITextField class]]) { searchField = (UITextField *)subview; break; } } // The icon is accessible through the 'leftView' property of the UITextField. // We set it to the 'rightView' instead. if (searchField) { UIView *searchIcon = searchField.leftView; if ([searchIcon isKindOfClass:[UIImageView class]]) { NSLog(@"aye"); } searchField.rightView = searchIcon; searchField.leftViewMode = UITextFieldViewModeNever; searchField.rightViewMode = UITextFieldViewModeAlways; } 

This gives us the following result:

As you can see, the icon overflows the edge of the rounded rectangle, and the clear icon disappears. In addition, the rightView property is for other content, such as a search results button and bookmarks button. Enabling the search icon may conflict to some extent with this functionality, even if you were able to use offset offsets to position it correctly.

At least you can use this approach to retrieve the icon in the form of a UIImageView and place it explicitly where you consider it necessary, like any other view, and write your own code to handle transition events, etc.

Customize Appearance

In iOS v5.0 , and then you can customize the look of the search strings using the methods listed here . The following code uses offsets to place the icon and text in a UISearchBar :

 [self.searchBar setPositionAdjustment:UIOffsetMake(255, 0) forSearchBarIcon:UISearchBarIconSearch]; [self.searchBar setSearchTextPositionAdjustment:UIOffsetMake(-270, 0)]; 

A standard UISearchBar width of 320 wide is as follows:

This will lead to the fact that all the functionality of the event will be related to the fact that the icon works as expected, but, unfortunately, the UITextField confused and, despite its width, it displays only a very small part of the text. If you could find a way to show text outside of what it thinks is the end of a UITextField , this would probably be your best bet.

Answer 2

My requirement was that the search icon should be on the right, and that it should be hidden whenever the X icon appears.

I came up with a similar solution as described above, but a little different, also using Swift 2 and AutoLayout. The basic idea is to hide the left view, create a new view with a magnifying glass, and use the autostart to attach it to the right. Then use the UISearchBarDelegate methods to hide the search icon whenever the text in the search bar is not empty.

 class CustomSearchView: UIView { //the magnifying glass we will put on the right lazy var magnifyingGlass = UIImageView() @IBOutlet weak var searchBar: UISearchBar! func commonInit() { searchBar.delegate = self searchBar.becomeFirstResponder() //find the search bar object inside the subview stack if let searchField = self.searchBar.subviews.firstObject?.subviews.filter( {($0 as? UITextField) != nil }).firstObject as? UITextField { //hides the left magnifying glass icon searchField.leftViewMode = .Never //add a magnifying glass image to the right image view. this can be anything, but we are just using the system default //from the old left view magnifyingGlass.image = (searchField.leftView! as? UIImageView)?.image //add the new view to the stack searchField.addSubview(magnifyingGlass) //use autolayout constraints to pin the view to the right let views = ["view": magnifyingGlass] magnifyingGlass.translatesAutoresizingMaskIntoConstraints = false searchField.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat( "H:[view(12)]-|", options: [], metrics: nil, views: views)) searchField.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat( "V:[view]-|", options: [], metrics: nil, views: views)) } } //hides whenever text is not empty func searchBar(searchBar: UISearchBar, textDidChange searchText: String) { magnifyingGlass.hidden = searchText != "" } }