Color of the UISearchBar is not the same as the UINavigationBar

Question

I've been looking for an answer for quite some time but couldn't find any that would satisfy me. It's my first question here on StackOverflow and my first real app so I hope that I didn't make any silly mistake that I'd have to be ashamed of.

In my app I have a table with a Search Bar under a Navigation Controller. In the Interface Builder I've set the search bar to match the color of navigation controller. They are exactly the same. Interface Builder

However, when the app is running the search bar is slightly lighter and it has some lines dividing it from the navigation controller.

When I press the search bar the color stays brighter than it should. Also, during the animation you can see white background of the view which doesn't look too good.

I've tried different options, from changing the background to the specified color to setting the backgroundImage to UIImage(). I wasn't able to achieve smooth-looking result. There has to be a way to solve this, perhaps through adding custom layers or direct subclassing but I just wanted to know if there is a simple solution to my problem.

I'm actually using the search bar and search display controller. But it doesn't make any difference. It's also interesting that I didn't really customize any behavior of it. Even when I change the color of a fresh new search bar added to the Storyboard it still displays different color. Is there a behavior that I'm not aware of?

I don't own one unfortunately. But I don't think it's my computers fault, the difference is significant. Like it's mixed with white background underneath — Maciej Kowalski, Mar 16 '16 at 22:06
Can you tell me what color the search bar is? I want to recreate it and see how it looks like on my phone. — Gasim, Mar 16 '16 at 23:33
take a look please at my previous answer https://stackoverflow.com/a/45555462/3472073 — ale_stro, Aug 07 '17 at 20:49

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

Have you tried using a search bar and search display controller. When the user taps on the search bar, it animates up and pushes the nav bar up. You can change the color of it to match the nav bar. You can even programmatically (not in storyboard) add a searchBar within the nav bar to get rid of the color problems.

Here is some code I found from another post that may help!

Try this

var leftNavBarButton = UIBarButtonItem(customView:Yoursearchbar)

self.navigationItem.leftBarButtonItem = leftNavBarButton Update

You keep a lazy UISearchBar property

lazy   var searchBar:UISearchBar = UISearchBar(frame: CGRectMake(0, 0, 200, 20))

In viewDidLoad

searchBar.placeholder = "Your placeholder"
var leftNavBarButton = UIBarButtonItem(customView:searchBar)
self.navigationItem.leftBarButtonItem = leftNavBarButton

If you want to use storyboard just drag your searchbar as a outlet,then replace the lazy property with your outlet searcher

Here is where I got the code from (first answer): Get search bar in navigation bar in Swift

edited May 23 '17 at 10:28

Community

1
1

answered Mar 16 '16 at 22:10

Dan Levy

3,931
4
28
48

I'm actually using the search bar and search display controller. But it doesn't make any difference. It's also interesting that I didn't really customize any behavior of it. Even when I change the color of a fresh new search bar added to the Storyboard it still displays different color. Is there a behavior that I'm not aware of? – Maciej Kowalski Mar 16 '16 at 22:14
@MaciejKowalski When you are setting the color of the nav bar, are you doing it programmatically or through the attributes inspector in the storyboard. Also, is you "Top Bar" set to "Opaque Nav Bar" in the attributes inspector? Last, are you sure you are using the same hex code or are you using the color picker? – Dan Levy Mar 16 '16 at 22:19
Tried both ways to set the color. Tried setting the navigation bar's color to match the search bar. Still doesn't work. And I'm using hex code but I've checked 100x times if it's correct and it is. – Maciej Kowalski Mar 17 '16 at 21:18
@MaciejKowalski At this point, I would delete the view controller and start over with it – Dan Levy Mar 17 '16 at 21:19
Posted a solution that I managed to work out. The "Search display controller" is what was causing trouble. It was deprecated in iOS 8.0. I've swapped it with UISearchController and it looks ok now. – Maciej Kowalski Mar 17 '16 at 21:32
@MaciejKowalski Great! – Dan Levy Mar 17 '16 at 22:04

score 0 · Answer 2 · answered Mar 16 '16 at 22:26

0

I haven't used UISearchBar yet, so this is just a guess, but maybe it has to do with the alpha property of the UISearchBar since it inherits from UIView. Try setting alpha to 1.0 and see what happens :)

answered Mar 16 '16 at 22:26

João Costa

21
2
2

I believe that the default alpha of search bar is 1. And yes, I've tried to change it but it doesn't help at all. – Maciej Kowalski Mar 17 '16 at 21:16

score 0 · Accepted Answer · answered Mar 17 '16 at 21:29

So I continued to look for a solution and I partially found one. It turns out that the "Search bar and search display controller" that we can use in Interface Builder was deprecated in iOS 8.0. And I even made a blank app with just one navigation controller and aforementioned search bar and the color of the latter is always out of place.

I didn't find any solution to that exact problem but managed to change my project a bit. Now I'm using UISearchController added programmatically.

let searchController = UISearchController(searchResultsController: nil)
tableView.tableHeaderView = searchController.searchBar

It looks much much better. BUT to be sure I've checked the colors using OS X stock Colorimeter and they still vary a bit. It has probably something to do with translucence and the background underneath and I will eventually solve this problem but for now it has to stay like that

Color of the UISearchBar is not the same as the UINavigationBar

3 Answers3