Saltar al contenido

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

Status Bar Ionic

¿Buscando modificar la barra de estado del dispositivo desde tu app? 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? Ya sea cambiar el color o escorderla, directamente.

Si has respondido que sí a cualquiera de estas dos preguntas, tranquilo, no eres el único, ni serás el último, que pasa por este artículo para intentar dar respuesta a estas cuestiones.

Te digo más, hasta los que somos más expertos recurrimos a este tipo de artículos cuando tenemos que realizar una implementación nueva, o cuando llevamos mucho tiempo sin usar el componente en cuestión. Así que no te preocupes.

Por si no me conoces aún, me llamo Aitor Sánchez González, soy desarrollador de apps desde el año 2014 y en este artículo te enseñaré cómo tener acceso a una referencia del Status bar del dispositivo y cómo puedes editarlo a tu antojo.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

 

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/[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:

 

...

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

 

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.

 

Más tutoriales de Ionic

 

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 🙂