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
compactAppearanceoscrollEdgeAppearance.
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ú.


