清晰的颜色背景导航栏，但仍然浮在所有内容之上 [英] clear color background nav bar, but still float above all the contents

问题描述

我是一个新的iOS开发者，我发现一些应用程序可以拥有一个完全透明的导航栏，但仍然浮在所有内容之上，例如应用程序有一个非常漂亮的背景图片，导航栏是透明的，所以您可以看到整个背景，但导航视图控制器上有一个滚动视图。当滚动时，它仍然在导航栏下。

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.

推荐答案

我不是百分百确定雅虎是如何做到的，但我可以伪造这样的效果

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

我的灵感来自BTGlassScrollView（ https：// github .com / BTLibrary / BTGlassScrollView ）我使用的方法有几个步骤：

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

1.>设置你的导航控制器如下： / strong>

1.> set up your navigation controller like this:

• 首先放置背景图像视图


• 然后为滚动视图添加包装器视图，并将包装器视图背景设置为透明（此包装器视图非常重要，我们必须伪造对此包装器视图的影响）


• 将滚动视图拖动到包装器视图中，并将滚动视图背景设置为透明。

2.>设置滚动视图，包装视图和背景图像视图的所有插座

3。 >您可能还想隐藏导航栏阴影图像，这里是代码，以防万一你需要它

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

4.>然后将此方法粘贴到您的班级

- (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.>最后一步，只需将它添加到你的wrapperView.layer.mask

    // 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];

在这种情况下，包装器视图是关键，如果没有，导航栏将无效它。并且记住不要将背景图像视图放入包装器视图中，它们应该在同一级别上，而是在包装器视图下的背景图像。

这是一个非常粗略的模拟，但希望这给你一些想法。

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

这篇关于清晰的颜色背景导航栏，但仍然浮在所有内容之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！