Este tutorial esta formado por dos partes, la primera donde tocaremos el asunto de las imágenes y la segunda parte que sera la modificación propia de controles.
Realmente esto es útil para aquellos que no sean diseñadores, o que esten empezando con el asunto del diseño.
A quien no le ha pasado alguna vez que crea un icono para un botón con un determinado tamaño por ejemplo 60*120px, y se da cuenta de que ocupa demasiado(o que no siempre va a tener el mismo tamaño), así que en su inexperiencia, tiene la idea de reducir dimensiones y hacer un rescalado a 30*30px, y luego ya se le especifica tamaños en el xml, pero claro en ejecución te das de bruces con esa variación forzosa(metida a código con un fill_parent por ejemplo) falla estrepitosamente.
Dado el escenario de trabajo que nos plantea Android, principalmente trabajamos con dispositivos móviles donde prima la optimización de recursos, no es muy adecuado tener megas y megas de imagenes, asi que cuando quieres personalizar controles(botones, spinners, etc..), debes utilizar la herramienta "C:\Program Files (x86)\Android\android-sdk\tools\draw9patch.bat",la cual te permite optimizar cualquier imagen que deses utilizar en tus controles para que no se rescale de forma inadecuada al estar en ejecución.
1.- Tener un par de imagenes básicas:
Dado el escenario de trabajo que nos plantea Android, principalmente trabajamos con dispositivos móviles donde prima la optimización de recursos, no es muy adecuado tener megas y megas de imagenes, asi que cuando quieres personalizar controles(botones, spinners, etc..), debes utilizar la herramienta "C:\Program Files (x86)\Android\android-sdk\tools\draw9patch.bat",la cual te permite optimizar cualquier imagen que deses utilizar en tus controles para que no se rescale de forma inadecuada al estar en ejecución.
1.- Tener un par de imagenes básicas:
2.- Ejecutar Draw9patch:
"C:\Program Files (x86)\Android\android-sdk\tools\draw9patch.bat"
3.- Arrastrar el archivo de imagen a modificar a la ventana de Draw9patch:
4.- Seleccionar los pixels que podrán modificarse, mirando la imagen se ve unos pixels negros en los bordes de la imagen base, y una tonalidad morada/rosa en el centro donde coinciden las cuadriculas superiores e inferiores, estas zonas verdes y rosa son marco y contenido, es decir el marco puede alargarse, y la rosa expandirse en todas direcciones, pero el marco siempre mantendrá su grosor original aunque se extienda 1000 pixels. Si os fijáis veréis que en mi imagen de ejemplo la linea negra inferior no coincide en longitud exactamente con la superior, con borrar el pixel(botón derecho del ratón, o pulsar shift) seria suficiente para evitar algún problema.
5.- Guardar la nueva imagen con "nombre_.9.png", esta imagen es la que debe usarse en el proyecto.
No hay comentarios:
Publicar un comentario