iOS7, backgroundImage for UISearchBar

25
votes

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

4
iosios7uikittransitionsearchbar

4 Answers

41
votes

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)
4
votes

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.

0
votes

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.

0
votes

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.

  1. get yourself 1px image with desired color (even clear)

  2. set it as a backgroundImage using:

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