Arquitectura de Aplicacionesexpertojava.ua.es/dadm/restringido/android/traspas/sesion05-traspa… · Ciencia de la Computación e IA Drawables, estilos y temas - 6 Drawables: formas

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

© 2012-2013 Depto. Ciencia de la Computación e IA

Plataforma Android

Sesión 5: Drawables, estilos y temas


© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 2

Puntos a tratar

• Elementos drawables• Colores, formas y gradientes• Imágenes y nine-patch• Lista de estados• Capas• Animación por fotogramas

• Estilos y temas• Definición• Herencia• Aplicar estilos y temas



Elementos drawables

• Recurso que puede ser dibujado en pantalla• Color• Gradiente• Forma• Imagen• Nine-patch• Animación• Capa• Estados• Niveles

• Todos derivan de la clase Drawable



Elementos drawables

• Ejemplo de drawable:

• Guardar en /res/drawable-Xdpi• Referencia en el código: R.drawable.rectangulo• En XML

• Referencia: @drawable/rectangulo• Ejemplos de uso:

• Mostrarlo con un ImageView• Atributo android:background de un Button

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android= "http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#ff0000"/> <stroke android:width="2dp" android:color="#0000ff" android:dashWidth="10dp" android:dashGap="5dp"/></shape>



Drawables: colores

• El drawable más sencillo• Color sólido

<color xmlns:android="http://schemas.android.com/apk/res/android" android:color="#FF0000"/>



Drawables: formas

• Elemento shape para definir formas simples• Definición de dimensiones, fondo y bordes

• Atributo android:shape• oval• rectangle: bordes redondeados con subnodo corners y atributo

radius• ring: radio interno (innerRadius, innerRadiusRatio) y anchura

(thickness, thicknessRatio)

• Elementos comunes• stroke: atributos width y color• solid: atributo color• padding: atributos left, right, bottom, top



Drawables: formas

• Ejemplo<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"> <solid android:color="#f0600000"/> <stroke android:width="10dp" android:color="#00FF00"/> <corners android:radius="15dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /></shape>



Drawables: gradientes

• Elemento gradient• Tipos (atributo type)

• linear: ángulo angle• radial: radio en píxeles (gradientRadius) y posición (centerX,

centerY)• sweep

• Parámetros comunes• Obligatorios: startColor, endColor• Optativo: middleColor



Drawables: gradientes<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="false"> <gradient android:startColor="#ffffff" android:endColor="#ffffff" android:centerColor="#000000" android:useLevel="false" android:type="linear" android:angle="45" /> </shape>



Drawables: gradientes<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="false"> <gradient android:type="radial" android:startColor="#ffffff" android:endColor="#ffffff" android:centerColor="#000000" android:useLevel="false" android:gradientRadius="300" /> </shape>



Drawables: gradientes<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:useLevel="false" android:innerRadiusRatio="3" android:thicknessRatio="8"> <gradient android:startColor="#ffffff" android:endColor="#ffffff" android:centerColor="#000000" android:useLevel="false" android:type="sweep" /></shape>



Drawables: imágenes

• Imágenes en /res/drawable-Xdpi/ tratadas como cualquier recurso drawable

• Archivo nombre.extension• Identificador de recurso: R.drawable.nombre• Identificador en XML: @drawable/nombre

• Encapsuladas en la clase Bitmap• Inmutables: creado a partir de un array de píxels, un drawable de

tipo imagen, u otra imagen• Mutables: creando una imagen vacía o mediante una copia con

copy indicando que deseamos un bitmap mutable



Drawables: imágenes

• Creación de bitmaps mediante la clase BitmapFactory• Diferentes métodos decodeX para diferentes orígenes<

• Liberar memoria: método recycle

Bitmap imagen = BitmapFactory.decodeResource( getResources(), R.drawable.imagen);



Drawables: imágenes nine-patch

• Permiten especificar qué partes de la imagen “estirar”

