ios - color - navigation bar swift 4

¿Cómo pasar sin problemas de translúcido a opaco UINavigationBar iOS?

Question

Tengo problemas para reconfigurar la UINavigationBar de UINavigationBar en iOS 7 y 8 al realizar la transición entre vistas.

Mi aplicación actualmente contiene el siguiente flujo UIViewController :

VC1 -> VC2 -> VC3

En este flujo

• VC1 es la pantalla de inicio y tiene una UINavigationBar opaca
• VC2 tiene un UINavigationBar translúcido
• VC3 vuelve a tener una UINavigationBar opaca

El problema que he estado encontrando es que las transiciones entre estas vistas son todas muy descuidadas. Para empezar probé lo siguiente:

en VC2

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    // configure appearance
    [self.navigationController.navigationBar configureTranslucentAppearance];
}

Y en VC1 y VC3.

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    // configure appearance
    [self.navigationController.navigationBar restoreDefaultAppearance];
}

Aquí están las implementaciones de las dos funciones de ayuda enumeradas anteriormente:

- (void)restoreDefaultAppearance {
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

    [self setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor JTTextNavBar]}];
    [self setTintColor:[UIColor JTTextNavBar]];
    [self setBarTintColor:[UIColor JTBackgroundNavBarWithAlpha:1.0]];
    [self setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault];
    [self setBackgroundColor:[UIColor JTBackgroundNavBarWithAlpha:1.0]];
    [self setShadowImage:[UIImage navigationBarShadowImage]];
    [self setTranslucent:NO];
}

