Status Bar Ionic | ¡Aprende a usarla cómo un profesional!

¿Quieres modificar barra de estado del dispositivo desde tu app, por ejemplo para mostrar el título de la ventana? O, quizás ya sabes cómo se utiliza el compoente Status Bar Ionic, pero te falta algo de información para ponerla cómo a ti te gusta ¿verdad?

Me llamo Aitor Sánchez, soy desarrollador de apps desde 2014 y en este artículo vas a aprender a tener acceso a una referencia del Status bar del dispositivo y a cómo puedes editar dicha barra a tu antojo desde esta misma referencia.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Instalación de Status Bar Ionic

Cómo con cada módulo externo, tendremos que instalarlo en nuestra app. Para ello vamos a usar las dos siguientes líneas de consola:

$ ionic cordova plugin add cordova-plugin-statusbar
$ npm install --save @awesome-cordova-plugins/status-bar@4

La primera, cómo ya conocerás, instala el plugin que comunicará la app con la parte nativa del sistema.

La segunda, comunicará nuestro código con el plugin. Y con esto ya estaríamos en disposición de continuar.

Configuración del módulo Status Bar

En todos los tutos lo digo, y no me cansaré, porque es una parte importante en las apps, sobre todo cuando estas crecen.

No es necesario que incluyamos los módulos en el “AppModule” porque se cargará en toda la app. Solo será necesario incluirlo donde lo vayamos a usar. Y de esta manera, ahorraremos recursos y daremos una mejor experiencia de usuario.

Código necesario en nuestro module:

...

import { StatusBar } from "@awesome-cordova-plugins/status-bar/ngx"

...

providers: [
...,
StatusBar,
...,
]

...

Plataformas soportadas por Status Bar

Cómo se trata de un componente que solo tiene “cavidad” en el móvil. Las plataformas soportadas son las siguientes:

• Android
• iOS
• Windows Phone

A ver, es lo más lógico que solo esté para estas. Es el status bar y solo está disponible, de momento, en estos dispositivos.

Ejemplo, cómo se usar Status Bar en Ionic

Siempre me gusta comenzar esta parte con un ejemplo de código. Y este artículo no va a ser menos ¿No crees? :P

import { StatusBar } from '@ionic-native/status-bar';


constructor(private statusBar: StatusBar) { }

...

// Hacer que la Status Bar se superponga al contenido.
this.statusBar.overlaysWebView(true);


// Cambia el fondo de la Status Bar.
this.statusBar.backgroundColorByHexString('#ffffff');

En primer lugar, vamos a hacer un import de StatusBar en nuestra clase: import { StatusBar } from '@ionic-native/status-bar';

Posteriormente, al tratarse de un servicio, podemos inyectar una instancia del módulo en el constructor.

Avanzamos a “overlaysWebView” que, dependiendo del parámetro, la barra se superpondrá al WebView de Ionic.

Y para terminar el ejemplo, con “backgroundColorByHexString” cambiaremos el fondo de la barra por un blanco.

Pues ese ha sido el ejemplo. Podríamos extendernos mucho más, pero con este creo que se ha pillado bien el alma del asunto.

Métodos y funciones de Status Bar en Ionic

Ahora vamos a pasar a ver los métodos, campos y demás historias que tenemos disponibles y que es lo que podemos hacer con ellas. Vamos al lío, que aquí es donde comienza la chicha.

overlaysWebView(sobrePoner)

• Cómo hemos visto en el ejemplo, nos permitirá sobreponer, o no, la Status Bar sobre el contenido del WebView de nuestra app.
• Parámetros:
  • sobrePoner -> booleano -> Si es verdadero, sobrepondrá la StatusBar. Por defecto es verdadero.

styleDefault()

• Esta función fuerza al sistema a usar el estilo por defecto de la barra. Textos oscuros con fondos claros.

styleLightContent()

• Es el contrario al anterior. La funcionalidad es la misma pero el texto será claro y el fondo oscuro.

styleBlackTranslucent()

• Esta función setea los textos claros en fondo oscuro. Pero con la diferencia de que el fondo será translúcido.

styleBlackOpaque()

• Es similar al anterior, pero con el fondo opaco.

backgroundColorByName(colorName)

• Con esta función podemos cambiar el color del status bar con un nombre de color dado.
• Nota: En iOS tiene que estar en false el “overlaysWebView” para que funcione.
• Parámetros:
  • colorName -> String -> Será el color que queremos que muestre. Disponible entre los siguientes valores:
    • black
    • darkGray
    • lightGray
    • white
    • gray
    • red
    • green
    • blue
    • cyan
    • yellow
    • magenta
    • orange
    • purple
    • brown

backgroundColorByHexString(hexString)

• Es similar al anterior, pero en lugar de pasarle un nombre le vamos a pasar una cadena de color formateada en hexadecimal.
• Parámetros:
  • hexString - > string -> La cadena que contiene el código de color.

hide()

• Esta función fuerza al sistema a que esconda la barra de estado.

show()

• Es el opuesto del método anterior. Fuerza al sistema a que muestre la barra de estado.

Pues hasta aquí llega la sección de los métodos. La verdad que no son muchos. Pensaba que íbamos a tener bastantes más. Pero mejor así…

Campos de clase

Ahora vamos a ver los campos de clase que son públicos. La verdad que esta parte es bastante simple. Recuerda que quitaremos todos los campos de los padres. Solo vamos a usar los que son de este componente.

isVisble

• Este campo de clase nos permite identificar si la StatusBar se está mostrando en este momento o no.

Tutorial en video por si no te gusta leer

Algo más que quizás te interese

Mira, si tu mejoras le logo de tu aplicación de manera proactiva y basándote en una estrategia, las descargas de la app aumentarán y, por extensión, los ingresos que esa app te genera.

Bien, pues para apoyarte a que evalues, optimices y mejores tus logos, y tu estrategia, hemos creado esta herramienta. Básicamente puedes realizar este trabajo con un buen apoyo de la IA. No te espoileo más, entra en el enlace.

Y ahora si, ya hemos terminado. Espero haberte ayudado con tus dudas y nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!