Colour changed in iOS7.1, how to change searchBar colour?

Question

On iOS7.0.3 - 7.0.6, my searchBar colour is Gold/yellow colour like this: enter image description here

But on iOS 7.1, colour becomes like this:

enter image description here

I set

searchBar.tintColor = [UIColor clearColor];
searchBar.backgroundColor = goldColor;
searchBar.tintColor = [UIColor blackColor];

I've tried so many ways and all are failed. Can anyone figure out what changes in iOS 7.1?

============== My fix ===============

I fix this problem by covering a view on searchBar and add the search text filed as subview on this new view.

I need point out that the gold status bar is a subView of searchBar, and it's frame is CGRectMake(0, -20, 320, 20) and it's background colour is gold.

At first, I set this:

_searchBar.translucent = YES;
_searchBar.scopeBarBackgroundImage = [self imageWithColor:UWGold];

and looks like this:

enter image description here

Then, I expand the view cover the status bar, I changed the view's frame.size.height + searchBar's height, then use this line:

UITextField *textSearchField = [_searchBar valueForKey:@"_searchField"];

to get the textSearchField, then add this textSearchField to the cover view.

At last, the searchBar is exactly like when on iOS 7.0

enter image description here

Not a good way, I need figure out what changes on iOS 7.1 and use a right way to implement this.

Same issue here. Also waiting for a good workaround. Maybe it's a bug? — CGee, Mar 12 '14 at 12:52
I don't know... my tabBar colour is also different on 7.0 and 7.1. Maybe this is related to 'Darken Colors' in Accessibility newly introduced on 7.1? — Honghao Z, Mar 12 '14 at 16:13
Even if so then it shouldn't affect the app as long as this is turned off as it is in my case. I still think it's a bug, will you report it to Apple? — CGee, Mar 13 '14 at 09:47
Be careful with `[_searchBar valueForKey:@"_searchField"]`. It's accessing a private instance variable, and Apple may not like. — Léo Natan, Mar 13 '14 at 15:18

score 4 · Accepted Answer · answered Mar 11 '14 at 04:24

4

Try this:

if(IOS_7)
{
self.searchBar.searchBarStyle = UISearchBarStyleMinimal;
self.searchBar.backgroundImage = [UIImage imageWithColor:[UIColor redColor] cornerRadius:5.0f];
}

Hopefully this will help you.

answered Mar 11 '14 at 04:24

Irfan

4,301
6
29
46

Please also check this link too: http://www.captechconsulting.com/blog/steven-beyers/ios-7-tutorial-series-tint-color-and-easy-app-theming – Irfan Mar 11 '14 at 04:32
Thanks for you answer, however, things do not go as I wish, if I use UISearchBarStyleMinimal, then I searchBar's colour will become Gold, however, I want to keep grey style when searchBar is not tapped. Also, if i use backgroundImage, the scope bar and search bar is separated. I don't know what changes happened to bar's colour. – Honghao Z Mar 11 '14 at 05:54
Also, on iOS7.1, progress Hud I use, tabbar'c colour and some other colour appears incorrectly, the searchBar is the last thing I haven't fixed yet... – Honghao Z Mar 11 '14 at 05:57
check below links may it will help you : http://stackoverflow.com/questions/19301091/how-to-change-background-color-of-uisearchbar-in-ios7 http://www.appcoda.com/customize-navigation-status-bar-ios-7/ – Irfan Mar 11 '14 at 05:58
Irfan, thanks! Setting the barTintColor is what I've tried before, but the barTintColor appears a little light than the real colour. So, that's why I have to set barTineColor to clear colour and set background colour to my colour. – Honghao Z Mar 11 '14 at 06:01
@HonghaoZhang You welcome, is your problem solve or not? I also have some alternative solution to this, can I share it with you if you are still facing this issue. – Irfan Mar 11 '14 at 06:05
No, I haven't resolved my problem. I'll appreciate you so much if you can help me. – Honghao Z Mar 11 '14 at 06:11
I also notice that if I change the background colour to gold, when search bar is moving up, the gold colour appears to be cover by the dark grey colour. I think on ios7.0, the searchBar's top colour is tint colour, lower layer is background colour, so if i set the tint colour to clear, the background colour is shown. However, on ios7.1, it seems like there are some new dark grey layer over background colour. – Honghao Z Mar 11 '14 at 06:14
I also facing same problem, and the solution which I figured out is to hide your Navigationbar and add a simple view(of same size) instead of it and add search-bar and other controls on it and change the color of view of your desire it also not affected the statusbar. – Irfan Mar 11 '14 at 06:17
OK, I'll try it, but I'm not sure this will work, since the incorrect colour should belong to searchBar, the navigationBar is below the searchBar. Maybe we need to figure out the layer stack of searchBar – Honghao Z Mar 11 '14 at 06:27
I am hopeful it will resolve your problem :) as my also resolved. Thanks – Irfan Mar 11 '14 at 06:46
1

