为iOS 7半透明UINavigationBar实现明亮生动的色彩

iOS 7.1更新：在此更新中，似乎已忽略了用于修改UINavigationBar中的Alpha通道的解决方法。目前，最好的解决方案似乎是“处理”，并希望您选择的任何颜色都能呈现半透明的效果。我仍在研究解决此问题的方法。

iOS 7.0.3更新：使用iOS 7.0.3时，我们创建的GitHub库已更新为可以稍微解决此问题。不幸的是，没有一种魔术公式可以支持在iOS 7.0.2和更低版本以及iOS 7.0.3中创建的两种颜色。好像苹果公司提高了饱和度，但是却以不透明度为代价（因为模糊的半透明性取决于不透明度）。我和其他一些人正在努力为此创建更好的解决方案。

我敢肯定，很多人已经遇到了iOS 7倾向于使半透明的UINavigationBar的颜色不饱和的问题。

我的目标是使用这种色调但半透明的颜色实现UINavigationBar：

但是，半透明，我明白了。背景视图为白色，据我所知，它将使该视图更浅：

有什么方法可以在保持半透明的同时获得原始颜色？我注意到Facebook能够使其条形成为其丰富的蓝色，如下所示：

..所以我知道一定有办法。背景视图显然在这里有所不同，但是它们的大多数内容也是灰色/白色。看来，无论您使用什么颜色，您都无法在半透明状态下获得鲜艳的色彩。

更新了解决方案。

这是我最终想到的解决方案。我采用了aprato的解决方案，然后将该自定义包含UINavigationBar在一个UINavigationController子类中。我创建了一个存储库，该存储库在下面列出了此实现以及一个示例应用程序。

////////////////////////////
// CRNavigationBar.m
////////////////////////////

#import "CRNavigationBar.h"

@interface CRNavigationBar ()
@property (nonatomic, strong) CALayer *colorLayer;
@end

@implementation CRNavigationBar

static CGFloat const kDefaultColorLayerOpacity = 0.5f;
static CGFloat const kSpaceToCoverStatusBars = 20.0f;

- (void)setBarTintColor:(UIColor *)barTintColor {
    [super setBarTintColor:barTintColor];
    if (self.colorLayer == nil) {
        self.colorLayer = [CALayer layer];
        self.colorLayer.opacity = kDefaultColorLayerOpacity;
        [self.layer addSublayer:self.colorLayer];
    }
    self.colorLayer.backgroundColor = barTintColor.CGColor;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    if (self.colorLayer != nil) {
        self.colorLayer.frame = CGRectMake(0, 0 - kSpaceToCoverStatusBars, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds) + kSpaceToCoverStatusBars);

        [self.layer insertSublayer:self.colorLayer atIndex:1];
    }
}

@end

////////////////////////////
// CRNavigationController.m
////////////////////////////

#import "CRNavigationController.h"
#import "CRNavigationBar.h"

@interface CRNavigationController ()

@end

@implementation CRNavigationController

- (id)init {
    self = [super initWithNavigationBarClass:[CRNavigationBar class] toolbarClass:nil];
    if(self) {
        // Custom initialization here, if needed.    
    }
    return self;
}

- (id)initWithRootViewController:(UIViewController *)rootViewController {
    self = [super initWithNavigationBarClass:[CRNavigationBar class] toolbarClass:nil];
    if(self) {
        self.viewControllers = @[rootViewController];
    }

    return self;
}

@end

iOS 7.0.3更新：如您所见，以上7.0.3更改了某些内容。我已经更新了要点。希望随着人们的升级，这种情况将消失。

原始答案： 我最终遭到黑客攻击，将其他两个答案结合在一起。我对UINavigationBar进行了子类化，并在后面添加了一层额外的空间来覆盖各种高度状态栏中的任何一条。每当设置barTintColor时，都会在布局子视图中调整图层，并且颜色也会更改。

要点：https : //gist.github.com/aprato/6631390

setBarTintColor

  [super setBarTintColor:barTintColor];
  if (self.extraColorLayer == nil) {
    self.extraColorLayer = [CALayer layer];
    self.extraColorLayer.opacity = self.extraColorLayerOpacity;
    [self.layer addSublayer:self.extraColorLayer];
  }
  self.extraColorLayer.backgroundColor = barTintColor.CGColor;

layoutSubviews

  [super layoutSubviews];
  if (self.extraColorLayer != nil) {
    [self.extraColorLayer removeFromSuperlayer];
    self.extraColorLayer.opacity = self.extraColorLayerOpacity;
    [self.layer insertSublayer:self.extraColorLayer atIndex:1];
    CGFloat spaceAboveBar = self.frame.origin.y;
    self.extraColorLayer.frame = CGRectMake(0, 0 - spaceAboveBar, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds) + spaceAboveBar);
  }

