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