Computing">
Crear Imágenes Redimensionables
Crear Imágenes Redimensionables
Crear Imágenes Redimensionables
La plataforma Android proporciona dos soluciones que permiten producir imágenes que se adaptan
automáticamente a las dimensiones de los controles a los que están vinculadas. Veremos, en esta
sección, dos técnicas, una orientada al aspecto gráfico y otra orientada a los desarrolladores.
a. Presentación
Las imágenes nine-patch (a menudo descritas como 9-patch) son elementos visuales con formato
PNG que contienen, además, información sobre las zonas que pueden ser estiradas por el sistema.
Estas imágenes tienen como extensión de archivo " .9.png".
El principio de funcionamiento de las imágenes 9-patch es el siguiente: se definen en la imagen
zonas horizontales y verticales que pueden estirarse para adaptarse a las dimensiones deseadas,
así como las zonas que pueden rellenarse - en el caso de un botón o de una zona de texto, por
ejemplo.
El siguiente esquema presenta estas zonas para un objeto de fondo de una zona de texto:
Como puede verse en el esquema, hemos definido una zona extensible, a la izquierda y arriba, que
no integra el redondeo del borde del rectángulo: estas zonas no se verán afectadas por el
redimensionamiento y, por tanto, no serán estiradas.
Cuando este elemento se agrande tendrá como resultado el siguiente aspecto visual:
A la izquierda se muestran las zonas de texto que tienen un fondo con formato PNG, mientras que
aquellas que aprovechan un fondo definido en formato 9- patchse muestran a la derecha.
La creación de imágenes 9-patch no presenta, a priori, ninguna dificultad: a partir de una imagen en
formato PNG basta con ampliar la imagen dos píxeles en anchura y altura y, a continuación,
posicionar los píxeles negros según convenga.
No obstante, en la práctica, utilizar un programa clásico de procesamiento de imágenes no da
buenos resultados: la mayoría de programas realizan, en efecto, procesamientos sobre la imagen
que la vuelven inutilizable en 9-patch: modificaciones (inapreciables) en el color de los píxeles que
sirven para indicar las zonas, aplicación de filtros antialiasing, etc. El formato 9-patch impone, en
efecto, que los píxeles que delimitan las zonas sean de estricto color negro ((0,0,0) en RGB), y que
estén situadas exactamente en el borde de la imagen.
Para producir imágenes 9-patch es preferible utilizar una herramienta específica, disponible de
manera gratuita, llamada Draw 9-patch, que se incluye con el SDK Android, en la
carpeta sdk/tools/. Para iniciar el programa basta con ejecutar el archivo draw9patch.bat.
Seleccione File - Open 9-patch y seleccione su archivo de origen (en formato PNG).
Para definir las zonas basta con trazar, con ayuda del puntero del ratón, las marcas de las
zonas en los bordes izquierdo e inferior (para la zona de ampliación) y derecho y superior
(para la zona de relleno).
Tan solo queda guardar el elemento visual creado de este modo ( File - Save as 9-patch ) e
importarlo en Eclipse.
En efecto, además de los archivos gráficos clásicos (JPG, PNG, etc.), también es posible definir un
recurso dr awable mediante lenguaje XML. La plataforma Android permite crear formas sencillas
(rectángulos, óvalos, líneas y anillos) que pueden colorearse de distintas formas (relleno uniforme o
degradado).
En esta sección veremos cómo definir una forma sencilla y, a continuación, repasaremos las distintas
opciones disponibles para las formas. Por último, veremos cómo combinar varias formas entre sí.
<shape
xmlns:android=http://schemas.android.com/apk/res/android
android:shape="rectangle | oval | line | ring">
</shape>
Para visualizar las distintas formas, es indispensable definir un color de relleno: por defecto, las
formas son transparentes. Como toda modificación en las formas, tal y como veremos en la
siguiente sección, la definición del color se realiza mediante una etiqueta hija de la
etiqueta <shape>.
En primer lugar definiremos un color sólido, mediante la etiqueta <solid>. La propiedad colorde
dicha etiqueta permite especificar un color.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#888888"/>
</shape>
En este primer ejemplo no definiremos dimensiones para la forma: se utilizarán las dimensiones
especificadas en la etiqueta <ImageView>del archivo de layout que utiliza el elemento visual
que indique las dimensiones del rectángulo.
Observe que existen dos formas que requieren parámetros específicos, sin los que no pueden
mostrarse correctamente:
La forma "line". Es obligatorio informar una etiqueta <stroke>(trazo) para esta forma. Su
ausencia provocará una excepción en tiempo de ejecución. El color, si es único, se especifica
directamente como propiedad de dicha etiqueta en lugar de encapsularla en la
etiqueta <s olid>.
En el caso de que la forma seleccionada sea un anillo (r ing), existen parámetros
suplementarios disponibles para definir las dimensiones del anillo. Estos parámetros
permiten definir el ancho del anillo (thickness) y el radio del círculo interior (inner radius).
Ambos parámetros pueden expresarse bajo la forma de un porcentaje de la dimensión del
elemento visual, o como valor absoluto:
Antes de ver con más detalle las distintas posibilidades de modificación de una forma, repasaremos
algunos ejemplos, con los parámetros más básicos.
<shape
xmlns:android="[...]"
android:shape="line">
<stroke
android:width="2dp"
android:color="#888888"/>
</shape>
<shape
xmlns:android="[...]"
android:shape="rectangle">
<solid
android:color="#888888"/>
</shape>
<shape
xmlns:android="[...]"
android:shape="oval">
<solid
android:color="#888888"/>
</shape>
<shape
xmlns:android="[...]"
android:shape="oval">
<solid
android:color="#888888"/>
</shape>
<shape
xmlns:android="[...]"
android:shape="ring"
android:innerRadiusRatio="9"
android:thicknessRatio="3"
android:useLevel="false">
<solid
android:color="#888888"/>
</shape>
<shape
xmlns:android="[...]"
android:shape="ring"
android:innerRadiusRatio="6"
android:thicknessRatio="3"
android:useLevel="false">
<solid
android:color="#888888"/>
</shape>
<shape
xmlns:android="[...]"
android:shape="ring"
android:innerRadiusRatio="4"
android:thicknessRatio="4"
android:useLevel="false">
<solid
android:color="#888888"/>
</shape>
Para conseguir una mejor legibilidad, la etiqueta X ML así como la definición
del namespacese han omitido en la transcripción de los archivos XML de forma. Deben,
evidentemente, estar presentes en los archivos XML.
<solid>, que ya hemos visto, permite indicar un color único para el relleno.
<stroke>, que ya hemos visto, permite indicar que la forma posea un contorno.
Veremos con detalle los atributos de cada una de estas etiquetas, y algunos ejemplos de su
aplicación.
Etiqueta <corners>
Etiqueta <gradient>
La etiqueta <gr adient>, remplazando a <solid>, indica que el relleno debe ser de tipo
degradado. La plataforma Android autoriza tres tipos de degradado: lineal, radial y sweep (de tipo
circular), y ofrece la posibilidad de definir dos o tres colores para el efecto degradado (color de inicio
-s tartColor, de fin - endColor, y de transición - centerColor).
Según el tipo de degradado, existen varias opciones disponibles:
El siguiente elemento visual utiliza un gradiente de tipo sweep, cuyo color de inicio es "negro", y el
color de fin es "transparente".
Etiqueta <padding>
Etiqueta <size>
Esta etiqueta permite especificar las dimensiones de la forma. Sus dos atributos son, por
tanto,android:widthy android:height.
Es preciso, no obstante, tener en mente que, por defecto, el elemento visual definido se adapta a
las dimensiones de la vista que lo incluye: las dimensiones indicadas en la etiqueta <size>sirven,
por tanto, para indicar la relación ancho/alto de la forma. Si desea, en el marco de una
vista ImageView, que las dimensiones especificadas en la forma se utilicen de manera estricta, es
preciso declarar el atributo scaleTypecon el valor "center" en la etiqueta del imageView.
Etiqueta <solid>
Ya hemos mencionado la etiqueta < solid>, que incluye un único atributo, android:color, que
permite indicar el color de relleno de la forma.
Etiqueta <stroke>
La etiqueta <st roke>permite indicar que la forma tendrá los bordes con dibujo. Existen otros dos
atributos, android:widthy android:color, que permiten indicar respectivamente el ancho y
el color del borde, y posee dos atributos que permiten obtener efectos difícilmente realizables de
otra forma: andro id:dashWidth, que permite especificar que el borde esté dibujado de forma
punteada (da shWidth indica el ancho de cada punto) y android:dashGap, que indica la
distancia entre dos puntos.
El interés resulta inmediato: un fondo definido con 9-patch no podría adaptarse correctamente a las
dimensiones de la vista, y el borde punteado no se mostraría correctamente.
Cada etiqueta <item> hija de <layer-list> representa un recurso drawable, bien sea
un drawableXML o cualquier otro drawable(incluso recursos PNG).
Los elementos it em se dibujan los unos a continuación de los otros, en orden: el primer
elemento itemse dibujará en primer lugar, a continuación debajo el segundo, y así sucesivamente.
Para definir cada capa de manera fina, la etiqueta item posee los
atributos a ndroid:left,android:right, android:top y android:bottom. Estos
atributos aceptan únicamente valores absolutos, definidos típicamente en d p, y definen, según la
documentación oficial, el desfase ("offset") del ítem respecto a los bordes del conjunto del elemento
visual.
No obstante, esta noción de desfase resulta algo equivocada: en teoría un desfase no modifica la
forma. O, en el caso que nos ocupa, el desfase produce una modificación de la forma, que adapta
sus dimensiones al espacio disponible. Es, por ello, más conveniente ver estos
atributos le ft,right, topy bottomcomo los que permiten definir la zona rectangular en la que
se dibujará la forma.