Remove UINavigationBar background and preserve shadow

Question

Flickr has a gorgeous Settings view controller (even if they put the close button on the wrong side!) and I want to know how I can achieve a similar effect.

Notice the navigation controller does not have a background but it does have a shadow line underneath it to provide separation. The underlying blurred view fills the entire display including underneath the status bar.

How would you achieve that - how could you remove the background of the UINavigationBar? Note you can't simply remove the background because when you scroll the text will appear in the navigation bar.

enter image description here

@TonyMkenu Unfortunately this results in the text showing in the nav controller when you scroll down, but if you tell it not to extend under the top bar the blur effect is not rendered under that area. I need some way to keep the view underneath the top bar but not show anything in the nav bar area when scrolling. — Jordan H, Nov 27 '14 at 01:42

score 0 · Answer 1 · answered Nov 26 '14 at 06:13

0

Use a UILabel instead of navigation bar (they probably do the samething, judging from the height of the bar). The shadow line is just another view, with appropriate background color.

answered Nov 26 '14 at 06:13

Khanh Nguyen

11,112
10
52
65

Surely it's not a fixed label, this interface is scrollable and the header always sticks to the top. – Jordan H Nov 26 '14 at 06:22
You can make a label fixed by intercepting `scrollViewDidScroll` and updating the label's frame accordingly. Or just make it a subview of the scroll view's superview. Or make it a table view's header. I mean there are plenty of ways to achieve the effect without relying on a navigation bar. – Khanh Nguyen Nov 26 '14 at 06:26
Another problem is this interface must support push navigation so there must be a navigation controller. A transparent label would also suffer from the same problem as a transparent nav bar - when you scroll the content would be visible inside the label's bounds. I wonder how Flickr got around that. – Jordan H Nov 27 '14 at 02:49

score 0 · Answer 2 · answered Dec 05 '14 at 04:20

0

Hiding the background image indeed shows the text underneed when scrolling. One way I imagine you can try to achieve this is is not extending the ScrollView to under the NavBar? Another would be to create a background using a snapshot of the initial view, and using this as the background image for the navBar - hope that helps.

answered Dec 05 '14 at 04:20

trdavidson

1,051
12
25

Modifying the scroll view sounds like a nice approach, but I'm not aware of a way you can do that, besides moving the entire view underneath the nav bar which of course won't result in the desired UI. – Jordan H Dec 05 '14 at 05:36

score 0 · Accepted Answer · answered Jul 19 '15 at 18:24

I was able to obtain the desired behavior by first preventing the table view controllers' content from extending underneath the top navigation bar via the Extend Edges option.

To remove the navigation bar's appearance, I made it a Black Translucent bar, then added a new blank image for its background image like so:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)

I then embedded the navigation controller into a container view which is embedded inside a regular view controller, with auto layout constraints set such that the container view fills the view. This allowed me to create the blur effect in the view controller, then remove the background color from table view controllers so that this blur effect can be seen throughout navigation. Here's the setup:

UIViewController
    containerView
        UINavigationController
            UITableViewController ->
            UITableViewController ->
            UITableViewController...

Remove UINavigationBar background and preserve shadow

3 Answers3

Linked