Plataforma Android. Sesión 5: Drawables, estilos y temas. Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

(1)

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

Plataforma Android

(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

(3)

Elementos drawables

• Recurso que puede ser dibujado en pantalla

• Color

• Gradiente

• Forma

• Imagen

• Nine-patch

• Animación

• Capa

• Estados

• Niveles

(4)

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

<?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>

(5)

Drawables: colores

• El drawable más sencillo

• Color sólido

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

(6)

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

(7)

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>

(8)

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

(9)

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>

(10)

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>

(11)

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>

(12)

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

(13)

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(

(14)

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

(15)

Drawables: imágenes nine-patch

(16)

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" /> 

(17)

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>

(18)

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>

(19)

Drawables: animación por fotogramas

• 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);

(20)

Drawables: animación por fotogramas

• 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();

(21)

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>

(22)

Un ejemplo de estilo

<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>

(23)

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>