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

Question

如何在iOS 7中为我的半透明导航栏获得正确的颜色？导航栏只是将给定的颜色调整为更亮的颜色。改变颜色的亮度或饱和度也无法提供正确的结果。

有人遇到同样的麻烦吗？它似乎以某种方式工作，看着Facebook：他们有自己的颜色和半透明的导航栏。

编辑：只是为了说清楚：我需要条形图是半透明的，不透明的（带有一些alpha），而不是固体！ http://en.wikipedia.org/wiki/Transparency_and_translucency

编辑：现已发布到Apple BugReporter

Answer 1

条形图将调整您的颜色值。

首选方法，仅针对RGB＆gt; = 40，将提供最模糊的

您可以使用此计算器并在屏幕上呈现您想要的颜色，它会告诉您如何设置barTintColor的颜色，因此当Apple调整它时，它将显示为预期

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

编辑：请注意，这些计算适用于白色背景，对于较浅的颜色（rgb超过40，如果您需要更暗，则需要像其他人提到的那样添加背景图层 - 尽管这会减少条纹的模糊）

替代黑暗的底层视图，例如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]];

Answer 2

您只需更改translucent属性

即可

navigationBar.translucent = NO;

它实际上与删除/制作导航栏的透明子视图/子图层相同。

Answer 3

我在我的分叉Achieving bright, vivid colors for an iOS 7 translucent UINavigationBar

中改进了https://github.com/allenhsu/CRNavigationController的代码

通过我的修改，屏幕上的结果颜色（在白色背景上选取）将与传递到setBarTintColor的值完全相同。我认为这是一个了不起的解决方案。

Answer 4

我知道这个答案有点晚了，但是如果您使用的是Interface Builder，则在使用十六进制值时可能会出现错误的颜色，因为Interface Builder设置为使用错误的颜色空间。在Xcode 6.4中，您可以按颜色选择器对话框右上角的小齿轮来选择您正在使用的颜色空间：

当我实际应该使用Generic RGB时，我的设置为sRGB IEC6196-2.1。

Answer 5

如果您的颜色不是特别鲜艳，您可以计算相应的颜色w / alpha。这适用于iOS 7.0.3+;在7.0.3之前，它会自动应用0.5 alpha。

此代码假定您的输入颜色为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;
}

如果有人有一种更优雅的方式来计算alpha（我正在那个do-while循环），我很乐意看到它：https://gist.github.com/sgtsquiggs/7206385

Answer 6

只需使用这个简单的barTintColor计算器：

http://htmlpreview.github.io/?https://github.com/tparry/Miscellaneous/blob/master/UINavigationBar_UIColor_calculator.html

Answer 7

简单/快速的解决方案对我有用。 只需在故事板中设置条形色调而不是背景。

首先在导航控制器中选择导航栏

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

您可以选择预定义的颜色或单击颜色将其设置为其他颜色。

Answer 8

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

例如，对于rgb: 65,96,156或#41609c的Facebook颜色，最佳颜色为#21458c。以下代码仅使用原生可可触摸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];

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

我制作了一个BarTintColorOptimizer实用程序，应该在设备上运行，以便为您输入的任何颜色搜索优化的条形颜色。

Answer 9

我想你已经阅读了上面的所有评论。如果你想获得自定义背景＆amp;半透明你应该覆盖导航栏类并实现自己的layoutsubviews方法。在这里简单添加额外的子视图。重要提示：您应将其添加到NavigationBar的背景子视图上方。如果您只是将其放在所有子视图上方，它将隐藏您的标题或按钮。

另外，请查看this question

Answer 10

我环顾了很多，但实际上这些都不对我有用，解决方法如下：

1-设置导航 barTintColor （背景）。

2-运行模拟器并打开您的应用，在Mac中打开数字色度计，然后选择下拉菜单“以通用RGB显示”。

3-使用此工具可以选择要为视图设置的导航颜色。

4-转到情节提要，然后选择背景色，并确保其在RGB滑块上，然后将其放入此处，您将获得与导航栏完全相同的颜色。

注意：：是否打开或关闭isTranslucent。

希望这对您有所帮助。

Answer 11

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

Answer 12

通过比较之前的颜色，我发现饱和度下降了21％，而Hue和Brightness保持不变。

通过重新添加21％，我能够显着改善颜色匹配。不幸的是，我们的颜色开始时的饱和度超过80，所以将其推高到100％以上会有收益递减，并且没有完全匹配，但它更接近。

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

有关如何调整颜色饱和度的信息How can I modify a UIColor's hue, brightness and saturation?

Answer 13

如果你正在使用swift 2.0，你可以使用它，这将消除模糊并正确显示颜色。

UINavigationBar.appearance().translucent = false

Answer 14

我已经扩展了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完成了工作，但你可以使用它。

Answer 15

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来获取所需的确切颜色。此外，当然颜色取决于您的内容视图的背景颜色（例如白色）。

Answer 16

要使色调颜色看起来更暗，您可以更改导航栏的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来实现适合您的效果。其他任何东西都会与框架作斗争。

Answer 17

这应该有效：

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

取自here

Answer 18

这对我有用：

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

Answer 19

尝试为导航栏渲染相应的背景图像。这适用于我的测试应用程序。

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

Answer 20

这是因为navigationBar.translucent == YES。将此属性设置为NO，它将是正确的颜色。但是，我还没有找到如何将这个半透明设置应用于所有导航栏而不在每个导航栏上明确调用它。状态栏也保持与导航栏相同的颜色。