在iOS7半透明导航栏中获取正确的颜色

如何才能在iOS 7中为我的半透明导航栏添加正确的颜色? 导航栏只是将给定的颜色调整得更亮一些。 改变颜色的亮度或饱和度也不能提供正确的结果。

任何人都有同样的麻烦? 看起来似乎在某种程度上工作,看着Facebook:他们有他们的颜色和半透明的导航栏。

编辑:只是为了说清楚:我需要酒吧是半透明的,不透明(与一些阿尔法),而不是固体! http://en.wikipedia.org/wiki/Transparency_and_translucency

编辑:现在发布到Apple BugReporter

酒吧会调整你的颜色值。

首选的方法,仅适用于RGB> = 40,将给出最多的模糊

你可以使用这个计算器,并在屏幕上显示你想要的颜色时,它会告诉你如何设置barTintColor的颜色,所以当苹果调整它,它会显示为预期

http://b2cloud.com.au/how-to-guides/bar-color-calculator-for-ios7-and-ios8/

编辑:请注意,这些计算是为白色背景,如果颜色较浅(rgb超过40,如果您需要较深,您将需要添加像其他人提到的背景层 – 虽然这将减less酒吧的模糊)

交替的深色衬底视图,例如Facebook的深蓝色:(65,96,156) http://img707.imageshack.us/img707/3151/482w.png

深入指导: http : //b2cloud.com.au/how-to-guides/custom-uinavigationbar-colors-in-ios7

片段:

@interface UnderlayNavigationBar : UINavigationBar @end 

 @interface UnderlayNavigationBar () { UIView* _underlayView; } - (UIView*) underlayView; @end @implementation UnderlayNavigationBar - (void) didAddSubview:(UIView *)subview { [super didAddSubview:subview]; if(subview != _underlayView) { UIView* underlayView = self.underlayView; [underlayView removeFromSuperview]; [self insertSubview:underlayView atIndex:1]; } } - (UIView*) underlayView { if(_underlayView == nil) { const CGFloat statusBarHeight = 20; // Make this dynamic in your own code... const CGSize selfSize = self.frame.size; _underlayView = [[UIView alloc] initWithFrame:CGRectMake(0, -statusBarHeight, selfSize.width, selfSize.height + statusBarHeight)]; [_underlayView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)]; [_underlayView setBackgroundColor:[UIColor colorWithRed:0.0f green:0.34f blue:0.62f alpha:1.0f]]; [_underlayView setAlpha:0.36f]; [_underlayView setUserInteractionEnabled:NO]; } return _underlayView; } @end 

 UIViewController* rootViewController = ...; UINavigationController* navigationController = [[UINavigationController alloc] initWithNavigationBarClass:[UnderlayNavigationBar class] toolbarClass:nil]; [navigationController.navigationBar setBarTintColor:[UIColor colorWithRed:0.0f green:0.0f blue:90.0f/255.0f alpha:1]]; [navigationController setViewControllers:@[rootViewController]]; 

你只需要改变translucent属性

 navigationBar.translucent = NO; 

这与删除/制作导航栏的透明子视图/子图层是一样的。

我已经改进了代码:在我的fork中为iOS 7半透明的UINavigationBar实现鲜明生动的颜色 : https : //github.com/allenhsu/CRNavigationController

随着我的修改,屏幕上的结果颜色(在白色背景上挑选)将完全相同的值传递给setBarTintColor。 我认为这是一个了不起的解决scheme。

如果你的颜色不是特别鲜明,你可以计算出相等的颜色瓦特/阿尔法。 这适用于iOS 7.0.3+; 在7.0.3之前,它会自动应用一个0.5 alpha。

这段代码假设你的input颜色是RGB而且是不透明的,而且你的背景颜色是白色的:

 - (UIColor *) colorByInterpolatingForBarTintWithMinimumAlpha: (CGFloat) alpha { NSAssert(self.canProvideRGBComponents, @"Self must be a RGB color to use arithmatic operations"); NSAssert(self.alpha == 1, @"Self must be an opaque RGB color"); CGFloat r, g, b, a; if (![self getRed:&r green:&g blue:&b alpha:&a]) return nil; CGFloat r2,g2,b2,a2; r2 = g2 = b2 = a2 = 1; CGFloat red,green,blue; alpha -= 0.01; do { alpha += 0.01; red = (r - r2 + r2 * alpha) / alpha; green = (g - g2 + g2 * alpha) / alpha; blue = (b - b2 + b2 * alpha) / alpha; } while (alpha < 1 && (red < 0 || green < 0 || blue < 0 || red > 1 || green > 1 || blue > 1)); UIColor *new = [UIColor colorWithRed:red green:green blue:blue alpha:alpha]; return new; } 

如果任何人有一个更优雅的方式来计算阿尔法(我正在徘徊在那个做while循环)我很想看到它: https : //gist.github.com/sgtsquiggs/7206385

我知道这个答案有点迟,但是如果你使用的是Interface Builder,当使用hex值时,你可能会得到错误的颜色,因为Interface Builder被设置为使用错误的颜色空间。 在Xcode 6.4中,您可以按下颜色select器对话框右上angular的小齿轮来select您正在使用的颜色空间:

在这里输入图像说明

矿被设置为sRGB IEC6196-2.1,当我实际上应该已经使用通用RGB。

我想你已经阅读了上面所有的评论。 如果你想获得自定义的背景和半透明性,你应该重载导航栏类并实现你自己的layoutsubviews方法。 在这里简单的添加子视图。 重要提示:您应该将其添加到NavigationBar的背景子视图上方。 它会隐藏你的标题或button,如果你只是把它放在所有子视图之上。

另外,看看这个问题

简单/快速的解决scheme,为我工作。 只需在故事板而不是背景中设置条形色调即可。

首先在您的导航控制器中select您的导航栏
导航栏

然后单击右侧的属性检查器,然后设置条形色调
酒吧色调

您可以select预定义的颜色或单击颜色将其设置为其他颜色。
在这里输入图像说明

要使色调颜色看起来更暗,可以更改导航栏的backgroundColor:

 UIColor *color1 = [UIColor colorWithRed:55.0f/256.0f green:0.0f blue:1.0f alpha:1.0f]; [navBar setBarStyle:UIBarStyleBlackTranslucent]; [navBar setBarTintColor:color1]; UIColor *color2 = [UIColor colorWithWhite:0 alpha:0.3]; [navBar setBackgroundColor:color2]; 

尝试使用color1和color2来实现适合您的结果。 其他任何事情都会与框架作斗争。

 navBar.barTintColor = [UIColor orangeColor]; navBar.translucent = YES; UIColor *backgroundLayerColor = [[UIColor redColor] colorWithAlphaComponent:0.7f]; static CGFloat kStatusBarHeight = 20; CALayer *navBackgroundLayer = [CALayer layer]; navBackgroundLayer.backgroundColor = [backgroundLayerColor CGColor]; navBackgroundLayer.frame = CGRectMake(0, -kStatusBarHeight, navBar.frame.size.width, kStatusBarHeight + navBar.frame.size.height); [navBar.layer addSublayer:navBackgroundLayer]; // move the layer behind the navBar navBackgroundLayer.zPosition = -1; 

请注意,您仍然需要使用barTintColor和backgroundLayerColor来获取所需的确切颜色。 另外,当然颜色取决于你的内容视图的背景颜色(如白色)。

我已经扩展了UINavigationController,
在其viewDidLoad,我已经添加了相同颜色的色调的背景。

此外,我已经设置了背景框架来覆盖状态栏区域:

  self.navigationBar.barTintColor = navBackgroundColor; CGRect bgFrame = self.navigationBar.bounds; bgFrame.origin.y -= 20.0; bgFrame.size.height += 20.0; UIView *backgroundView = [[UIView alloc] initWithFrame:bgFrame]; backgroundView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; backgroundView.backgroundColor = navBackgroundColor; backgroundView.alpha = 0.6; [self.navigationBar addSubview:backgroundView]; [self.navigationBar sendSubviewToBack:backgroundView]; 

在我的情况下,Alpha 0.6已经完成了这项工作,但是你可以使用它。

这是另一种在iOS 7.x及更高版本中获得半透明导航栏的正确颜色的方法。 对于某些颜色,可以find最佳的条纹色彩,使半透明条出现与所需颜色相匹配的颜色。

例如,对于rgb: 65,96,156#41609c的Facebook颜色,最佳颜色是#21458c 。 以下代码将应用程序中的所有导航栏设置为仅具有本机cocoa触摸API的Facebook颜色:

 UIColor* barColor = [UIColor colorWithRed:0.129995 green:0.273324 blue:0.549711 alpha:1.0]; // #21458c to make bars actual color match the #41609c color. [[UINavigationBar appearance] setBarTintColor:barColor]; 

该方法的唯一限制是不能为每种可能的颜色find优化的颜色。 通常这是不可能的深色。

我制作了一个应该在设备上运行的BarTintColorOptimizer实用工具,以便为您input的任何颜色search优化的条形颜色。

如果你使用的是swift 2.0,你可以使用这个,这将消除模糊,并正确显示颜色。

 UINavigationBar.appearance().translucent = false 

从比较我之前和之后的颜色,我发现饱和度下降了21%,而色调和亮度保持不变。

通过添加21%,我能够显着改善颜色匹配。 不幸的是,我们的颜色饱和度超过80%,以100%以上的收益递减,并没有完美匹配,但它更接近。

对于饱和度低于80的颜色,应该做得更好。

有关如何调整颜色饱和度的信息如何修改UIColor的色调,亮度和饱和度?

您可以在模拟器中运行应用程序,并使用吸pipe工具获取导航栏的颜色。

在这里输入图像说明

这应该工作:

 UIColor *barColour = [UIColor colorWithRed:0.13f green:0.14f blue:0.15f alpha:1.00f]; UIView *colourView = [[UIView alloc] initWithFrame:CGRectMake(0.f, -20.f, 320.f, 64.f)]; colourView.opaque = NO; colourView.alpha = .7f; colourView.backgroundColor = barColour; self.navigationBar.barTintColor = barColour; [self.navigationBar.layer insertSublayer:colourView.layer atIndex:1]; 

从这里采取

这适用于我:

 CALayer *layer = [CALayer layer]; layer.frame = CGRectMake(0, -20,navigationBar.frame.size.width,navigationBar.frame.size.height + 20); layer.backgroundColor = [[UIColor blueColor] colorWithAlphaComponent:0.75].CGColor; layer.zPosition = -5; [navigationBar.layer addSublayer:layer]; 

发生这种情况是因为navigationBar.translucent == YES。 将此属性设置为NO,它将是正确的颜色。 但是,我还没有find如何将这个半透明的设置应用到所有的导航栏,而不是明确每个导航栏。 状态栏也以这种方式保持与导航栏相同的颜色。

尝试为您的导航栏呈现相应的背景图像。 这对我的testing应用程序有效。

 UIGraphicsBeginImageContext(CGSizeMake(1, 1)); CGContextRef context = UIGraphicsGetCurrentContext(); [[UIColor colorWithRed:55.0f/256.0f green:0.0f blue:1.0f alpha:0.5f] set]; CGContextFillRect(context, CGRectMake(0, 0, 1, 1)); UIImage *navBarBackgroundImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); [[UINavigationBar appearance] setBackgroundImage:navBarBackgroundImage forBarMetrics:UIBarMetricsDefault]; [[UINavigationBar appearance] setBackgroundImage:navBarBackgroundImage forBarMetrics:UIBarMetricsLandscapePhone];