also check out these link too: http://stackoverflow.com/questions/19048766/uisearchbar-text-color-change-in-ios-7 http://stackoverflow.com/questions/13817330/how-to-change-inside-background-color-of-uisearchbar-component-on-ios – Irfan Mar 11 '14 at 06:49
1

Irfan, I've fix it by using an abnormal way, even though I don't think this is a good way to fix it. My answer will be below my question – Honghao Z Mar 11 '14 at 14:35
Ohhh that great that your problem is solved :-) If you found my provided info little bit helpful in resolving and figure out your problem then kindly accept and upvote my answer so it will may be helpful to others and it will be highly appreciated. Thanks cheers :-) – Irfan Mar 11 '14 at 19:13

score 2 · Answer 2 · answered Nov 03 '14 at 19:17

None of the above answers worked for me on iOS 7/8. Here's some setup code that did the trick:

searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame), 44)];
searchBar.scopeButtonTitles = @[@"Scope1", @"Scope2"];
searchBar.selectedScopeButtonIndex = 0;
searchBar.backgroundColor = [UIColor clearColor];
searchBar.barTintColor = [UIColor clearColor];
searchBar.translucent = YES; // SUPER IMPORTANT, REMOVING THIS MESSED UP THE SCOPE BAR

// ONLY USE IMAGES, NOT BACKGROUND COLORS
UIImage *searchBarBackgroundImage = [[UIImage imageNamed:@"SearchBarBackgroundImage"];
UIImage *scopeBarBackgroundImage = [[UIImage imageNamed:@"ScopeBarBackgroundImage"];
[searchBar setBackgroundImage:searchBarBackgroundImage
               forBarPosition:UIBarPositionAny
                   barMetrics:UIBarMetricsDefault];
searchBar.scopeBarBackgroundImage = scopeBarBackgroundImage;
searchBar.tintColor = [UIColor whiteColor];

this code doesn't allow to change the textcolor of the UITextField. Have you solved that? — itinance, Apr 25 '15 at 16:08

score 0 · Answer 3 · edited May 23 '17 at 11:59

I used next approach for changing backgroundColor of searchBar

1.As suggested by @Ben Jackson - set BackgroundImage

[self.searchBar setBackgroundImage:[self imageWithColor:[UIColor blueColor]] forBarPosition:UIBarPositionAny
                        barMetrics:UIBarMetricsDefault];

2.Change textField to what u need according to design

NSArray *searchBarSubViews = [[self.searchBar.subviews objectAtIndex:0] subviews];
for( int i = 0; i < searchBarSubViews.count; i++) {
    if([[searchBarSubViews objectAtIndex:i] isKindOfClass:[UITextField class]]) {
        UITextField *searchTextField = (UITextField *)[searchBarSubViews objectAtIndex:i];
        [searchTextField setTintColor:[UIColor blueColor]];
        searchTextField.placeholder = @"Search";
        searchTextField.backgroundColor = [UIColor whiteColor];
        searchTextField.layer.borderColor = [UIColor blueColor].CGColor;
        searchTextField.layer.borderWidth = 1.0f;
        searchTextField.layer.cornerRadius = 8.0f;
        searchTextField.leftViewMode = UITextFieldViewModeNever;
    }
}

Also method for image from color - here

Result:

Colour changed in iOS7.1, how to change searchBar colour?

3 Answers3

Linked