clear color background nav bar, but still float above all the contents

Question

I am a new iOS developer, i found some apps that can have a totally transparent nav bar, but still float above all the content, such as the app has a very nice background picture, and the nav bar is transparent, so you can see the entire background, but there is a scroll view on the navigation view controller. when scroll, it still goes under the nav bar.

when i try it, i set up my nav bar background as transparent like this

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

but my scroll view will be totally visible when it goes under nav bar. I don't like that, does any one know how to make the nav bar transparent but still kind of floating on everything?

Thank you guys for the reputations, here is a screen shot from Yahoo weather their nav bar does exactly what i want.

But when i set the clear background to it, it becomes like this.

Answer 1

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

I am inspired by BTGlassScrollView (https://github.com/BTLibrary/BTGlassScrollView) the approach i am using have several steps:

1.> set up your navigation controller like this:

• Put your background image view first
• Then add a wrapper view for your scroll view, and set the wrapper view background as Transparent (this wrapper view is very important, we have to fake the effect on this wrapper view)
• drag your scroll view into the wrapper view, and set your scroll view background as Transparent as well.

2.> set up all the outlets for scroll view, wrapper view and background image view

3.> You might also want to hide the nav bar shadow image, here is the code, just in case if 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 for this method is to create a mask layer with a clear to white gradient on it.

5.> last step, simply add that to your wrapperView.layer.mask 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];

The wrapper view is the key in this case, the nav bar won't work without it. and remember DO NOT put the background image view into the wrapper view, they should be on the same level, but background image under the wrapper view.

This is a very rough mock ups, but hope this gives you some ideas.