Una guía para principiantes sobre cómo diseñar una aplicación móvil Ionic 2

¡Hola chicos! En esta publicación, lo guiaré paso a paso a través de los conceptos básicos extremos sobre cómo diseñar una aplicación Ionic 2 usando SCSS.

Para aprovechar al máximo este tutorial, sería bueno tener un conocimiento previo de CSS e Ionic, pero no es necesario. Si no está familiarizado con el marco de Ionic 2, le sugiero que consulte la documentación de Ionic 2.

El tutorial

Ionic 2 trae muchas cosas a la mesa (si no está comenzando desde un andamio completamente en blanco). Obtiene una aplicación, y ya está diseñada. Pero si quieres hacer cambios, se vuelve un poco complicado si eres un principiante.

Para instalar los complementos necesarios, necesitamos comenzar a trabajar con Ionic, necesitamos descargar e instalar NodeJS. Después de eso, puede instalar Cordova e Ionic desde su terminal ejecutando este comando:

$ npm install -g iónico cordova

También necesitaremos instalar Typecript, que es el lenguaje con el que se construye Ionic 2. Ejecute este comando:

$ npm install -g mecanografiado

Para que este tutorial se centre principalmente en el estilo, utilizaremos una aplicación prefabricada con un diseño básico.

Andamia una aplicación de pestañas Ionic 2 ejecutando este comando en tu terminal:

$ ionic start myTabs pestañas --v2

Obtendrá una aplicación con pestañas para que pueda navegar entre diferentes vistas. ¡Puede probarlo en el navegador escribiendo esto en su terminal!

$ servicio iónico
Como puede ver, Ionic personaliza los diferentes componentes para cada plataforma. Cubriré más sobre cómo hacer el diseño específico de la plataforma a continuación. También obtienes un conjunto de colores de tema estándar y se ve bastante genérico.

Cambia el tema de color con $ colors

Abre la aplicación en un editor de texto. (Yo uso WebStorm IDE por Jetbrains por cierto)

Luego comience navegando a este archivo:

src / theme / variables.scss

Aquí puede ver que el tema de color de la aplicación está configurado en una variable llamada $ colors, estas claves / valores que puede editar tanto como desee, incluso agregar nuevos.

Para mostrarle cómo funciona, simplemente reemplace el color hexadecimal en primario con, por ejemplo, "rojo".

Resultará en esto:

Todos los componentes que utilizan el color primario ahora se establecen en el color primario, que es rojo.

Puede usar fácilmente estos colores en cualquier componente. ¡Ahora te mostraré cómo puedes hacer eso!

Navega a este archivo:

src / pages / home / home.scss

En este archivo agregamos SCSS específicos de la página, lo que significa que los estilos que agregue aquí solo se aplicarán a la página de inicio.

Vamos a cambiar el color del texto h2 "¡Bienvenido a Ionic!" Al color primario (rojo). Para hacerlo, tenemos que agregar la etiqueta h2 a la página de inicio y anular el color a map-get ($ colores, primario). Esto buscará la variable $ colores y el valor de la clave "primaria".

Este es el resultado de eso:

¡El color h2 ahora también es rojo! ¡Misión cumplida!

Como ahora puede haber descubierto, también puede usar cualquiera de las teclas en su variable $ colors. Intenta jugar un poco, ¡incluso agrega algunos nuevos!

Usar $ colors es una buena manera de realizar un seguimiento de todos los colores de la aplicación. Puede cambiar los colores de una gran cantidad de elementos al mismo tiempo con facilidad. En lugar de tener que acercar a todos los componentes diferentes y cambiar los colores manualmente, como tendría que hacer si no usa SCSS.

Reemplazar variables iónicas

En "src / theme / variables.scss" puede cambiar muchos diseños preestablecidos de Ionics. Por ejemplo, queremos cambiar el color de la barra de herramientas que ionic ha diseñado para nosotros. Podemos navegar a la documentación de Ionic 2 y buscar "barra de herramientas". Si se desplaza un poco hacia abajo, encuentra "toolbar-background", esto es lo que necesitamos. Aquí puede ver que el color del tema predeterminado está configurado en "# f8f8f8".

Vamos a cambiar el color de esta barra de herramientas a nuestro color primario. Navegue a su archivo "variables.scss" y agregue esto:

$ toolbar-background: map-get ($ colores, primario);

y listo, todos sus fondos de barra de herramientas en su aplicación se convertirán en nuestro color primario, que previamente configuramos en rojo.

Hm, pero ¿qué pasa si crees que la barra de herramientas es demasiado pequeña? ¿Y quieres aumentar su altura? ¡Puedes hacerlo de una manera muy similar!

Vaya a la página Anulación de variables en la documentación de Ionic 2 y busque la altura de la barra de herramientas.

en la parte inferior puede ver $ toolbar-ios-height, $ toolbar-md-height y $ toolbar-wp-height. ¡Estas son las diferentes barras de herramientas para las tres plataformas para las que está desarrollando! ios = Iphone, md = Android y wp = Windows Phone. Para probarlo, elija la barra de herramientas de iOS y colóquelo en "variable.scss" y simplemente establezca un nuevo valor, como este:

Eso resultará en esto:

Como puede ver, la barra de herramientas en iOS ahora es enorme. Siéntase libre de experimentar con esto e intente encontrar más componentes en los que pueda anular el estilo. Si no conoce el nombre del componente que está buscando, puede hacer clic derecho en el componente en el navegador y buscar el nombre de la clase del componente, ¡y luego usarlo para buscar en la documentación de Ionic 2!

También puede hurgar en el repositorio github de Ionic 2 para los diferentes componentes y ver qué variables tienen.

Utilice el diseño específico de la plataforma personalizada

Como está desarrollando una aplicación para tres plataformas al mismo tiempo, es fundamental que pueda personalizar sus componentes para cada uno de ellos por separado. Quiero decir, el diseño de material no funciona realmente bien en iOS.

Para demostrar esto, vamos a cambiar el color del texto

en la plataforma iOS.

Navega a este archivo:

src / app / app.scss

Aquí puede agregar variables SCSS globales. Lo que significa que los estilos que pones aquí se aplicarán a toda la aplicación.

Para que el texto "

" en iOS sea verde, simplemente agregue este SCSS a ese archivo:

.ios {
  pag {
    color verde;
  }
}

Eso resultará en esto! :)

Creo que esta es fácilmente una de las características de estilo más valiosas que trae Ionic 2.

Este es un ejemplo muy simple de cómo hacer esto. Pero si te imaginas las posibilidades! Básicamente, puede crear una aplicación y hacer que se vea súper nativa y diferente en cada plataforma. Las animaciones de los botones probablemente deberían ser diferentes para que cada plataforma coincida con las animaciones nativas, ¿verdad? Espero que entiendas cuánto tiempo estás ahorrando al hacer esto en lugar de desarrollar tres aplicaciones nativas diferentes.

¡Terminaré mi recorrido aquí, y te dejo! Intenta jugar tanto como puedas y hay mucho más que aprender sobre Ionic 2. Acabo de cubrir los conceptos básicos del estilo.

Pero recuerde, cuando comprenda cómo hacer todo esto, ¡podrá combinar todas las cosas para crear aplicaciones realmente atractivas!

Haré publicaciones similares en el futuro sobre otros aspectos del marco de trabajo Ionic 2, como cómo consumir Api, pruebas E2E y otras cosas divertidas.

¡Envié el resultado de este tutorial a mi Github si quieres verlo!

¡Te veo pronto!