Skip to content

¿Cómo ocultar la línea inferior del UINavigationBar?

12 abril, 2020

En este tutorial te voy a enseñar cómo ocultar la linea inferior de la UINavigationBar. Existen diseños muy bonitos en las que el backgroundColor de la navigation bar y el del view controller son los mismos. Sin embargo, por defecto todas las barras de navegación tienen una linea inferior de 1 pixel. ¿Qué puedes hacer para que no se vea?

En iOS 13 o superior

En iOS 13 o superior, la solución es muy sencilla y limpia. Basta con utilizar la clase UINavigationBarAppearance y asignarle el color .clear (esto es, ningún color) a la propiedad shadowImage:

let appearance = UINavigationBarAppearance()
appearance.shadowColor = .clear

appearance.backgroundColor = .white

Por último, tienes que asignar la constante appearance a la propiedad standardAppearance de la barra de navegación:

navigationController?.navigationBar.standardAppearance = appearance

También puedes asignársela a las propiedades compactAppearance o scrollEdgeAppearance.

El código completo queraría así:

// iOS 13+
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let appearance = UINavigationBarAppearance()
        appearance.backgroundColor = .white
        appearance.shadowColor = .clear
        navigationController?.navigationBar.standardAppearance = appearance
    }
}

Únete a la newsletter para no perderte ningún nuevo tutorial: recibe un email cuando se publiquen nuevos artículos o vídeos y no pierdas la oportunidad de seguir aprendiendo. 

En iOS 12 o inferior

En iOS 12 o inferior el código es igualmente sencillo, aunque menos intuitivo:

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let navigationBar = navigationController?.navigationBar
        navigationBar?.setBackgroundImage(UIImage(), for: .default)
        navigationBar?.shadowImage = UIImage()
    }
}

Consiste en crear una UIImage y asignársela a la navigationBar mediante su propiedad shadowImage y la función setBackgroundImage(:for:).

Conclusión

Eliminar u ocultar la línea inferior de la UINavigationBar es muy fácil. Con iOS 13 la solución parece algo más limpia que en las versiones anteriores. Aún así, se hace con apenas 3 o 4 líneas de código.

Si tienes alguna duda, puedes escribirme un comentario aquí abajo o bien escribirme directamente a mi Twitter en @xandrefreire.

Por último, si te ha resultado útil el artículo, te agradecería que lo compartieses en tus redes sociales para poder ayudar a más gente como tú.


¿Me ayudas a compartir en redes sociales?