Saltar al contenido

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

Status Bar Ionic

En el artículo de hoy vamos a ver Status Bar en Ionic. Es un componente, que cómo su nombre indica, nos da la posibilidad de poder manejar la barra superior de nuestras aplicaciones. Esconderla, cambiar de color, superponerla, etc… algo, que depende de la app, nos será muy últil. Por ejemplo, en una aplicación de vídeo donde no queremos que se muestre la barra.

¡Yepaaaa! Hola guapa lectora, majo lector. ¿Qué tal todo? Espero que genial. En el capítulo de hoy, cómo he comentado en el enunciado, vamos a ver un componente que, la verdad, uso en todas mis apps. Es trata de la Status Bar y de cómo vamos a poder controlar su lógica.

Párate un momento a pensar y dime, ¿en cuántas apps ya no ves la barra de acción a menos que tires de la pantalla? En muchas ¿verdad? Pues esto se consigue sabiendo controlar este módulo. Y cómo Ionic es muy listo, nos lo permite con muy poco código. Código que vamos a ver ya.

Pero antes de continuar, déjame aconsejarte que te pases por este enlace. Se trata del círculo y es una comunidad online que estoy montando alrededor de esta genial disciplina que es la programación. En él tienes todos los detalles.

 

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 @ionic-native/[email protected]

 

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:

 

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? 😛

 

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.

 

Y el tutorial en vídeo, para los más ganduletes 🙂

 

Hasta aquí llega el tutorial de hoy. No hay mucho más que añadir. Con esta guía podrás hacer uso de este genial módulo cómo un profesional.

Pues con esto me despido hasta el siguiente artículo. Hasta entonces, que vaya bien 🙂