programacion - Creación y uso de imágenes de 9 parches en Android

manual de programacion android pdf

Question

Recientemente escuché acerca de las imágenes de 9 parches. Sé que es de 9 azulejos y es estirable. Me gustaría saber más sobre esto.

• ¿Cómo puedo crear una imagen de 9 parches?

  ¿Hay alguna herramienta? ¿Puedo crearlo desde AndroidSDK o código?

• Principales ventajas de 9 parches sobre png regular?

  (¿Se puede estirar dinámicamente / automáticamente según la pantalla?)

Answer 1

¿Cómo puedo crear una imagen de 9 parches? ¿Hay alguna herramienta? ¿Puedo crearlo desde AndroidSDK o código?

Cuando busca en un motor de búsqueda principal la android 9-patch tool , el primer golpe es para la página de documentación para desarrolladores de Android en la herramienta draw9patch .

Principales ventajas de 9 parches sobre png regular? (¿Se puede estirar dinámicamente / automáticamente según la pantalla?)

La documentación del desarrollador de Android contiene otras páginas que describen archivos PNG de nueve parches . Esta documentación incluye pasajes como:

Un gráfico de NinePatchDrawable es una imagen de mapa de bits extensible, que Android cambiará de tamaño automáticamente para acomodar el contenido de la Vista en la que lo colocó como fondo. Un ejemplo de uso de un NinePatch son los fondos utilizados por los botones estándar de Android: los botones deben estirarse para adaptarse a cadenas de varias longitudes.

Answer 2

Principales ventajas de 9 parches sobre png regular

En realidad, 9 imágenes de parches son imágenes estirables y repetibles reducidas a su tamaño más pequeño. La imagen no se estirará y perderá proporciones en diferentes tamaños de pantalla. Una ventaja más y más grande es la memoria.

La misma memoria de tamaño pequeño se puede reutilizar para dispositivos de diferentes tamaños de pantalla . Las imágenes de 9 parches bien diseñadas son menos propensas a errores y tienen una alta capacidad de reutilización.

https://developer.android.com/studio/write/draw9patch.html

Answer 3

Con la imagen de 9 parches, puede elegir qué parte de la imagen se puede estirar. Debe ser una imagen png y el nombre debe terminar con .9.png (algo.9.png)

http://developer.android.com/tools/help/draw9patch.html

Herramienta simple para todas las densidades:

http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

Answer 4

Esta es una buena herramienta: haga clic aquí.

9 Las imágenes de parches son imágenes estirables y repetibles que se reducen a su tamaño más pequeño. El ejemplo más simple sería si tomara un div redondeado y lo dividiera en 9 cuadrados como lo haría con un tablero de tres en raya. Las cuatro esquinas no cambiarían el tamaño en absoluto, sino que serían estáticas, mientras que las otras 5 piezas se estirarían o repetirían para permitir que la imagen completa se escale adecuadamente.

Con esa explicación y la llegada de CSS3, podría pensar que no hay razón para usar 9 imágenes de parches, pero el nombre ''9 parches'' es un nombre inapropiado. Las imágenes se pueden dividir en pedazos aún más pequeños.

9 Las imágenes de parches contienen un índice de qué pieza es lo que agrega un borde de 1px a la imagen. Los colores en el borde determinan si una pieza es estática (no se escala), se estira o se repite.

Presentación de Google: https://docs.google.com/present/view?id=dc7ghz8w_34f8338rcg

Consulte también la información para desarrolladores de Android sobre imágenes de 9 parches: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

Answer 5

Hoy descubrí nueve imágenes de parches. La documentación oficial (vinculada a las otras respuestas) está bien, supongo, pero realmente carece de ejemplos.

Este pequeño tutorial tiene algunos ejemplos excelentes al final que responden a la segunda parte de su pregunta, explicando cómo funciona el escalado, no solo para los botones, sino también los marcos, y tiene un proyecto de ejemplo completo que puede descargar y jugar. La ventaja más importante sobre PNG es que nueve imágenes de parches pueden especificar áreas no contiguas para escalar .

Para responder la primera parte de su pregunta, el SDK (y ahora Android Studio) se entrega con "Draw 9-patch" ("draw9patch" en la carpeta de herramientas del SDK), que es un editor simple. Aquí hay uno más bonito que también es de código abierto. Tiene una imagen por defecto simple pero inteligente.

Answer 6

La mayoría de los ejemplos hablan sobre la creación de una imagen de 9 parches, pero los detalles de la implementación generalmente se dejan en un nivel alto.

La publicación de Nick arriba - con el buen tutorial de 9 parches que proporciona un archivo de descarga de un proyecto en funcionamiento, salvó el día.

Aquí están los principales detalles de la implementación que me funcionaron (una vez que tienes una imagen de 9 parches lista para usar) :

1. Haga referencia al dibujo con el nombre, pero no incluya .9.png (la función de autocompletar en eclipse se encargará de esto)

2. Asegúrese de que solo tenga 1 imagen en la carpeta principal / dibujable (no una versión para cada carpeta de ppp)

3. La imagen debe especificarse usando: fondo, no: src (esto me atascó por un tiempo)

   android:background="@drawable/splash_logo"

4. Asegúrese de que la imagen y el diseño que la contiene están utilizando:

   android:layout_width="fill_parent"  android:layout_height="fill_parent"

Answer 7

1. ¿Qué son las imágenes de NinePatch?

Las imágenes de NinePatch son imágenes PNG que marcan las partes de una imagen que se pueden estirar. Tienen una extensión como image_name.9.png .