• Divididas en nueve partes:• La parte central puede ser escalada en cualquier dirección• Las esquinas nunca pueden ser escaladas• Los bordes son escalados en su misma dirección



Drawables: imágenes nine-patch

• Herramienta draw9patch



Drawables: lista de estados

• Un drawable distinto para cada estado de un elemento de la interfaz (por ejemplo, un botón)

• Los drawables indicados pueden ser de cualquier tipo

• Alternativa: level list

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/boton_pressed" />  <item android:state_focused="true" android:drawable="@drawable/boton_selected" />  <item android:drawable="@drawable/boton_normal" /> </selector>



Drawables: capas

• Drawable a partir de varios elementos• Dibujados en orden (el primer elemento queda en el

fondo)

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/bottomimage"/> <item android:drawable="@drawable/image2"/> <item android:drawable="@drawable/image3"/> <item android:drawable="@drawable/topimage"/> </layer-list>



Drawables: animación por fotogramas

• Los fotogramas son drawables

• Atributos• duration: duración en milisegundos• oneshot: con valor false la animación será cíclica

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/spr0" android:duration="50" /> <item android:drawable="@drawable/spr1" android:duration="50" /> <item android:drawable="@drawable/spr2" android:duration="50" /></animation-list>




• Acceso desde el código (archivo animacion.xml)

• Definición por código:

AnimationDrawable animFotogramas = getResources().getDrawable(R.drawable.animacion);

BitmapDrawable f1 = (BitmapDrawable)getResources() .getDrawable(R.drawable.sprite0);BitmapDrawable f2 = (BitmapDrawable)getResources() .getDrawable(R.drawable.sprite1);BitmapDrawable f3 = (BitmapDrawable)getResources() .getDrawable(R.drawable.sprite2);

AnimationDrawable animFotogramas = new AnimationDrawable(); animFotogramas.addFrame(f1, 50);animFotogramas.addFrame(f2, 50);animFotogramas.addFrame(f3, 50); animFotogramas.setOneShot(false);




• Un BitmapDrawable es un Bitmap que puede ser asignado como drawable

• Comenzar animación:

• Detener animación:

• No utilizar el método start en onCreate• El drawable todavía no ha sido asignado a la vista.• Utilizar el método onWindowFocusChanged

animFotogramas.start();

animFotogramas.stop();



Estilos y temas

• Permiten modificar el aspecto de una vista o actividad• Definido en un XML separado del layout (en /res/values/)• Filosofía CSS

• Modificar aspecto sin cambiar código

• Elemento style con atributo name y uno o más elementos item

<?xml version="1.0" encoding="utf-8"?><resources> <style name="NombreEstilo"> <item name="NombreAtributo">value</item> </style></resources>



Un ejemplo de estilo<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#00FF00" android:typeface="monospace" android:text="@string/hello" >

<?xml version="1.0" encoding="utf-8"?><resources> <style name="EstiloFuente"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#00FF00</item> <item name="android:typeface">monospace</item> </style></resources>

<TextView style="@style/EstiloFuente" android:text="@string/hello" />



Herencia

• Extender estilos base• Ahorrar código• Aspecto homogéneo

• Atributo parent<?xml version="1.0" encoding="utf-8"?><resources> <style name="TextoBase"> <item name="android:textSize">14sp</item> <item name="android:textColor">#111</item> </style> <style name="TextoPequenyo" parent="TextoBase"> <item name="android:textSize">8sp</item> </style></resources>



Aplicando estilos y temas

• Estilo• Vista• ViewGroup (no se aplica a los elementos hijo)• Atributo style al elemento correspondiente en el layout

• Tema• Actividad o aplicación completa• Cada vista toma las propiedades aplicables a ella• Atributo android:theme a un elemento activity o al elemento

application en el Manifest



¿Preguntas...?

Documents

Arquitectura de Aplicacionesexpertojava.ua.es/dadm/restringido/android/traspas/sesion05-traspa… · Ciencia de la Computación e IA Drawables, estilos y temas - 6 Drawables: formas