Transparent colored nav bar background, but still floats over all content

Question

I’m a new iOS developer, I found several applications that can have a completely transparent navigation bar, but still float over all the content, for example, the application has a very good background image and the navigation bar is transparent, so you can see the whole background, but there is a view Scrolling on the navigation view controller. while scrolling, it is still under the navigation bar.

when I try to do this, I set my background in the navigation bar to be transparent, like this

[self.navigationController.navigationBar setBackgroundImage:[self imageWithColor:[UIColor clearColor]] forBarMetrics:UIBarMetricsDefault]; 

but my scroll view will be fully visible when it goes to the navigation bar. I don’t like it, does anyone know how to make the navigation bar transparent but still floating on everything?

Thanks guys for the reputation, here is a screenshot from the weather on Yahoo when their nav bar does exactly what I want.

But when I set a clean background for it, it becomes like that.

Answer 1

I am not 100% sure how Yahoo did it, but I can fake this effect like this

I am inspired by BTGlassScrollView ( https://github.com/BTLibrary/BTGlassScrollView ), the approach I use has several steps:

1.> configure your navigation controller as follows:

• First select the source image.
• Then add a wrapper view for your scroll view and set the background of the wrapper view to transparent (this wrapper view is very important, we have to fake the effect on this wrapper view).
• drag the scroll view to the wrapper view and set the scroll background as transparent as well.

2.> configure all outputs to view scrolling, view shell and view background image

3.> You can also hide the shadow image in the navigation bar, here is the code, in case you need it

  self.navigationController.navigationBar.shadowImage = [[UIImage alloc] init]; 

4.> Then paste this method into your class

 - (CALayer *)createViewMaskWithSize:(CGSize)size startGradientAt:(CGFloat)start endGradientAt:(CGFloat)end { CAGradientLayer *mask = [CAGradientLayer layer]; mask.anchorPoint = CGPointZero; mask.startPoint = CGPointMake(0.5f, 0.0f); mask.endPoint = CGPointMake(0.5f, 1.0f); mask.colors = @[(id)[UIColor clearColor].CGColor, (id)[UIColor clearColor].CGColor, (id)[UIColor whiteColor].CGColor, (id)[UIColor whiteColor].CGColor]; mask.locations = @[@0.0, @(start/size.height), @(end/size.height), @1.0f]; mask.frame = CGRectMake(0, 0, size.width, size.height); return mask; } 

The purpose of this method is to create a mask layer with a gradient from white to white.

5.> last step, just add this to your wrapperView.layer.mask file, like this

  // 64 in here is the position where the fade effect should start, and 80 is where the gradien should end // you can change those 2 numbers and see different effects self.scrollViewWrapperView.layer.mask = [self createViewMaskWithSize:self.scrollViewWrapperView.frame.size startGradientAt:64 endGradientAt:80]; 

In this case, the key shell is the key, the navigation bar will not work without it. and remember that DO NOT put the background image in the wrapper, they should be on the same level, but the background image in the wrapper.

These are very crude layouts, but hope this gives you some ideas.