En este post vamos a intentar hacer un menu con alguno íconos de ajedrez en Android.
Para esto vamos a crear un nuevo proyecto vacío llamado "ChessLab03"
Recordemos que ChessLab02 se utilizó para probar el manejo del layout y el intercambio de imágenes con diagramas de figuras de ajedrez con resultados muy buenos de acuerdo a nuestras expectativas, y ChessLab01 se utilizó para probar las fonts de ajedrez, con resultados aún muy pobres pero confiamos en que vamos a volver sobre este post y este aspecto
El objetivo de ChessLab03, es imitar en Android el siguiente menu que teníamos en la web:
Veremos que pasa con ChessLab03 y los menú en Android...
Creamos un nuevo branch para "ChessLab03", y un nuevo proyecto en Android vacío:
Con el directorio de trabajo:
/Users/pabloin/Desktop/NoCuestaNada/Mob/GitHub-Android-Chess/ChessLab03
... estaba predispuesto a hacer el menú desde cero, tomando ejemplos desde los cursos e Internet, pero ya tenemos un Layout con un menú, así que vamos a empezar por ahí:
Y con esto configurado, estamos listos para comenzar
Parece que apareció con la versión Lollipop, los gráficos escalan mejor y hacen más livianas a las .apk. Una de las ventajas mas grandes de los Drawables es que se arman en tiempo de ejecución, con lo cual naturalmente escalan con el dispositivo a la adecuada densidad de la pantalla...
Nuevamente recomiendo el post https://blog.stylingandroid.com/vectordrawables-part-1/ para tener una mejor comprensión de la parte teórica de los drawables y los SVG
Pero: ¿Como puedo generar?...
– dp (Density-independent Pixels)
Es una unidad abstracta que se basa en la densidad física de la pantalla. Esta unidad es equivalente a un píxel en una pantalla con una densidad de 160 dpi. Cuando se está ejecutando en una pantalla de mayor densidad, se aumentan el número de píxels utilizados para dibujar 1dp según los dpi’s de la pantalla. Por otro lado, si la pantalla es de menor densidad, el número de píxeles utilizados para 1dp se reducirán. Utilizar las unidades dp en lugar de píxeles es la solución más simple para tratar los diferentes tamaños de pantalla de los dispositivos.
Definición tomada del blog, del cual recomiendo leer el resto del post:
Para esto vamos a crear un nuevo proyecto vacío llamado "ChessLab03"
Recordemos que ChessLab02 se utilizó para probar el manejo del layout y el intercambio de imágenes con diagramas de figuras de ajedrez con resultados muy buenos de acuerdo a nuestras expectativas, y ChessLab01 se utilizó para probar las fonts de ajedrez, con resultados aún muy pobres pero confiamos en que vamos a volver sobre este post y este aspecto
El objetivo de ChessLab03, es imitar en Android el siguiente menu que teníamos en la web:
Comencemos
Paso 01: Creamos el Proyecto ChessLab03 y lo subimos a GitHub
En GitHub estamos trabajando en https://github.com/PabloEzequiel/AndroidCreamos un nuevo branch para "ChessLab03", y un nuevo proyecto en Android vacío:
Con el directorio de trabajo:
/Users/pabloin/Desktop/NoCuestaNada/Mob/GitHub-Android-Chess/ChessLab03
Estamos utilizando el Navigation Drawer:
Y ejecutamos el proyecto vacío, con el texto "Hola ChessLa03!"
Que contiene un menu como queríamos, que en el paso siguiente vamos a comenzar a customizarlo para que se adapte a nuestro proyecto "ChessLab03"
Queda hacer el push al branch de GitHub
Paso 02: Modificamos el Navigation Drawer menu
La idea es incluir en el menú lo que anticipábamos en la vista web: Las opciones de "Mate en 1, 2, 3 y 4". Vamos a obviar lo obvio... por ejemplo, cambiar textos del menu en android (archivo activity_main_drawer.xml), y continuar con lo menos obvio, al menos para mi:
Observemos que en el proyecto las imágenes de la cámara, galería, tools... están representadas con un XML que es un vector. O sea, no es un PNG, ni un JPG, ni un GIF. Y acá es un punto que yo desconozco, así que vamos a averiguar esto:
¿Como cambiamos las imágenes? ¿Que son los vectores? ¿Puedo hacer mis propios vectores de imágenes? ¿Cómo se generan?
Observemos que en el proyecto las imágenes de la cámara, galería, tools... están representadas con un XML que es un vector. O sea, no es un PNG, ni un JPG, ni un GIF. Y acá es un punto que yo desconozco, así que vamos a averiguar esto:
¿Como cambiamos las imágenes? ¿Que son los vectores? ¿Puedo hacer mis propios vectores de imágenes? ¿Cómo se generan?
Un buen lugar de referencia para obtener una buena respuesta a estar preguntas es la página oficial:
https://developer.android.com/studio/write/vector-asset-studio.html?hl=es
y otro post más cómodo para leer es:
https://blog.stylingandroid.com/vectordrawables-part-1/
Y como es muy extensa la explicación vamos a copiar brevemente dos o tres ideas sobre los drawables.....
https://developer.android.com/studio/write/vector-asset-studio.html?hl=es
y otro post más cómodo para leer es:
https://blog.stylingandroid.com/vectordrawables-part-1/
Y como es muy extensa la explicación vamos a copiar brevemente dos o tres ideas sobre los drawables.....
Parece que apareció con la versión Lollipop, los gráficos escalan mejor y hacen más livianas a las .apk. Una de las ventajas mas grandes de los Drawables es que se arman en tiempo de ejecución, con lo cual naturalmente escalan con el dispositivo a la adecuada densidad de la pantalla...
Nuevamente recomiendo el post https://blog.stylingandroid.com/vectordrawables-part-1/ para tener una mejor comprensión de la parte teórica de los drawables y los SVG
Pero: ¿Como puedo generar?...
Paso 03: Generando Images Drawables
Se me complicó la idea de la búsqueda de un plugin de Gimp para hacer esto, o alguna otra herramienta buena, de uso libre. Con lo cual este punto, por ahora, quedará inconcluso en el siguiente post: http://javaen.blogspot.com.ar/2016/04/chess-y-menu-parte-iii-drawables.html
Afortunadamente, y después de no poco trabajo, pudimos lograr el objetivo de encontrar la forma de trabajar comodamente con las imágenes vectoriales, con el software open source incscape en el centro de la solución:
Paso 04: Usando imágenes vectoriales en Android
Por fin, llegamos al paso que queríamos llegar: intentaremos agregar al SVG dentro de Android, como un drawable
Origen:
Conversor SVG to Drawable
Que nos genera el siguiente drawable a partir del SVG:
El cual copiamos dentro del proyecto Android
Y en Android:
Y ahora agregamos la imagen Drawable, de un caballo
Y a continuación, veamos como se ve el caballo integrado en el menú de un Nexus:
Y de una tablet, manteniendo las proporciones:
Un poco de teoria
Repasemos un poco de teoría sobre las imágenes. En Android las imágenes se miden en "dp, px, pt", "mm, in". Donde dp (las mas interesante) son los mas comunes y básicamente significa:
– dp (Density-independent Pixels)
Es una unidad abstracta que se basa en la densidad física de la pantalla. Esta unidad es equivalente a un píxel en una pantalla con una densidad de 160 dpi. Cuando se está ejecutando en una pantalla de mayor densidad, se aumentan el número de píxels utilizados para dibujar 1dp según los dpi’s de la pantalla. Por otro lado, si la pantalla es de menor densidad, el número de píxeles utilizados para 1dp se reducirán. Utilizar las unidades dp en lugar de píxeles es la solución más simple para tratar los diferentes tamaños de pantalla de los dispositivos.
Definición tomada del blog, del cual recomiendo leer el resto del post:
Por otro lado, otra lectura muy recomendada, es la del siguiente link de GitHub sobre ImageView y como se comporta en las imágenes de Android:
Un poco de práctica
Con esta teoría, donde yo estuve utilizando imágenes SVG de 64dp, y que tiene definido espacios de 16 dp respecto a sus bordes y elementos adyacentes ¿Esto se puede medir y verificar en una imagen JPG creada con el GIMP?
Vamos a verificarlo: Con el GIMP vamos a recortar la imagen del Nexus que mostramos más arriba.
Es una imagens de 480x800 pixeles. El caballo grande, es el archivo PNG original que agregué en una nueva capa, para compararlo con el caballo pequeño que es el archivo SVG que android escal en unidades dp
Al abrirla con el GIMP, y poner algunas guías, quedan las distancias en pixeles que suponíamos:
Reducimos la escala del caballo grander PNG con el GIMP a una altura de 64 pixeles. Y como se observa en la imagen, quedó exactamente igual al caballo de la izquierda, que es la imagen SVG definida en 64dp para android.
Con esto damos por cerrado el post de insertar imágenes Drawables y SVG en Android
Quedaría pendiente agregar las secciones internas de los puntos del menu, para completar el ejercicio ChessLab03
GitHub
La versión exacta, como se ve en este post, es es siguiente Pre-Release:
0 comentarios:
Publicar un comentario