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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 3
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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• 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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 5
Drawables: colores
• El drawable más sencillo• Color sólido
<color xmlns:android="http://schemas.android.com/apk/res/android" android:color="#FF0000"/>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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• padding: atributos left, right, bottom, top
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 9
Drawables: gradientes<!-- Rectángulo con gradiente lineal --><?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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 10
Drawables: gradientes<!-- Oval con gradiente radial --><?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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 11
Drawables: gradientes<!-- Anillo con gradiente de tipo sweep --><?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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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
copy indicando que deseamos un bitmap mutable
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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( getResources(), R.drawable.imagen);
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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• Los bordes son escalados en su misma dirección
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 15
Drawables: imágenes nine-patch
• Herramienta draw9patch
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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" /> <!-- presionado --> <item android:state_focused="true" android:drawable="@drawable/boton_selected" /> <!-- seleccionado --> <item android:drawable="@drawable/boton_normal" /> <!-- no seleccionado --></selector>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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);animFotogramas.addFrame(f2, 50);animFotogramas.addFrame(f3, 50); animFotogramas.setOneShot(false);
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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();
animFotogramas.stop();
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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></resources>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 22
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" />
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 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></resources>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 24
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Drawables, estilos y temas - 25
¿Preguntas...?
Top Related