How do I change the UISearchbar cancel button's text color

Question

I have a UISearchBar as seen below. How can I change the text color for the cancel button?

Answer 1

This question was asked a while ago, therefore I assume that the person who asked has already found a solution. But just in case some others happen to bump into the same problem. Here is my solution.

I have a UISearchBar with a cancel button that appears only when the textfield of the UISearchBar is tapped. The solution of overriding -(void)layoutSubviews in a subclass of UISearchBar was therefore not an option for me. Anyway I did a subclass of UISearchBar (CustomSearchBar) with a public method for setting the font and textColor of the cancel button. When I create the UISearchBar I make sure that the search bar's textfield delegate is set to self and the class that creates the search bar, implements the UITextFieldDelegate protocol. When the user taps on the search bar's textfield, its delegate is informed and calls the method of CustomSearchBar. The reason why I do it here, is because it's the moment when the cancel button appears and therefore I know that it is on the view hierarchy and I can do its customization.

Here's the code:

For creating the UISearchBar in MyRootViewController

CustomSearchBar *searchBar = [[CustomSearchBar alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 40)];
[searchBar setBarStyle:UIBarStyleDefault];
[searchBar setTintColor:[UIColor whiteColor]];

for (UIView *view in [searchBar subviews]) 
{
    if ([view isKindOfClass:[UITextField class]]) 
    {
        UITextField *searchTextField = (UITextField *)view;
        [searchTextField setDelegate:self];
    }
}

self.searchBar = searchBar;   
[searchBar release];

UITextFieldDelegate in MyRootViewController (make sure that it implements the UITextFieldDelegate protocol)

- (void)textFieldDidBeginEditing:(UITextField *)textField
{
    [self.searchBar setCloseButtonFont:[UIFont fontWithName:@"American Typewriter" size:14] textColor:[UIColor grayColor]];
}

And this is the public method in the UISearchBar's subclass

- (void)setCloseButtonFont:(UIFont *)font textColor:(UIColor *)textColor
{
    UIButton *cancelButton = nil;

    for(UIView *subView in self.subviews)
    {
        if([subView isKindOfClass:[UIButton class]])
        {
            cancelButton = (UIButton*)subView;
        }
    }

    if (cancelButton)
    {
        /* For some strange reason, this code changes the font but not the text color. I assume some other internal customizations      make this not possible:

        UILabel *titleLabel = [cancelButton titleLabel];
        [titleLabel setFont:font];
        [titleLabel setTextColor:[UIColor redColor]];*/

        // Therefore I had to create view with a label on top:        
        UIView *overlay = [[UIView alloc] initWithFrame:CGRectMake(2, 2, kCancelButtonWidth, kCancelButtonLabelHeight)];
        [overlay setBackgroundColor:[UIColor whiteColor]];
        [overlay setUserInteractionEnabled:NO]; // This is important for the cancel button to work
        [cancelButton addSubview:overlay];

        UILabel *newLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 2, kCancelButtonWidth, kCancelButtonLabelHeight)];
        [newLabel setFont:font];
        [newLabel setTextColor:textColor];
        // Text "Cancel" should be localized for other languages
        [newLabel setText:@"Cancel"]; 
        [newLabel setTextAlignment:UITextAlignmentCenter];
        // This is important for the cancel button to work
        [newLabel setUserInteractionEnabled:NO]; 
        [overlay addSubview:newLabel];
        [newLabel release];
        [overlay release]; 
    }
}

Answer 2

You can take advantage of the iOS Runtime Property _cancelButton to achieve this.

UIButton *cancelButton = [searchBar valueForKey:@"_cancelButton"];
[cancelButton setTitleColor:[UIColor yourColor] forState:UIControlStateNormal];

Unable to change UISearchBar cancel button title color after changing it's text.

Answer 3

You can subclass UISearchBar and write your own - (void)layoutSubviews method. In this method, loop through its subviews and get the cancelButton. The rest should be straight forward.

Answer 4

Instead of doing all these fancy things just implement the SearchBarTextDidBeginEditing like this

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar
{
    // only show the status bar’s cancel button while in edit mode sbar (UISearchBar)
    searchBar.showsCancelButton = YES;
    searchBar.autocorrectionType = UITextAutocorrectionTypeNo;
    UIColor *desiredColor = [UIColor colorWithRed:212.0/255.0 green:237.0/255.0 blue:187.0/255.0 alpha:1.0];


    for (UIView *subView in searchBar.subviews){
        if([subView isKindOfClass:[UIButton class]]){
            NSLog(@"this is button type");

            [(UIButton *)subView setTintColor:desiredColor];
            [(UIButton *)subView setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        }
}

Answer 5

Gyanerdra's answer works well. But for iOS7 I needed to make the following change for it work in my app.

NSArray *childViews;
if ( (APP).isIOS7 ) {
    childViews = [[searchBar.subviews objectAtIndex:0] subviews];
} else {
    childViews =searchBar.subviews;
}

for (UIView *subView in childViews ) {
    if([subView isKindOfClass:[UIButton class]]){
        [(UIButton *)subView setTintColor:desiredColor];
        [(UIButton *)subView setTitleColor:desiredColor forState:UIControlStateNormal];
    }
}

It seems that for iOS7 the search bar is enclosed in a parent view. Hope this helps someone. b

Answer 6

KVC

UIButton *button = [_searchBar valueForKey:@"_cancelButton"]; button.titleLabel.font = [UIFont systemFontOfSize:13];