Why is the top of a black translucent UIToolbar different from a black translucent UISearchBar, and how can I make them look the same?

Question

When I add a UIToolbar to a view in XIB, make it Black Translucent style (and not Opaque), it has a 2-pixel black stroke at the top of it. Meanwhile, a Black Translucent style, non-Opaque UISearchBar has a 1-pixel black stroke at the top. These are both positioned at the same place (44px down, right under the navigation bar).

I'd much prefer the 1px black stroke top on the UIToolbar, to match the view with the Search Bar and make it blend more with the navigation bar. Can I achieve this without subclassing the toolbar? For example, is there a way to use a Search Bar and hide the input field?

Answer 1

Why they are different

They are different because they are meant to be placed differently. The toolbar is meant to be placed at the bottom of the screen where the 2px black stroke looks nice.

For example, look at the Mail app (iPhone) and you can see (even though it is not translucent) that the toolbar has a 2px black stroke while the search bar only has a 1px stroke. You also see how they are meant to be placed:

• search bar under the navigation bar
• toolbar at the bottom of the screen.

How you can change them

Neither of these is an elegant solution, sorry.

Draw the toolbar yourself

You could draw the entire view yourself with either Core Graphics or a CAGradientLayer. It will be cumbersome but you can make it look however you like.

Clip the top of the stroke

You could place the toolbar in a 43px view and set clipsToBounds to YES. By positioning the toolbar at (0, -1) the first point/pixel of the stroke will be clipped and won't show up. The toolbar will be one pixel smaller (height = 43), so you would have to make the superviews height 44px and the toolbars height 45px (still at (0,-1)) to make it 44px again. This will change the gradient slightly so the end result will have some other visual effects than just removing the top pixel of the stoke.