在iOS 7.0上，酒吧的tintColor行为已更改。它不再影响条形的背景，并且行为与添加到UIView的tintColor属性相同。要设置彩条的背景色，请使用-barTintColor。您可以使用以下代码使该应用程序同时适用于ios6和ios7。

if(IS_IOS7)
{
    self.navigationController.navigationBar.barTintColor = [UIColor blackColor];
    self.navigationController.navigationBar.translucent = NO;
}
else
{
    self.navigationController.navigationBar.tintColor = [UIColor blackColor];
}

IS_IOS7是在pch文件中定义的宏，如下所示。

#define IS_IOS7 ([[UIDevice currentDevice].systemVersion floatValue] >= 7.0)

我没有提出这个解决方案，但它似乎工作得很好。我只是将其添加到UINavigationController的子类上的viewDidLoad中。

资料来源：https : //gist.github.com/alanzeino/6619253

// cheers to @stroughtonsmith for helping out with this one

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

一种低保真方法可能是将UIView导航栏的高度固定到导航栏后面视图顶部的高度。使该视图与导航栏具有相同的颜色，但是使用alpha播放直到获得所需的效果：

UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.navigationController.navigationBar.frame), 64)];
    backgroundView.backgroundColor = [UIColor colorWithRed:0.0 green:0.0 blue:1 alpha:.5];

[self.navigationController.view insertSubview:backgroundView belowSubview:self.navigationController.navigationBar];

UIView背后

（将颜色从较低的示例更改为强调透明度。在移动时，透明度/模糊更加明显。）

UINavigationBar将其子类化，并将相同的视图置于背景之上，但置于其他所有事物的后面，可能会获得相似的结果，同时又不那么笨拙。

我见过的另一种解决方法是使用alpha UINavigationBar：

self.navigationController.navigationBar.alpha = 0.5f;

编辑：实际上，经过测试，似乎这没有提供预期的行为（或任何行为）：

.8 alpha

未经调整的Alpha

显然，您只想在iOS 7设备上执行此操作。因此，在实现其中任何一个之前，请添加一些版本检查。

不要使用RGB格式创建UIColor对象，而应使用HSB并增加饱和度参数。（学分到山姆Soffes谁介绍这种方法在这里）

navigationBar.barTintColor = [UIColor colorWithHue:0.555f saturation:1.f brightness:0.855f alpha:1.f];

注意：此解决方案是一个折衷方案，不适用于具有高饱和度的颜色。

要从设计中选择HSB颜色，可以使用ColorSnapper之类的工具，该工具可让您简单地复制UIColor HSB格式。

您也可以尝试使用David Keegan的UIColor Category（GitHub链接）来修改现有颜色。

现在，该问题已由Apple在新的7.0.3版本中修复。

我用@ aprato的解决方案，但发现其中来自新的VC的新层（例如，几拐角情况UINavigationItemButtonViews，UINavigationItemViews等等）将被自动地插入到下面的一个位置extraColorLayer（这将导致由受影响的那些标题或按钮元素extraColorLayer，因此颜色比平时更暗）。因此，我调整了@aprato的解决方案，以将extraColorLayer其保持在索引位置1。在索引位置1，该位置extraColorLayer保持在的正上方_UINavigationBarBackground，但在其他所有位置的下方。

这是我的课程实现：

- (void)setBarTintColor:(UIColor *)barTintColor
{
    [super setBarTintColor:barTintColor];
    if (self.extraColorLayer == nil)
    {
        self.extraColorLayer = [CALayer layer];
        self.extraColorLayer.opacity = kDefaultColorLayerOpacity;
        [self.layer insertSublayer:self.extraColorLayer atIndex:1]; // This way the text comes out clear
    }
    self.extraColorLayer.backgroundColor = barTintColor.CGColor;
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    if (self.extraColorLayer != nil)
    {
        self.extraColorLayer.frame = CGRectMake(0, 0 - kSpaceToCoverStatusBars, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds) + kSpaceToCoverStatusBars);
    }
}

- (void)insertSubview:(UIView *)view aboveSubview:(UIView *)siblingSubview
{
    [super insertSubview:view aboveSubview:siblingSubview];
    [self.extraColorLayer removeFromSuperlayer];
    [self.layer insertSublayer:self.extraColorLayer atIndex:1]; // This way the text comes out clear
}

- (void)insertSubview:(UIView *)view atIndex:(NSInteger)index
{
    [super insertSubview:view atIndex:index];
    [self.extraColorLayer removeFromSuperlayer];
    [self.layer insertSublayer:self.extraColorLayer atIndex:1]; // This way the text comes out clear
}

- (void)insertSubview:(UIView *)view belowSubview:(UIView *)siblingSubview
{
    [super insertSubview:view belowSubview:siblingSubview];
    [self.extraColorLayer removeFromSuperlayer];
    [self.layer insertSublayer:self.extraColorLayer atIndex:1]; // This way the text comes out clear
}

