Phonegap

Status Bar Material Design en Cordova / Phonegap

Status bar Material Design

Más de una vez hemos visto como juegan las distintas aplicaciones con el Status Bar cambiando ese negro aburrido que tanto desentona en la mayoría de nuestras aplicaciones y que muchos desarrolladores optan por ocultarla en sus proyectos.

Desde la salida de Android L, Google ha añadido muchas de características nuevas en su interfaz de Android estableciendo una Guía de Diseño para emplear en estos dispositivos, una de ellas ha sido la posibilidad de cambiar el color de la barra de estado, o como se dice en el mundo de las aplicaciones, StatusBar.

Este tutorial nos va a servir para implementar una función que podamos reutilizar a lo largo de nuestro código, y sin importar el color que tengamos establecido en una sección vamos a poder simular este efecto sin tener que buscar el código exacto a mano.

Instalación

Es necesario contar en nuestro proyecto con el plugin de la barra de estado (cordova status bar), para poder cambiar el color de esta cuando deseemos.

$ cordova plugin add cordova-plugin-statusbar
 Lo que vamos a hacer ahora en nuestró código JavaScript es llamar a la función materialStatusBar(color, percent), en la cual a color vamos a pasarle cualquier color en hexadecimal y a percent el porcentaje en el que queremos modificar el color, el valor de 0% a 100% y puede ser positivo (aclara – 0 a 100%) o negativo (oscurece – 0 a -100%). 
function materialStatusBar(color, percent) {
 var R, G, B, RR, GG, BB;
 R = parseInt(color.substring(1, 3), 16);
 G = parseInt(color.substring(3, 5), 16);
 B = parseInt(color.substring(5, 7), 16);

 R = parseInt(R * (100 + percent) / 100);
 G = parseInt(G * (100 + percent) / 100);
 B = parseInt(B * (100 + percent) / 100);

 R = (R < 255) ? R : 255;
 G = (G < 255) ? G : 255;
 B = (B < 255) ? B : 255;

 RR = ((R.toString(16).length == 1) ? "0" + R.toString(16) : R.toString(16));
 GG = ((G.toString(16).length == 1) ? "0" + G.toString(16) : G.toString(16));
 BB = ((B.toString(16).length == 1) ? "0" + B.toString(16) : B.toString(16));

 if (window.StatusBar) {
   StatusBar.backgroundColorByHexString("#" + RR + GG + BB);
 }
}
No comments
Gabriel FiocchiStatus Bar Material Design en Cordova / Phonegap
read more