Bueno chicos yo no soy ingeniero ni mucho menos esto que voy a explicar aquí, es lo que yo fui experimentando con este programa que es parte de las herramientas de Android SDK, además voy a agregar algo de información de otras personas que me parece interesante y muy bien explicada.
Al lío
INTRODUCCION
[SIZE=""]¿Qué son las imágenes 9-patch en Android? [/size]
POR Javielinux
Aqui
Una cosa que descubrí hace poco en Android y que me gustó mucho fueron los archivos 9-patch. Ahora que los he descubierto no sé como he podido vivir sin ellos. Este tipo de archivos permite la creación de imágenes de fondo o botones a medida. Lo más interesante es que se escalan automáticamente por el lugar que nosotros le queramos y esto hace que podamos usarlo en cantidad de ocasiones, sobretodo ahora que en Android tenemos muchos dispositivos con resoluciones de pantalla diferentes.
Vamos a ver un ejemplo.
*A continuación vemos el archivo 9-patch.
Este archivo lo he cogido de los recursos del SDK de Android. Como podéis ver en los recursos del SDK hay muchos archivos que tienen esas líneas alrededor, todos ellos tiene extensión ".9.png" y son archivo 9-patch. ¿Para que sirven estas líneas?
*La línea izquierda y superior determinan la zona de la imagen que se puede expandir. Fijaos como si proyectos esas líneas sobre la imagen nos dará la zona de la imagen que podrá expandirse, y que en ningún momento pasa por las esquinas de la imagen ni por el pico del bocadillo. A continuación podemos ver que es la parte rayada la que se puede expandir.
La línea de la derecha y la de abajo no son obligatorias, aunque si recomendables, y determinan el padding (relleno) que tendrá el contenido de la imagen cuando la usemos como botón o como fondo.
*Para entenderlo mejor veamos el siguiente ejemplo que he preparado.
Se ve claramente como funciona y lo fácil que es usarlo. Fijaos que el bocadillo siempre queda perfecto y ni los bordes redondeados ni el pico del bocadillo se deforman.
¿Cómo podemos crear nuestro propio 9-patch?
Primero crea la imagen con Gimp (puedes usar Photoshop o cualquier otro aunque son peores ), luego carga la imagen en el programa "draw9patch" que tienes en el directorio "tools" del SDK.
Es en ese programa donde tendrás que pintar las líneas negras de 1 pixel que determinan el relleno y expansión del archivo 9-patch. Finalmente sólo tienes que guardar la imagen con extensión ".9.png".
Ya tienes preparada tu imagen. Sólo tienes que copiarla a los recursos del sistema y usarla como cualquier imagen dentro de tu programa, el sólo se encargará de expandirla y hacer el relleno.
¿Cómo he podido vivir sin esto hasta ahora?
ANTEZ DE EMPEZAR
Es necesario tener instalado el SDK de androide en el ordenador
Ver tuto INSTALAR Android SDK
Video
LINK
Aquí:
http://www.gskbyte.net/2010/04/04/co...-para-android
Imagenes 9Patch básicas en Android
He aquí una guía rápida para crear Imágenes 9Patch con la herramienta 9Patch del SDK de Android. Recuerde tener preparada la imagen que desea usar para crear su imagen estirable.
1 Podemos encontrar en la siguiente ubicación C:\Program Files\Android\android-sdk\tools el archivo draw9patch.bat
1-1Hacemos doble click sobre (draw9patch.bat)
Nos saldrá una ventana así
1-2 Arrastre su imagen PNG en la ventana de 9Patch (o Archivo> Abrir 9-patch ... para localizar el archivo) ahora open . Su espacio de trabajo esta en el panel de la izquierda. Esta es el área de dibujo, en el que puede modificar las líneas de los parches estirable y área de contenido. En el panel de la derecha está el área de previsualización, donde se puede obtener una vista previa gráfica cuando se estira.
Haga clic en el perímetro de 1 píxel para dibujar las líneas que definen los parches y extensible (opcional) área de contenido. Botón derecho del ratón (o pulsar Mayús y hacer clic en Mac) para borrar las líneas previamente dibujadas
Cuando haya terminado, seleccione Archivo> Guardar 9-patch ... Su imagen se guardará con el IMGnombre.9.png nombre de archivo y se agrega .9 antes de la extensión .png
Nota: Un archivo normal PNG ( *. png ) se cargan con un vacío de un píxel borde añadido alrededor de la imagen, en la que se pueden dibujar los parches estirable y área de contenido. Un archivo guardado previamente 9-patch ( *. 9.png ) será cargado como está, sin área de dibujo añadido, porque ya existe.
Controles opcionales incluyen:
* Zoom: Ajusta el nivel de zoom del gráfico en el área de dibujo.
* Patch scale: Ajuste la escala de las imágenes en el área de vista previa.
* Show lock: Visualice el área no dibujable de la gráfica al pasar el ratón por encima.
* Show patches: Vista previa de los Patch de elástico en el área de dibujo (el rosa es la sección extensible).
* Show content: Resalte el área de contenido en las imágenes de vista previa (el púrpura es el área en la que el contenido está permitido Ej. En un botón con texto define como se alinea el texto).
*Show bad patches: añade un borde rojo alrededor de las áreas de parches que pueden producir artefactos en el gráfico cuando se estira. La coherencia visual de su imagen estirada se mantendrá si se eliminan todos los baches.
Al confeccionar un archivo 9Patch siempre tenemos que tener en cuenta, en el caso que sea necesario visualizarlo en modo paisaje, que no se desforme la imagen manteniendo su integridad.
. He aquí algunas técnicas 9patch:
Un ejemplo: solo botón
Esto es sólo un botón simple, con un efecto brillante. 9patch El que yo uso aquí, mantiene los bordes del botón, por lo que mantiene el radio rectángulo redondeado en las esquinas. Con 9patch, el área de contenido del botón se puede configurar fácilmente.
Ejemplo dos: el botón giratorio
Este es un botón de selección, con el mismo efecto brillante . Con este 9patch, en la flecha desplegable mantiene su tamaño en horizontal al estirarse. El efecto brillante se queda en el centro del botón
Ejemplo tres: el fondo de encabezado
Al igual que en las páginas web, grandes imágenes de fondo se puede crear fácilmente a partir de una imagen pequeña. 9patch Esto se extiende al centro de la imagen, por lo que parece continua. La longitud del trazado, no importa. Por ejemplo, esto es útil para crear barras de menús o por ejemplo crear una imagen para la cortina de estatus bar a partir de una imagen 8x8 pixeles con un solo color.
El usar una imagen mas pequeña puede ahorrar espacio y memoria a la vez que el móvil trabaje mas aliviado.
Ejemplo cuatro: Cabecera de fondo 2
En este ejemplo, yo uso la última columna de la imagen, para la extensión horizontal. Esta debe ser una columna de un solo color. La imagen comienza en el lado izquierdo de la disposición mostrando el diseño, si es estirada, se llenara hasta el final con un solo color
Ejemplo cinco: Buscar EditText
Usted puede crear su propia extensión, horizontal -. EditText independiente con 9patching Tenga cuidado de establecer el área de contenido (texto) de la imagen, como se ve a continuación.
Nota: si la sección donde se muestra el texto no esta bien distribuida puede que el texto, se vea: muy arriba muy abajo en dos linease etc…
Creo que mas o menos esta explicado si hay dudas puedes hacer pruebas y error para ir familiarizándose con el uso de esta aplicación
Consejos
1 Hacer un acceso directo en el escritorio.
2 arrastrar directamente las imágenes al acceso directo, ejecuta el programa y abre la imagen .
3 antes de editar una imagen con cualquier editor quite las limeas negras para evitar problemas luego la firmas nuevamente.
Recuerda que:
Solo veras las líneas negras al trabajar con un archivo descompilado.
Si firmas un archivo con 9patch no se puede poner directamente en un APK es necesario compilar para que funcione.
Que lo disfruten y cualquier duda preguntan.