- (void)configureTranslucentAppearance {
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

    [self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    [self setBackgroundColor:[UIColor clearColor]];
    [self setShadowImage:[UIImage new]];
    [self setTranslucent:YES];
}

Esta es la forma más básica de manejar esta transición. Tiene los siguientes artefactos visuales:

• Al pasar de VC1 -> VC2 en el momento en que comienza la transición, la barra de navegación se vuelve negra. La animación se completa normalmente.
• Al pasar de VC2 -> VC1, la barra de navegación cambia instantáneamente al color predeterminado de la aplicación antes de que el segmento tenga tiempo para completarse.
• Al pasar de VC2 -> VC3, la barra de navegación pasa de manera translúcida al color de la barra de navegación de la aplicación y luego los elementos del menú y el cuerpo de VC se animan.
• Al pasar de VC3 -> VC2, la barra de navegación se vuelve negra al instante y permanece así hasta que se completa el proceso.

Ninguna de estas transiciones se ve bien en absoluto. Idealmente, me gustaría que las vistas pasen sin problemas junto con su nueva UINavigationBar pero la única forma en que he logrado hacer esto con éxito es agregar manualmente una barra de herramientas a cada xib.

¿Alguna sugerencia? Disculpas si esta descripción es confusa :(

Edición: Se agregaron imágenes recortadas de UINavigationBar y la parte superior de UIViewController para cada una de las transiciones enumeradas.

Answer 1

¡Finalmente encontré una solución decente!

Parece que no hay una forma adecuada de hacer una transición suave de una UINavigationBar transparente UINavigationBar PERO puede hacer una transición suave de un controlador de vista con una barra de estado visible a una que tenga una barra de estado oculta.

Esto abre una posible solución alternativa que consiste en agregar lo siguiente en el viewWillAppear de VC2 desde arriba:

[self.navigationController setNavigationBarHidden:YES animated:YES];

Una vez que tenga eso, agregue manualmente una UINavigationBar de UINavigationBar a su xib y configúrela para que sea transparente (y agregue todo el UIBarButtonItem y las vistas necesarios).

Si todo está conectado correctamente, la transición de VC1 a VC2 ocultará la UINavigationBar de UINavigationBar a la misma velocidad que la transición de la vista y VC2 se mostrará con la UINavigationBar integrada UINavigationBar

Nota: para que esto funcione correctamente, deberá asegurarse de que, en la viewWillAppear de viewWillAppear de viewWillAppear que se puede acceder desde VC2 , reinicie la UINavigationBar para que sea visible (si es necesario) a través de:

[self.navigationController setNavigationBarHidden:NO animated:YES];

TL; DR : agregue manualmente una UINavigationBar a su controlador de vista de la barra de navegación transparente y en su vista se viewWillAppear el predeterminado a través de setNavigationBarHidden:animated:

Answer 2

¿Siempre usa Translucent, además de agregar una vista con un color debajo y animar que es alfa?

Answer 3

Así que luché con esto también.

Desafortunadamente, no tuve éxito al agregar mi propia barra de navegación a través del guión gráfico. En cambio, (y le advierto que esto es intrépido) agrego una vista en el ViewController con la barra de navegación opaca que tiene un margen negativo y se extiende debajo de la barra de navegación.

Cuando el ViewController con la barra de navegación transparente se presiona, la barra se convierte inmediatamente en transparente, pero debido a la vista del mismo color que tengo justo detrás, el cambio no se nota. Et voila

El código que tengo es bastante básico y está escrito en C # (Xamarin) pero por razones de integridad ...

  var backing = new UIView(new CGRect(0, -68, this.View.Frame.Width, 64f));
  backing.BackgroundColor = UIColor.Green;
  this.View.AddSubview(backing);

Answer 4

Cambiar el color de fondo del trabajo para mí

window?.backgroundColor = Color.red.toUIColor()

Answer 5

El color negro que está viendo es el color de fondo de la vista UINavigationController''s . Una forma de minimizar la visión es manipular el color de fondo de esa vista al color de la vista del controlador de vista saliente / entrante. Esto funciona bien si estás trabajando con colores sólidos. Otro enfoque es ampliar sus vistas detrás de la barra de navegación opaca usando UIViewController.extendedLayoutIncludesOpaqueBars = YES;

Answer 6

Establezca el color de fondo de UIWindow en tintColor de la barra de navegación.

Answer 7

He luchado con un problema casi idéntico. Realmente no hay ninguna transición suave utilizando una barra de navegación o barra de herramientas como un desenfoque. La mejor opción que he encontrado * es hacer una imagen fuera de la vista y luego usar esa imagen para la transición. Especialmente si solo lo necesita para las transiciones, se trata de la opción más barata que aún ofrece una excelente UI / UX.

* La única advertencia es que algunos de los efectos de la interfaz de usuario en una barra de navegación y en la barra de herramientas no se muestran cuando toma una instantánea, captura de pantalla o rasteriza una vista UIV como una imagen. Esto es insignificante si se usa para una transición.

Answer 8

Puede crear su propia barra de navegación con solo una vista UIV y de esa forma tendrá un control completo sobre su apariencia, diseño, desvanecimiento, etc. Renuncié a usar UINavigationBar hace un tiempo ya que puede ser una molestia trabajar con, como está descubriendo, Y ahora nunca lo uso.

Tengo un controlador de vista raíz que tiene una vista UIV que representa la barra de navegación. Si quiero hacer algo como agregar un botón Atrás, cambiar el color, mostrar la barra de navegación u ocultarlo, cambiar la transparencia, etc., todo ello controlado por el RVC y otros controladores de vista llaman los métodos en el RVC para cambiar la navegación. Bar dependiendo de sus requisitos de apariencia.

El RVC tiene una vista de contenedor que es el tamaño completo de la vista del controlador y los otros controladores de vista se cargan en eso. Un poco de configuración para configurar todo, pero una vez hecho, es una estructura que se puede usar en cada proyecto que usa una barra de navegación muy rápidamente.

Answer 9

Tengo una solución más ... para los que ahora están refactorizando el proyecto y no puedo agregar la barra de navegación en todas partes. Esta no es una solución perfecta como @alexgophermix. Pero tampoco está mal:

let transition = CATransition()
        transition.duration = 0.6
        transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        transition.type = kCATransitionFade
        navigationController?.navigationBar.shadowImage = UIImage()
        navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        navigationController?.navigationBar.isTranslucent = true
        navigationController?.navigationBar.layer.add(transition, forKey: nil)
        navigationController?.view.backgroundColor = .clear

Estoy configurando mi barra de navegación en viewDidLoad (), así que esto funciona en todas partes y proporciona una transición ligeramente diferente. En mi caso, estaba estableciendo fondos claros en algún lugar y descansaba una imagen de degradado. Así que este pequeño cambio va bien para todas partes. Esta transición no es muy notable, pero tampoco se ve mal :)

Answer 10

YPNavigationBarTransition es un marco configurable que anima barras de navegación.

YPNavigationBarTransition utiliza dos barras de navegación falsas (de hecho, UIToolBar) para simular las transiciones de la barra y hacer que la barra de navegación real sea transparente.

1. Subclase su propio UINavigationController e inserte el centro de transición como YPNavigationController

2. Implemente YPNavigationBarProtocol para sus controladores de contenido respectivamente.

3. Hecho.

Se incluye una demostración completa en el repositorio, verifique para obtener más detalles.