Conseguir cores vivas e brilhantes para um UINavigationBar translúcido do iOS 7

ATUALIZAÇÃO DO iOS 7.1 : Parece que a solução alternativa para modificar o canal alfa na UINavigationBar foi ignorada nesta atualização. No momento, a melhor solução parece ser apenas "lidar com isso" e esperar que qualquer cor escolhida possa gerar um efeito translúcido. Ainda estou procurando maneiras de contornar isso.

ATUALIZAÇÃO DO iOS 7.0.3 : A biblioteca do GitHub que criamos foi atualizada para solucionar um pouco esse problema ao usar o iOS 7.0.3. Infelizmente, não existe uma fórmula mágica para suportar as duas cores criadas no iOS 7.0.2 e anterior e iOS 7.0.3. Parece que a Apple melhorou a saturação, mas à custa da opacidade (já que a translucidez borrada depende do nível de opacidade). Eu, juntamente com alguns outros, estamos trabalhando para criar uma correção muito melhor para isso.

Tenho certeza que muitas pessoas já se depararam com o problema em que o iOS 7 tende a dessaturar a cor de uma UINavigationBar que é translúcida.

Meu objetivo é conseguir um UINavigationBar com essa cor de tonalidade, mas translúcido:

No entanto, com translucidez, estou entendendo isso. A vista de fundo é branca, o que eu entendo tornará essa vista um pouco mais clara:

Existe alguma maneira de obter a cor original enquanto ainda possui translucidez? Percebi que o Facebook conseguiu que a barra tivesse sua cor azul rica, como mostrado aqui:

.. então eu sei que tem que haver alguma maneira. As visualizações de plano de fundo obviamente fazem a diferença aqui, mas a maior parte do conteúdo também é cinza / branco. Parece que, independentemente da cor da tonalidade da barra, você é incapaz de obter cores vivas sob a translucidez.

Atualizado com solução.

Aqui está a solução que acabei encontrando. Tomei aprato solução 's e depois abrangeu o costume UINavigationBardentro de uma UINavigationControllersubclasse. Eu criei um repositório que tem essa implementação listada abaixo, juntamente com um aplicativo de exemplo .

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

Atualização do iOS 7.0.3: Como você vê acima, o 7.0.3 mudou as coisas. Eu atualizei minha essência. Espero que isso acabe quando as pessoas atualizarem.

Resposta original: Acabei com um hack combinando as duas das outras respostas. Estou subclassificando UINavigationBar e adicionando uma camada à parte traseira com algum espaço extra para cobrir se alguma das várias barras de status de altura estiver ativa. A camada é ajustada nas subvisões de layout e a cor muda sempre que você define barTintColor.

Gist: 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);
  }

O comportamento do tintColor for bars mudou no iOS 7.0. Ele não afeta mais o fundo da barra e se comporta como descrito para a propriedade tintColor adicionada ao UIView. Para colorir o fundo da barra, use -barTintColor. Você pode usar o código a seguir para fazer o aplicativo funcionar com o ios6 e o ​​ios7.

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

IS_IOS7 é uma macro que é definida no arquivo pch da seguinte maneira.

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

Não encontrei esta solução, mas parece funcionar bastante bem. Acabei de adicioná-lo ao viewDidLoad na minha subclasse de UINavigationController.

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

Uma maneira de baixa fidelidade provavelmente seria fixar uma UIViewque seja a altura da barra de navegação na parte superior da vista atrás da barra. Faça com que essa visualização tenha a mesma cor da barra de navegação, mas brinque com o alfa até obter os efeitos desejados:

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

Veja atrás

(Cor alterada dos exemplos mais baixos para enfatizar a transparência. Transparência / desfoque é mais perceptível quando em movimento.)

Subclassificar UINavigationBare colocar a mesma exibição acima do plano de fundo, mas por trás de todo o resto, provavelmente obterá resultados semelhantes, sendo menos invasivo.

Outra solução que eu já vi é brincar com o alfa do UINavigationBar:

self.navigationController.navigationBar.alpha = 0.5f;

Edit: Na verdade, após o teste, parece que isso não fornece o comportamento pretendido (ou qualquer comportamento):

.8 alfa

Alfa não ajustado

