Right align magnifying glass icon in UISearchBar

Question

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?

Answer 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.