我已经改进了您的代码：https : //github.com/allenhsu/CRNavigationController

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

这些hack都不是必需的:)。只需设置：

self.navigationController.navigationBar.translucent = NO;

对于iOS 7，默认半透明设置为TRUE。

在相关注释上，您可以通过以下方式轻松设置标题文本的颜色（带有阴影）：

NSShadow *titleShadow = [[NSShadow alloc] init];
titleShadow.shadowOffset = CGSizeMake(0.0f, -1.0f);
titleShadow.shadowColor = [UIColor blackColor];
NSDictionary *navbarTitleTextAttributes = @{NSForegroundColorAttributeName: [UIColor whiteColor],
                                            NSShadowAttributeName: titleShadow};
[[UINavigationBar appearance] setTitleTextAttributes:navbarTitleTextAttributes];

我在尝试在iOS 7上设置透明度禁用的统一导航栏时遇到了此问题。

在尝试使用barTintColor一段时间之后，我发现具有不透明导航栏的一种非常简单的方法是制作所需颜色的单个像素图像，从中制作可拉伸的图像，并将其设置为导航栏的backgroundImage 。

UIImage *singlePixelImage = [UIImage imageNamed:@"singlePixel.png"];
UIImage *resizableImage = [singlePixelImage resizableImageWithCapInsets:UIEdgeInsetsZero];
[navigationBar setBackgroundImage:resizableImage forBarMetrics:UIBarMetricsDefault]; 

三行代码，非常简单，可同时在iOS 6和iOS 7上使用（iOS 6不支持barTintColor）。

Simon Booth提供了很棒的Dropin UINavigationController替代品，可从GitHub此处获得 GitHub-C360NavigationBar

如果您向后支持iOS6，请像下面这样检查根视图控制器：

PatientListTableViewController * frontViewController = [[PatientListTableViewController alloc] init];

    UINavigationController *navViewController = [[UINavigationController alloc] initWithNavigationBarClass:[C360NavigationBar class] toolbarClass:nil];
if ([navViewController.view respondsToSelector:@selector(setTintColor:)]) {
    //iOS7
    [navViewController.view setTintColor:self.navBarTintColor];
    [[C360NavigationBar appearance] setItemTintColor:self.navBarItemTintColor];
} else {
    //iOS6
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleBlackOpaque animated:NO];
    navViewController.navigationBar.tintColor = self.navBarTintColor;
}
[navViewController pushViewController:frontViewController animated:NO];

self.window.rootViewController = navViewController;

正如上面提到的 @bernhard可以使条的颜色饱和，以获得所需的导航条外观。

我为这种调整编写了BarTintColorOptimizer实用程序。它优化了半透明的条形颜色，以使条形的实际颜色与iOS 7.x及更高版本中所需的颜色匹配。查看此答案以获取详细信息。

坦白地说，以上答案可能是正确的，但以下技巧对我很轻松。

// this is complete 100% transparent image
self.imageBlack = [[UIImage imageNamed:@"0102_BlackNavBG"] 
           resizableImageWithCapInsets:UIEdgeInsetsMake(0, 2, 0, 2)  
                          resizingMode:UIImageResizingModeStretch];

// this is non-transparent but iOS7 
// will by default make it transparent (if translucent is set to YES)
self.imageRed = [[UIImage imageNamed:@"0102_RedNavBG"] 
         resizableImageWithCapInsets:UIEdgeInsetsMake(0, 2, 0, 2)  
                        resizingMode:UIImageResizingModeStretch];

// some navigation controller
[nvCtrLeft.navigationBar setBackgroundImage:self.imageRed 
                              forBarMetrics:UIBarMetricsDefault];

// some another navigation controller
[nvCtrCenter.navigationBar setBackgroundImage:self.imageRed 
                                forBarMetrics:UIBarMetricsDefault];

这是用于self.imageRed和的图像self.imageBlack。

< >黑色图像在此方括号中将不可见，因为它是透明的:)

< >红色图像在此括号中。

有没有一种方法可以使用@aprato解决方案而无需将UINavigationBar子类化。

在我的项目中，我的主要视图是UIViewController。

问题是navigationController是一个只读属性，有没有办法在我的项目中使用您的类，因为我不能使用： [[UINavigationController alloc] initWithNavigationBarClass:

谢谢

一种获得所需颜色的简单方法是使用

    [<NAVIGATION_BAR> setBackgroundImage:<UIIMAGE> forBarPosition:<UIBARPOSITION> barMetrics:<UIBARMETRICS>];

只要您的图像具有一定的Alpha，就可以使用半透明效果，您可以通过更改图像来设置Alpha。这是刚刚在iOS7中添加的。垂直图像的宽度和高度为640x88像素（如果要在状态栏下方，则在88像素上增加20像素）。