Obviamente, você só desejará fazer isso em dispositivos iOS 7. Portanto, adicione alguma verificação de versão antes de implementar qualquer uma delas.

Em vez de criar seu objeto UIColor no formato RGB , use HSB e aumente o parâmetro de saturação. (Créditos a Sam Soffes, que descreve este método aqui )

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

Nota: Esta solução é uma troca e não funciona bem para cores com alta saturação.

Para escolher a cor HSB do seu design, você pode usar uma ferramenta como o ColorSnapper, que permite copiar o formato UIColor HSB.

Você também pode tentar a Categoria UIColor ( Link do GitHub ) de David Keegan para modificar as cores existentes.

O problema foi corrigido pela Apple na nova versão 7.0.3.

I utilizado @ solução de aprato mas encontrados alguns casos de canto onde as novas camadas de novos VCs (por ex. UINavigationItemButtonViews, UINavigationItemViews, Etc.) iria ser inseridos automaticamente para uma posição abaixo da extraColorLayer(o que causaria essas título ou botão elementos de ser afectada pelo extraColorLayere assim cores mais fracas do que normalmente seriam). Então ajustei a solução da @ aprato para forçar a extraColorLayerpermanecer na posição de índice 1. Na posição de índice 1, a posição extraColorLayerfica acima da _UINavigationBarBackground, mas abaixo de todo o resto.

Aqui está a minha implementação de classe:

- (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
}

Melhorei seu código no meu fork: https://github.com/allenhsu/CRNavigationController

Com a minha modificação, a cor do resultado na tela (escolhida em fundo branco) será exatamente o mesmo valor passado setBarTintColor. Eu acho que é uma solução incrível.

Nenhum desses hacks é necessário :). Basta definir:

self.navigationController.navigationBar.translucent = NO;

Para o iOS 7, a translucidez padrão foi mantida em TRUE.

Em uma nota relacionada, você pode definir facilmente a cor do texto do título (com sombra) através de:

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

Encontrei este Q / A ao tentar configurar uma barra de navegação uniformemente colorida com transparência DESATIVADA no iOS 7.

Depois de experimentar um pouco o barTintColor, descobri que uma maneira muito fácil de ter uma barra de navegação opaca é criar uma imagem de pixel único da cor desejada, criar uma imagem elástica e defini-la como plano de fundo. .

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

Três linhas de código, muito simples e funcionam AMBOS no iOS 6 e iOS 7 (barTintColor não é suportado no iOS 6).

Existe uma excelente substituição do Dropin UINavigationController disponível a partir de Simon Booth, disponível no GitHub Here GitHub - C360NavigationBar

Se você estiver com suporte ao iOS6 para trás, verifique o controlador de exibição raiz como:

PatientListTableViewController * frontViewController = [[PatientListTableViewController alocado] 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;

Como o @bernhard mencionado acima , é possível saturar a cor da barra para obter a aparência desejada da barra de navegação.

Eu escrevi um utilitário BarTintColorOptimizer para esse tipo de ajuste. Ele otimiza a cor translúcida da tonalidade da barra para fazer com que a cor real da barra corresponda à cor desejada no iOS 7.xe posterior. Veja esta resposta para obter detalhes.

Francamente falando, as respostas acima podem estar certas, mas seguir o truque funcionou para mim com muita facilidade.

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

Aqui estão as imagens usadas para self.imageRede self.imageBlack.

< > a imagem preta está entre parênteses, não será visível, pois é transparente :)

< > imagem vermelha está entre parênteses.

existe uma maneira de usar a solução @aprato sem subclassificar UINavigationBar.

No meu projeto, minha visão principal é um UIViewController.

o problema é que o navigationController é uma propriedade somente leitura, existe uma maneira de usar sua classe com meu projeto porque eu não posso usar: [[UINavigationController alloc] initWithNavigationBarClass:

obrigado

Uma maneira fácil de obter a cor desejada é usando

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

Contanto que sua imagem tenha algum alfa, a translucidez funcionará e você poderá defini-lo alterando a imagem. Isso foi adicionado no iOS7. A largura e a altura da imagem são 640x88px na vertical (adicione 20 aos 88 se desejar que ela fique embaixo da barra de status).