iOS7, backgroundImage for UISearchBar

Question

I'm making the transition of the UI between iOS 6 and iOS 7.

We have a UISearchBar related to a UISearchDisplayController, I have set the backgroundImage of the navigationBar and the searchBar to a 1x1 image dynamically created with a color.

self.searchDisplayController.searchBar.translucent = NO;
self.searchDisplayController.searchBar.barTintColor = [UIColor clearColor];
self.searchDisplayController.searchBar.tintColor = [UIColor myTintColor];
self.searchDisplayController.searchBar.backgroundImage = [self imageWithColor:[UIColor myBGColor]];
self.searchDisplayController.searchBar.scopeBarBackgroundImage = [self imageWithColor:[UIColor myBGColor]];

On iOS6, everything works as expected. On iOS7, when the searchBar is selected, the scopeBar appears with the good backgroundImage (set with searchBar.scopeBarBackgroundImage) but the searchBar is a kind of translucent gray. When I press on Cancel, the searchBar backgroundImage is back.

How it looks

/////////////////////////////////////////////////////////////////////////////////////////////////////

EDITED QUESTION

/////////////////////////////////////////////////////////////////////////////////////////////////////

Actually, I did use the barTintColor and other options here and there but it doesn't work. That is the result with the barTintColor set with the same color. But there is this white layer on top enter image description here

aksh1t · Accepted Answer · 2017-08-08T16:56:05.857

41

In iOS 7, the properties backgroundImage and scopeBarBackgroundImage no longer work as expected and become translucent.

The following method has been introduced in iOS 7 which addresses this problem. (Docs here)

setBackgroundImage:forBarPosition:barMetrics:

Here's what you should do :

 [self.searchDisplayController.searchBar setBackgroundImage:[self imageWithColor:[UIColor yourColor]] 
                                             forBarPosition:0 
                                                 barMetrics:UIBarMetricsDefault];

Here, barPosition : 0 is UIBarPositionAny.

Edit:

Swift code:

self.searchDisplayController.searchBar.setBackgroundImage(self.image(color: UIColor.yourColor), for: UIBarPosition(rawValue: 0)!, barMetrics:.default)

edited Aug 08 '17 at 16:56

answered Nov 14 '13 at 11:22

aksh1t

5,410
1
37
55

1

Thanks for the help but unfortunately it doesn't change! – Geraud.ch Nov 18 '13 at 13:30
1

Check out the edited answer and tell me if it works! – aksh1t Nov 19 '13 at 05:46
You made it! Thanks a lot!! – Geraud.ch Nov 19 '13 at 07:52
I 've been looking for ages, this answer helps a lot! – alexzg Jul 02 '14 at 22:45
spend half a day - you really save my time! – hbk Sep 30 '14 at 10:24

score 4 · Answer 2 · answered Nov 14 '13 at 11:20

4

I was able to replicate what you were trying to do and it seems to work for me if I set the barTintColor to my color choice.

I'd suggest trying:

self.searchDisplayController.searchBar.barTintColor = [UIColor myBGColor];

I did [UIColor redColor] and got the results I expected.

answered Nov 14 '13 at 11:20

Mike Z

4,121
2
31
53

I edited my question with the screenshot of the result. It's not what I expect, did you have the same result? – Geraud.ch Nov 18 '13 at 13:30
It shouldn't be doing what you are showing if you have `translucent` set to `NO` as it appears you do. It looks like you are using an image for your color, have you tried just using a solid color, such as `[UIColor blueColor]` – Mike Z Nov 18 '13 at 16:38

score 0 · Answer 3 · answered Nov 14 '13 at 11:31

0

If you set the barTintColor property of your search bar, you will get what you are expecting. I've just tried this and it works:

self.searchDisplayController.searchBar.barTintColor = [UIColor yellowColor];

Keep in mind that barTintColor property was introduced in iOS 7.

answered Nov 14 '13 at 11:31

amb

4,798
6
41
68

Thanks for the help. I edited my question with the screenshot of the result. It's not what I expect, did you have the same result? – Geraud.ch Nov 18 '13 at 13:31
There isn't a white layer, its looking that way because it is translucent. Try this ``self.searchDisplayController.searchBar.translucent = NO;`` – amb Nov 18 '13 at 15:11
Unfortunately, it's already the case. It seems that this searchBar is broken – Geraud.ch Nov 18 '13 at 15:23
I'm seeing the same thing. `UISearchBar` doesn't seem to respect its `translucent` property. – Jamie Forrest May 08 '14 at 18:59

score 0 · Answer 4 · answered Apr 16 '18 at 07:13

Since there is no current Swift version, I'll just leave this here for future use, as I have been struggling with it for pretty long time as well.

get yourself 1px image with desired color (even clear)
set it as a backgroundImage using:

searchController.searchBar.setBackgroundImage(UIImage(named: "red"), for: .any, barMetrics: .default)

iOS7, backgroundImage for UISearchBar

4 Answers4

Linked