2. ¿Dónde se almacenan en el proyecto de Android?

res/drawable/image_name.9.png

3.¿Cómo crear una imagen de NinePatch para su aplicación anndroid?

Android SDK incluye una herramienta WYSIWIG draw9patch.jar dentro de su carpeta de /tools SDK de Android.

Answer 8

Paso 1 : Ya que no estás familiarizado todavía, prepara una imagen grande de png xxxhdpi para jugar primero.

Paso 2 , el campo expandible de la imagen deseada debe ser más corto (eliminando la parte de color redundante / repetida) como sea posible, ya que el parche 9 no "reduce" tal cosa, pero "expande" la imagen.

Personalmente uso la herramienta de línea de comandos ImageMagick para convertirla, por ejemplo:

convert -trim ''my_image.png'' png32:my_image_trim.png #trim extra transparent surrounded image
rm lala*; convert my_image_trim.png -crop 310  +repage  +adjoin  png32:lala%02d.png #cut redundant/repeat center part
convert +append lala02.png lala05.png png32:out_right.png #append left/right images side by side
convert -resize 144x144/! out_right.png png32:my_image.png #resize to the desired dpi

Hay un error cuando se convierte: debo prefijo con png32, o de lo contrario obtendré una imagen negra de 9 parches, vea este hilo .

Paso 3 , copie la imagen en Android Studio dibujable, luego haga clic derecho y elija el elemento del menú "Crear archivo de 9 parches ...". Se generará una nueva imagen .9.png con el mismo nombre de imagen. Ahora solo puedes borrar la imagen original. Tenga cuidado al jugar con refactor para cambiar el nombre de la copia de seguridad, ya que también cambiará el nombre de la ID de la imagen XML, y le preguntará por qué la imagen de 9 parches no funciona, ya que XML sigue haciendo referencia a la imagen de no 9 parches.

El paso 4 , las líneas negras izquierda y superior 2 forman un área rectangular expandible, mientras que las 2 líneas negras derecha e inferior forman un área rectangular de texto.

El tamaño de su imagen aumentará en su área expandible declarada a medida que crece el texto. Mientras que el área de texto significa que el texto solo permite en esa área.

No tiene que dibujar el punto negro / líneas desde cero para un uso simple, ya que existen 4 líneas negras detrás de la parte superior, izquierda, inferior, derecha de esa imagen si su imagen de 9 parches generada por Android Studio. "Acercar" a mayor si no puede ver para arrastrar esas líneas.

La posición original de 2 líneas negras, vertical y horizontal, ambas declaran un área expandible:

• La posición original de la línea vertical izquierda es entre la parte superior izquierda y la parte inferior izquierda
• La posición original de la línea horizontal superior está entre la parte superior izquierda y la superior derecha.

La posición original de 2 líneas negras, vertical y horizontal, ambas declaran un área de texto:

• La posición original de la línea vertical derecha es entre la parte superior derecha y la parte inferior derecha.
• La posición original de la línea horizontal inferior está entre la parte inferior izquierda y la parte inferior derecha.

Arriba está la posición original de las líneas negras antes de comenzar a arrastrar para reducir la longitud, para ajustar la posición inicial y la posición final de esas líneas.

Tanto las áreas expandibles como las de texto pueden ser diferentes dependiendo de sus necesidades. Pero el área normalmente expandible debe ser igual o menor que el área de texto , un ejemplo clásico será la imagen de la burbuja de chat:

La imagen de arriba tiene el mismo ancho de líneas negras superior e inferior, pero la línea negra derecha es más alta que la línea izquierda, lo que también significa que el texto permanece constantemente hasta la mitad de la curva inferior, ya sea en tamaño mínimo o en tamaño expandido. Y sólo se expande en el cuerpo del área de texto.

Ahora sabrá los dos beneficios de 9-Patch: la línea inferior y la derecha forman un área de texto que garantiza que el texto nunca se derrame hacia fuera de la curva de imagen . Y también definió qué parte del área de texto responsable de expandir la imagen a medida que crece el texto, mientras mantiene la curva sin escalar .

Desplazando la línea podrá ver las posiciones x, y en píxeles, ayuda a medir que ambas líneas estén iguales o menos en posición.

Debe recordar la posición de la línea al arrastrar, ya que la línea izquierda puede arrastrar hacia el lado derecho, y la línea derecha puede arrastrar hacia el lado izquierdo, y puede perderse de qué línea es la línea expandible y qué línea es la línea de texto.

Hay 2 casillas de verificación importantes que debe marcar, es decir, casillas de verificación "Mostrar parches" y "Mostrar parches malos".

En la casilla "Mostrar parches malos", si dibuja el área expandible pero cubre la línea curva de su imagen en lugar de una línea recta, marcará esa área como roja para advertirle. Puede limitar su línea para descartar esa advertencia roja, o simplemente ignorarla. Tenga en cuenta que, la advertencia roja puede inducir a error, lo que en realidad puede ser causado por la línea opuesta, en ese caso, debe restringir la línea opuesta para descartar esa advertencia roja.

Paso 5 , En xml, puedes referirte a esa imagen como fondo de TextView como abajo, usa wrap_content para hacerla expandible:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/your_9_patch_image_name_excluded_.9"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <2nd TextView />
</LinearLayout>

Cuando juegas por primera vez con él, aseguras que no haya rellenos en la vista de texto o en el elegante diseño de los padres, o te preguntarás por qué no funciona como se espera.

Ejemplo de fondo de botón:

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:background="@drawable/your_9_patch_image_name_excluded_.9"
        android:layout_gravity="center"
        />