ios - change - swift 4 navigation bar color

Obtenga el color correcto en la barra de navegación translúcida iOS7

Question

¿Cómo puedo obtener el color correcto para mis barras de navegación translúcidas en iOS 7? La barra de navegación simplemente ajusta el color dado a uno mucho más brillante. Cambiar el brillo o la saturación del color tampoco proporciona el resultado correcto.

¿Alguien tiene el mismo problema? Parece que funciona de alguna manera, mirando Facebook: están teniendo sus colores y barras de navegación translúcidas.

Editar: Para dejarlo en claro: ¡Necesito que la barra sea translúcida, no transparente (con algo de alfa), no sólida! http://en.wikipedia.org/wiki/Transparency_and_translucency

Editar: ahora publicado en Apple BugReporter

Answer 1

Al comparar mis colores antes y después, encontré que había una caída del 21% en saturación mientras Hue y Brightness permanecían iguales.

Al agregar el 21% de nuevo, pude mejorar significativamente la coincidencia de colores. Desafortunadamente, nuestro color tenía una saturación por encima de 80 para empezar, por lo que presionarlo por encima del 100% tenía rendimientos decrecientes y no coincidía perfectamente, pero se acercaba mucho más.

Para colores con saturación por debajo de 80, debería hacerlo aún mejor.

Para obtener información sobre cómo ajustar la saturación de su color ¿Cómo puedo modificar el tono, el brillo y la saturación de UIColor?

Answer 2

Esta es otra forma de obtener el color correcto de la barra de navegación translúcida en iOS 7.xy versiones posteriores. Para algunos colores, es posible encontrar el color de tinte de barra óptimo que hace que la barra translúcida aparezca con un color que coincida con el deseado.

Por ejemplo, para el color de Facebook que es rgb: 65,96,156 o #41609c el color óptimo es #21458c . El siguiente código establece que todas las barras de navegación en la aplicación sean del color de Facebook con API Cocoa-touch nativa solamente:

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

La única limitación del método es que no se puede encontrar color optimizado para todos los colores posibles. Por lo general, esto no es posible para los colores oscuros.

Hice una utilidad BarTintColorOptimizer que debería ejecutarse en el dispositivo para buscar el color optimizado de la barra para cualquier color que ingrese.

Answer 3

Esto debería funcionar:

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

Tomado de here

Answer 4

Esto funciona para mí:

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 5

Esto sucede porque navigationBar.translucent == YES. Establezca esta propiedad en NO y será el color correcto. Sin embargo, no he descubierto cómo aplicar esta configuración translúcida a todas las barras de navegación sin llamarla explícitamente en cada una. La barra de estado también se mantiene del mismo color que la barra de navegación de esta manera.

Answer 6

He extendido UINavigationController,
en su viewDidLoad, he agregado un fondo con el mismo color del tinte.

Además, configuré el marco de fondo para que cubra el área de la barra de estado:

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

En mi caso, alpha 0.6 hizo el trabajo, pero puedes jugar con él.

Answer 7

He mejorado el código de Lograr colores vivos y brillantes para una UINavigationBar translúcida iOS 7 en mi fork: https://github.com/allenhsu/CRNavigationController

Con mi modificación, el color del resultado en la pantalla (recogido sobre fondo blanco) será exactamente el mismo valor pasado a setBarTintColor. Creo que es una solución increíble.

Answer 8

Intente reproducir la imagen de fondo correspondiente para su barra de navegación. Eso funcionó para mi aplicación de prueba.

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 9

La barra ajustará sus valores de color.

El método preferido, para RGB> = 40 solamente, dará la mayor cantidad de imágenes borrosas

Puedes usar esta calculadora y poner lo que quieres que sea el color cuando se renderiza en la pantalla, te dirá qué ajustar el color de barTintColor para que cuando Apple lo ajuste, se muestre como se pretendía.

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

Editar: tenga en cuenta que estos cálculos son para un fondo blanco, y para colores más claros (rgb mayores de 40, si necesita más oscuro, necesitará agregar una capa de fondo como otros mencionaron, aunque eso reducirá el desenfoque de la barra)

Vista de capa inferior oscura alternativa, ejemplo con el color azul oscuro de Facebook: (65,96,156) http://img707.imageshack.us/img707/3151/482w.png

Guía detallada: http://b2cloud.com.au/how-to-guides/custom-uinavigationbar-colors-in-ios7

Retazo:

@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 10

Para que el color del tinte parezca más oscuro, puedes cambiar el color de fondo de la barra de navegación:

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

Intenta jugar con color1 y color2 para lograr el resultado que más te guste. Cualquier otra cosa sería luchar contra el marco.

Answer 11

Puede ejecutar la aplicación en el simulador y tomar el color de la barra de navegación con la herramienta Cuentagotas.

Answer 12

Sé que esta respuesta es un poco tarde, pero si está utilizando el Interface Builder, es posible que obtenga el color incorrecto al usar un valor hexadecimal porque Interface Builder está configurado para usar el espacio de color incorrecto. En Xcode 6.4, puede presionar el pequeño engranaje en la esquina superior derecha del cuadro de diálogo del selector de color para seleccionar el espacio de color que está utilizando:

El mío se estableció en sRGB IEC6196-2.1, cuando en realidad debería haber estado usando RGB genérico.

Answer 13

Si está utilizando swift 2.0 puede usar esto, esto eliminará la imagen borrosa y hará que el color se muestre correctamente.

UINavigationBar.appearance().translucent = false

Answer 14

Si su color no es excepcionalmente vívido, puede calcular el color equivalente con alfa. Esto funciona bien en iOS 7.0.3+; antes de 7.0.3 aplicó automáticamente un 0.5 alfa.

Este código asume que el color de entrada es RGB y es opaco, y que el color de fondo es blanco:

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

Si alguien tiene una forma más elegante de calcular el alfa (me estoy encogiendo de ese bucle de do-while), me encantaría verlo: https://gist.github.com/sgtsquiggs/7206385

Answer 15

Simplemente necesitas cambiar la propiedad translucent

navigationBar.translucent = NO;

En realidad, es lo mismo que eliminar / hacer subvistas / subcapas transparentes de la barra de navegación.

Answer 16

Simplemente use esta simple Calculadora de BarTintColor:

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

Answer 17

Solución simple / rápida que funcionó para mí. Simplemente configure el matiz de barra en el guión gráfico en lugar del fondo.

Primero selecciona tu barra de navegación en tu controlador de navegación

Y luego haga clic en el inspector de atributos a la derecha y luego configure el Tinte de barra

Puede seleccionar un color predefinido o hacer clic en el color para establecerlo en otra cosa.

Answer 18

Supongo que ha leído todos los comentarios anteriores. Si desea obtener el fondo y la translucidez personalizados, debe anular la clase de la barra de navegación e implementar su propio método layoutsubviews. Simple agregar subvista adicional aquí. IMPORTANTE: debe agregarlo justo encima de la subvista de fondo de NavigationBar. Ocultará su encabezado o botones si lo coloca por encima de todas las subvistas.

Además, mira esta pregunta

Answer 19

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;

Tenga en cuenta que aún necesitará ensuciar con el barTintColor y el backgroundLayerColor para obtener el color exacto que desee. Además, por supuesto, los colores dependen del color de fondo de la vista de contenido (por ejemplo, blanco).