Right align magnifying glass icon in UISearchBar

问题:

In Cocoa-Touch we find a control UISearchBar. I need to customize it so that the search icon (which we click performs the respective action) present in the textfield is right aligned. Normally we find it left aligned. Is it possible to do so? I have done R & D but couldn't find it ...

How can I do it? Are there any good tutorials where we can find it?

回答1:

Unfortunately the UISearchBar wasn't designed to directly support this. In accomplishing what we want it's likely that we're going to have to use workarounds that compromise visually or functionality wise or write a lot of customising code.

I've outlined a couple of approaches that get close to what we want and may be of use.

Accessing Subviews Approach

The text within a UISearchBar is a UITextField that is a subview of that UISearchBar and is accessible through the usually means i.e. view.subviews.

The magnifying glass search icon is a UIImageView in the leftView property of the UITextField. We can switch it over 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;
}

Which gives us the following result:

As you can see the icon overruns the edge of the rounded rectangle and the clear icon has disappeared. In addition, the rightView property was intended for other content such as the search results button and bookmarks button. Putting the search icon here may conflict with this functionality in some way even if you were able to use padding of offsets to position it appropriately.

In the very least you can use this approach to extract the icon as a UIImageView and position it explicitly where you see fit as you would any other view and write custom code to handle tap events etc.

Customizing Appearance Approach

In iOS v5.0 and later, you can customize the appearance of search bars using the methods listed here. The following code makes use of offsets to position the icon and text within the UISearchBar:

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

On a standard UISearchBar of 320 width it looks like the following:

This would keep all event functionality associated with the icon working as expected but unfortunately the UITextField is confused and despite its width, it only displays a very small portion of its text. If you could find a way to allow the text to display beyond what it believes to be the end of the UITextField, this will probably be your best bet.

回答2:

My requirement was that the search icon should be on the right, and that it should hide whenever the X icon showed up.

I came up with a similar solution as above, but a bit different and also using Swift 2 and AutoLayout. The basic idea is to hide the left view, create a new view with the magnifying glass image, and use autolayout to pin it to the right. Then use UISearchBarDelegate methods to hide the search icon whenever the searchbar text 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 != ""
  } 
 }