Obtener el color correcto en iOS7 translúcido de la barra de navegación

¿Cómo puedo obtener el derecho para colorear para mi translúcido barras de navegación en iOS 7? La barra de navegación sólo ajusta el color dado a mucho más brillante del uno. Cambiar el brillo o la saturación de los colores también no entregar el resultado correcto.

A nadie que tenga el mismo problema? Parece que funciona, de alguna manera, busca en Facebook: ayúdales a tener sus colores y translúcidos, barras de navegación.

Edit: vamos a dejarlo claro: necesito la Barra de ser translúcido, transparente (con alfa), no sólido! http://en.wikipedia.org/wiki/Transparency_and_translucency

Edit: Ahora enviado a Apple BugReporter

  • Creo que con iOS 7.0.3 esto ya no es necesaria como lo es ahora la configuración del color adecuado. Usted puede jugar con alfa sin embargo, y las calculadoras publicado aquí puede ayudar con eso.
InformationsquelleAutor stk | 2013-09-19

20 Kommentare

  1. 80

    La barra de ajustar los valores de color.

    El método preferido, para RGB >= 40 solo, le dan la mayoría de desenfoque

    Puede usar esta calculadora y poner en lo que usted desea que el color sea cuando se representan en la pantalla, te dirá que lo que para establecer el color de la barTintColor así que cuando Apple se ajusta, se mostrará como la intención de

    https://www.transpire.com/insights/blog/bar-color-calculator/

    Edición: tenga en cuenta que estos cálculos son para un fondo blanco, y para los de colores claros (rgb más de 40, si usted necesita más oscuro, usted tendrá que añadir una capa de fondo como otros han mencionado – a pesar de que va a reducir de la barra de desenfoque)

    En profundidad guía: https://www.transpire.com/insights/blog/custom-ui-navigationbar-colors-ios7/

    Fragmento:

    @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]];
    • Gracias y +1 para que la calculadora! Básicamente lo que dice es: no puedes tener los colores que son ‘oscuro’ de 102 en cualquier valor de RGB. Esto es malo, porque mi gestión no me permite elegir cualquier otro color que el de las empresas (que es RGB 181,27,32), simplemente porque Apple dicta así. Theres llegó a ser de otra manera, porque Facebook es mucho más oscura, ha RGB 65,95,156 en la versión actual de su aplicación.
    • Usted todavía puede hacer colores más oscuros, la desventaja es que usted necesita para añadir una capa inferior de la vista para oscurecer las cosas, lo que significa que el más oscuro de ir más débil es el desenfoque será. He conseguido recrear el Facebook de desenfoque de 65,96,156 con el siguiente código. Hice esta prueba y error, el objetivo es conseguir que el alfa de colourView a ser tan baja como sea posible. img707.imageshack.us/img707/3151/482w.png
    • Yo todavía tenía la más oscuras de quemar todo el título, así que para solucionar esto, he añadido ` [navigationBar setBackgroundColor:[[UIColor alloc] initWithWhite:0.0 f alpha:0.0 f]];`. Parecía funcionar.
    • Usted puede querer añadir autoresizing para apoyar los cambios de orientación: colourView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
    • Aunque este wan realmente no pretende ser una guía para la configuración simplemente, he añadido algunos autoresizing máscaras y lo hizo un poco más dinámico para la gente que copiar y pegar sin leer de él.
    • También, estoy experimentando algunos resultados extraños en iOS 7. Si el colorView se inserta en el índice 1, parece que aparece sobre el título y el botón de retroceso de texto si usted empujar a otro punto de vista en la pila de navegación. Si usted lo pone en el índice 0 sin embargo todo funciona como se espera. Los pensamientos?
    • Swic sólo he añadido algunas correcciones para el índice de posicionamiento, así como un enlace a mi más en profundidad blog post sobre el uso de colores oscuros en conjunción con un efecto de desenfoque en la barra de navegación en iOS7
    • Hay un documento de apple describe cómo «la Coincidencia de una Barra de Colores de Tinte Para Su empresa o de la Marca de Color» developer.apple.com/library/ios/qa/qa1808/_index.html

  2. 13

    Solo hay que cambiar translucent propiedad

    navigationBar.translucent = NO;

    Efectivamente es la misma como la extracción y hacer transparente subvistas/subcapas de la barra de navegación.

  3. 4

    He mejorado código de El logro de brillantes, colores vivos para iOS 7 translúcido UINavigationBar en mi horquilla: https://github.com/allenhsu/CRNavigationController

    Con mi modificación, el resultado del color en la pantalla (recogido en fondo blanco) será exactamente el mismo valor que se pasa a setBarTintColor. Creo que es una solución extraordinaria.

    • Me sigue pareciendo que con iOS 7.0.3, @AllenHsu CRNavigationController funciona mejor, incluso si su color de se excepcionalmente intensos.
    • Esto funciona mejor para mi color de Tungsteno barras de exploración en iOS 8.
  4. 3

    Sé que esta respuesta es un poco tarde, pero si usted está utilizando el Interface Builder, usted podría estar recibiendo el color incorrecto cuando se utiliza un valor hexadecimal porque el Interface Builder está configurado para utilizar el color equivocado de espacio. En Xcode 6.4, puede pulsar en el pequeño engranaje en la parte superior derecha del diálogo selector de color para elegir el espacio de color que estás usando:

    Obtener el color correcto en iOS7 translúcido de la barra de navegación

    Mina fue sRGB IEC6196-2.1, cuando en realidad debería haber sido el uso de Genéricos RGB.

    • Wow man, me alegró el día! Que resolver mi problema. Muchas gracias!
  5. 2

    Si su color no es excepcionalmente viva, usted puede calcular el equivalente de color w/alfa. Esto funciona bien en iOS 7.0.3+; antes de la 7.0.3 se aplica automáticamente un 0.5 alfa.

    Este código se supone que la entrada es de color RGB y es opaco, y que su 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 (estoy abatido en que do-while) me encantaría verlo: https://gist.github.com/sgtsquiggs/7206385

  6. 1

    Supongo que has leído todos los comentarios de arriba. Si usted desea conseguir el fondo personalizado & translucidez debe reemplazar el navigationbar de clase y poner en práctica sus propios layoutsubviews método. Simple complemento adicional subvista aquí. IMPORTANTE: usted debe añadirlo justo por encima del fondo de la subvista de la NavigationBar. Se volverá a ocultar el encabezado o botones si usted acaba de poner por encima de la de todos los subvistas.

    Además, echa un vistazo esta pregunta

    • avishic entregado exactamente este enfoque 1,5 días antes de su respuesta. Me corrija si estoy equivocado…
    • No es exactamente el mismo. Él se está moviendo newSubview detrás de todas las subvistas de la barra de navegación. Pero se debe colocar justo encima de la original de la barra de navegación de fondo que sigue siendo el último subvista.
  7. 1

    Aquí es otra forma de obtener el derecho de color translúcido de la barra de navegación en iOS 7.x y versiones posteriores. Para algunos de los colores que es posible encontrar el óptimo de la barra de matiz de color que hace que translúcido bar a aparecer con un color que coincida con la deseada.

    Por ejemplo, para Facebook de color que es rgb: 65,96,156 o #41609c el color óptimo es #21458c. El código siguiente conjunto de todas las barras de navegación en la app de Facebook de color nativa cocoa-touch de la API sólo:

    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 optimicen el color no puede ser encontrada para cada color posible. Normalmente esto no es posible para los colores oscuros.

    Me hizo una BarTintColorOptimizer utilidad que se debe ejecutar en el dispositivo de búsqueda para la optimización de la barra de color para cualquier color que usted introduzca.

    • BarTintColorOptimizer es genial!!!
  8. 1

    Simple/solución rápida que trabajó para mí.
    Acaba de configurar la barra de matiz en el guión, más que el fondo.

    Primero seleccione la Barra de Navegación en su Navegación Controlador

    Obtener el color correcto en iOS7 translúcido de la barra de navegación

    Y, a continuación, haga clic en los atributos del inspector de la derecha y, a continuación, establezca la Barra de Tinte

    Obtener el color correcto en iOS7 translúcido de la barra de navegación

    Puede seleccionar un pre-definidas de color o haga clic en el color para definir a algo más.

    Obtener el color correcto en iOS7 translúcido de la barra de navegación

  9. 0

    Para hacer matiz de color de aspecto más oscuro puede cambiar el 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];

    Intentar jugar con color1 y color2 para lograr el resultado que se adapta a usted. Cualquier otra cosa sería una lucha contra el marco.

    • Esto no funciona ya que no cubra el área debajo de la barra de estado, y también muestra un gradiente cerca de la parte inferior de la barra de navegación.
  10. 0
    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;

    Nota que usted todavía necesitará muck con el barTintColor y la backgroundLayerColor para conseguir el color exacto que usted desea. También, por supuesto, los colores depende de su contenido de la vista del color de fondo (por ejemplo, blanco).

  11. 0

    He extented UINavigationController,

    en su viewDidLoad, he añadido un fondo con el mismo color de la tinta.

    También, he establecido el marco de fondo para cubrir la barra de estado área:

        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 alfa 0.6 hizo el trabajo, pero se puede jugar con ella.

    • Botón atrás en empujó a la vista controlador deja de trabajar para mí con este código, aunque de Hecho funciona bien
    • Resuelto este problema utilizando la técnica descrita en stackoverflow.com/questions/3046813/…
    • Se debe añadir que subvista justo por encima de la visión de fondo de la NavigationBar. Y los botones de la espalda va a estar bien.
  12. 0

    Si usted está usando swift 2.0 puede utilizar esta, esto elimina el desenfoque y tienen el color muestran correctamente.

    UINavigationBar.appearance().translucent = false
    • Esto dará como resultado un sólido de color de la barra, el OP específicamente no quiero eso.
  13. 0

    De la comparación de mi antes y después de los colores que he encontrado hubo una caída de 21% en la saturación mientras que el Tono y el Brillo sigue siendo el mismo.

    Por añadir el 21% de devolución en la que yo era capaz de mejorar la concordancia de color de manera significativa. Por desgracia, nuestro color había una saturación por encima de 80 a empezar con lo empuja por encima de 100% tuvieron rendimientos decrecientes y no coinciden perfectamente, pero llegó mucho más cerca.

    De colores con la saturación por debajo de los 80 se debe hacer aún mejor.

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

  14. 0

    he mirado un montón de todo y ninguno de estos se ha trabajado realmente para mí, la solución es la siguiente:

    1 – Set su navegación barTintColor (fondo).

    2 – Ejecutar el simulador y abrir la aplicación, en su mac abrir Color Digital Medidor de y seleccione el menú desplegable para «Mostrar en Genérico RGB».

    Obtener el color correcto en iOS7 translúcido de la barra de navegación

    3 – el Uso de esta herramienta para recoger la navegación de color que se establecerá para la vista.

    4 – Ir a guión gráfico y, a continuación, seleccione el color de fondo y asegúrese de que su Deslizadores RGB, y poner el color en aquí, usted recibirá exactamente el mismo color de la barra de navegación.

    Obtener el color correcto en iOS7 translúcido de la barra de navegación

    Nota: no importa si isTranslucent está encendido o apagado.

    Espero que esto ayude a cabo.

  15. -1

    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 aquí

    • Esto sólo funciona si usted no tiene ningún título en su NavigationBar. Si usted tiene un título conjunto, es atenuado por la colorView.
    • Este código de las hojas de la barra de navegación de la capa de corresponsal para el orden-z y el marco de los ajustes posteriores a la capa creada. Básicamente mal enfoque. Para ir de esta manera usted necesita para crear la barra de navegación de la subclase para tratar adecuadamente con subvistas en tu barra de navegación por razones imperiosas de su layoutSubviews método.
  16. -2

    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];
    • Has leído alguna de las otras respuestas? El ‘añadir a la capa de a-navbar’-enfoque ha sido publicado por lo menos dos veces antes de tu respuesta.
  17. -4

    Esto sucede porque el navigationBar.translúcido == YES. Establezca esta propiedad a NO y va a ser el color correcto. Sin embargo, no he encontrado la manera de aplicar este translúcido configuración para todas las barras de navegación sin llamar explícitamente en cada uno. La barra de estado también se mantiene el mismo color que la barra de navegación de esta manera.

    • Lo siento, pero me indicó claramente que necesito la barra de ser translúcido.
    • Facebook no es translúcido bien. ¿Qué te hace decir que es? Si desea que la barra es transparente, no hay manera de obtener el verdadero color, ya que va a tener un alfa < 0
    • Sólo desplácese a una imagen bajo el NavigationBar y que se reconozca su translucidez.
    • Facebook de la barra es transparente. Cansado de la gente con el iPhone 4 diciendo a todo el mundo Facebook de la barra no está, cuando está claro que es.
    • Tengo el iPhone 5 y no es translúcido en la mía. No sé por qué es diferente.
    • Lo siento, quise decir alfa < 1 en mi otro post. Eso es como poner cualquier color alfa (en cualquier lugar) a < 1, a continuación, diciendo, «¿por Qué el color no es el mismo como cuando el alfa = 1.»
    • Oh mi error, al parecer es translúcido pero no fue notable.

  18. -4

    Tratar de representación correspondiente de la imagen de fondo para la barra de navegación. Que trabajó para mi examen de la aplicación.

    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];
    • Que los resultados de una manera transparente, pero no translúcido NavigationBar. en.wikipedia.org/wiki/Transparency_and_translucency
    • Bueno, luego llene de apple informe de error y pedir a los diseñadores para proporcionar una correcta imagen de fondo si el sistema proporciona transparencia no es lo que usted desea.
    • Lo siento, pero estoy recibiendo sólo la transparencia con su enfoque. Theres ningún efecto borroso en absoluto. La translucidez (en Apple-hablar) hereda el efecto borroso como el NavigationBar etc. a la hora de establecer navigationBar.translúcido = SÍ;
    • Hey man, eres cruel haciendo -1 a mi post. Es totalmente correcta, y que la transparencia es el parcial caso de la translucidez. Si usted está aburrido con respuestas inútiles, esta comunidad no es para usted.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...