iOS - Customizing Cancel button of UISearchBar

Question

In my iOS5 iPhone application, i'm setting the tint color of search bar using following code:

searchBar.tintColor = UIColorMake(@"#EFEFEF");

RGB value of #efefef is (239,239,239)
Its working fine. But when cancel button appears the text "Cancel" is not visible. Can I customize only the cancel button with transparent black and white text on that?
is it possible to customize?

Jagged

I have written an answer to this topic here: #19207257. Just use the SHSearchBar which is not such a pain in the ass like the UISearchBar. – Homonym

Answer 1

You could search for UISearchBar subViews and locate the cancel button, it is dangerous to do so, since the button could change For example you could add this in your viewWillAppear

- (void) viewWillAppear:(BOOL)animated
{
    //show the cancel button in your search bar
    searchBar.showsCancelButton = YES;
    //Iterate the searchbar sub views
    for (UIView *subView in searchBar.subviews) {
        //Find the button
        if([subView isKindOfClass:[UIButton class]])
        {
            //Change its properties
            UIButton *cancelButton = (UIButton *)[sb.subviews lastObject];
            cancelButton.titleLabel.text = @"Changed";
        }
    }
}

As i said before this could change, its a hack to do so, you better stick with the original, or create your own search bar.

Supererogate

in ios 7 it's not finding any subviews – Asset

This is not advisable and as of iOS 5 the better way to handle this is with the appearance proxy as Marián Černý descibes in his answer. – Manifestative

Answer 2

You can customize the Cancel button on iOS 5 by using the appearance proxy. You need to change appearance of UIBarButtonItem when contained in UISearchBar. For example to change the title font of the Cancel button you can use:

NSDictionary *attributes =
    [NSDictionary dictionaryWithObjectsAndKeys:
     [UIColor whiteColor], UITextAttributeTextColor,
     [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5], UITextAttributeTextShadowColor,
     [NSValue valueWithUIOffset:UIOffsetMake(0, 1)], UITextAttributeTextShadowOffset,
     [UIFont systemFontOfSize:12], UITextAttributeFont,
     nil];
[[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil]
    setTitleTextAttributes:attributes forState:UIControlStateNormal];
[[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil]
    setTitleTextAttributes:attributes forState:UIControlStateHighlighted];

Altamira

THIS should be the accepted answer. It's not hacky, it's clear, and it works. The currently accepted answer could break at any time. – Conceited

This is great for changing the text on the button, but how do you change the button itself? eg - change the button size – Rufford

Unfortunately UISearchBar also contains a Clear button (grey circle with an x inside) so if you change Cancel button's background image using this method, Clear button is affected too... – Doud

Answer 3

Since iOS5 you can edit the Navigationbar, Toolbar, Tabbar and some more with this code...

NSDictionary *textTitleOptions = [NSDictionary dictionaryWithObjectsAndKeys:
                                          [UIColor darkGrayColor], 
                                          UITextAttributeTextColor, 
                                          [UIColor whiteColor], 
                                          UITextAttributeTextShadowColor, nil];
[[UINavigationBar appearance] setTitleTextAttributes:textTitleOptions];

I haven´t tested it with a searchbar, but it should work similar.

Anderton

No it doesn't. If you look at the appearance documentation for the search bar, it does not provide a clear handler for changing the attributes of the search button. – Conceited

Answer 4

This method works in IOS7

for (UIView *view in searchBar.subviews)
    {
        for (id subview in view.subviews)
        {
            if ( [subview isKindOfClass:[UIButton class]] )
            {
                // customize cancel button
                UIButton* cancelBtn = (UIButton*)subview;
                [cancelBtn setEnabled:YES];
                break;
            }
        }
    }

Check this https://mcmap.net/q/345458/-how-to-enable-cancel-button-with-uisearchbar

Tews