U1+repaso+-+Interfaz+Usuario

ANDROID:

Programación avanzada

REVISAR LOS PROBLEMAS

REPASO DE LA UNIDAD 1

Jesús Tomás

[email protected]

Plan de trabajo

Revisar los problemas

Repaso de la unidad 1

Introducción a la unidad 2

PROBLEMAS CON LA PLATAFORMA

Contenido:

La unidad 1 la hemos ido subiendo poco a poco

La unidad 2 disponible tras la clase

Recursos

Clases grabadas

Transparencias

Calendario

Aparecerán tutorías, exámenes, tareas, …

También el link para conectarnos.


Tareas

La primera tarea se entregará tras la unidad 2

Consistirá en el proyecto Audiolibrosv2

No es obligatorio haber hecho todos los

ejercicios/prácticas

La tarea aparecerá el miércoles siguiente

(se explicará el próximo miércoles)

Exámenes

Se activa tras la clase de repaso

Test muy sencillo de 10 cuestiones en 14 min.

Estará abierto durante dos semanas

Si se os pasa el plazo, un correo a Beatriz

Calificaciones

Notas de Tareas y Exámenes


Tutorías:

Se puede usar app para móviles/tabletas Adobe Connect

Por favor utilizar micrófono (auriculares)

También se pueden solicitar tutorías por correo/teléfono.

Sondeos:

Nuevo sondeo: tiempo dedicado a la unidad 1


Foros: muy importante usarlos correctamente:

Usar el adecuado:

Contactos

Unidad X:

Problemas con la plataforma y de conexión

Errores en material didáctico

Titulo: 1.4. barra de acciones, Ejercicio 2: Variable no declarada

Un hilo por problema

Mucho mejor un foro que un correo


Foros: resumen de problemas:

No aparece ActionBar o botón overflow

El proyecto: ¿Qué hay que ir haciendo?

Uso de una clase Holder en un BaseAdapter para evitar

llamadas a findViewById().

Me he puesto en contacto en del Blog (Roc Boronat) y reconoce que lo

que está midiendo es el uso del parámetro convertView

Si alguien hace la prueba que informe

ANDROID:

Programación avanzada

UNIDAD 1

DISEÑO AVANZADO DEL INTERFAZ

DE USUARIO

Daniel Ferri

Jesús Tomás

[email protected]

OBJETIVOS

Describir el uso de GridView para visualizar una

cuadrícula de vistas.

Mostrar como usando fragments podemos diseñar

elementos reutilizables del IU.

Aprender a intercambiar dinámicamente los fragments

mostrados en una actividad.

Describir el uso de la barra de acciones ActionBar.

Implementar un servicio de búsquedas.

Repasar las alternativas para hacer animaciones en

Android.

Mostrar cómo podemos hacer transacciones entre

actividades mediante a animaciones de vistas.

Describir el API para animaciones de propiedades

CAPÍTULO 1

VISIÓN GENERAL Y ENTORNO DE DESARROLLO

1. GridView

2. Fragments (poli[Media])

3. La barra de acciones (ActionBar) (poli[Media])

4. Uso de un widget de búsqueda

5. Acceder a información global de la aplicación (Nuevo)

- La clase Application

- Uso del patrón Singleton

6. Navigation Drawer (Nuevo)

5. Animaciones

- Animaciones de vistas

- Animaciones de propiedades

USO DE GRIDVIEW

GRIDVIEW

Visualiza una cuadricula de

elementos deslizable

verticalmente.

Cada elemento puede definirse

como un View.

Su utilización es algo

compleja, pero muy potente.

USO DE GRIDVIEW

Pasos para crear un GridView :

1. Diseñar un Layout que contenga al GridView

2. Diseñar un Layout individual que se repetirá en la lista

3. Implementar una actividad que visualice el GridView

4. Personalizar cada una de los Layouts individuales según

nuestros datos

miLayout.xml

elemento.xml

MiActividad.java

MiAdaptador.java

1. DISEÑAR UN LAYOUT QUE CONTENGA AL GRIDVIEW

Dentro del Layout de la actividad (miLayout.xml)

incluir:

<GridView . . .

android:columnWidth=“120dp”

android:numColumns=“auto_fit”

. . .

/>

ó <GridView . . .

android:numColumns=“3”

. . .

/>

2. DISEÑAR UN LAYOUT INDIVIDUAL QUE SE REPETIRÁ

Diseñamos un elemento (elemento.xml) :

<RelativeLayout …>

<ImageView

android:id="@+id/bandera"

android:layout_centerHorizontal="true"

android:src="@drawable/bandera"/>

<TextView

android:id="@+id/pais"

android:layout_centerHorizontal="true"

android:layout_below="@id/bandera"/>

…

</RelativeLayout>

3. IMPLEMENTAR LA ACTIVIDAD QUE LO VISUALICE

Creamos la siguiente clase:

public class MiActividad extends GridViewActivity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

GridView gridView = findViewById(R.id.gridViewi);

gridView.setAdapter(descendiente de BaseAdapter);

}

}

4. PERSONALIZAR CADA LAYOUT INDIVIDUAL

En el método setListAdapter()vamos a indicar un objeto

descendiente de BaseAdapter cuya función es

personalizar cada elemento de la lista.

Crea un descendiente de BaseAdapter y sobreescribe:

View getView(int position, View convertView, ViewGroup parent)

Devuelve Layout correspondiente a la posición position .

int getCount()

Devuelve el número de elementos de la lista.

Object getItem(int position)

Devuelve el elemento en una determinada posición de la lista.

long getItemId(int position)

Devuelve el id de una posición determinada.

EJEMPLO DE UN BASEADAPTER

public class MiAdaptador extends BaseAdapter {

private final Activity actividad;

private final Vector<String> lista;

public MiAdaptador(Activity actividad, Vector<String> lista) {

super();

this.actividad = actividad;

this.lista = lista;

}

@Override public View getView(int position, View convertView,

ViewGroup parent) {

LayoutInflater inflater = actividad.getLayoutInflater();

View view = inflater.inflate(R.layout.elemento, null, true);

TextView textView =(TextView)view.findViewById(R.id.titulo);

textView.setText(lista.elementAt(position));

return view;

}

EJEMPLO DE UN BASEADAPTER

@Override public int getCount() {

return lista.size();

}

@Override public Object getItem(int arg0) {

return lista.elementAt(arg0);

}

@Override public long getItemId(int position) {

return position;

}

}

LOS FRAGMENTS EN ANDROID

QUÉ SON LOS FRAGMENTS

Motivación:

Aparecen en la versión 3.0, exclusiva para tabletas.

El mayor tamaño de pantalla hace que sea necesario un

interfaz de usuario diferente.

Esto motiva su introducción.

Los fragments son secciones de interfaz de usuario

que pueden utilizarse repetidas veces.

Están a caballo entre las actividades y las vistas.

Los fragments son insertados en las actividades.

Pero a diferencia de las vistas, responden ante eventos de

su ciclo de vida y se pueden añadir a la pila de

navegación (Back Stack).

UN INTERFAZ DE USUARIO CON FRAGMENTS

USAR FRAGMENTS ANTES DE LA 3.0

Google ha apostado muy fuerte por los fragments

Se han convertido en un elemento muy importante

Por ejemplo: se usan en Google Maps o en preferencias

¿Qué pasa con dispositivos anteriores a la 3.0?

Se ha creado una librería de compatibilidad que será

lincada automáticamente si indicamos minVersion <3.0

Tenemos dos posibles paquetes:

android.app.Fragment: Si mimVersion >= 3.0

android.supportv4.app.Fragment: Si mimVersion < 3.0

Nunca mezcles estos dos paquetes en un mismo proyecto

CICLO DE VIDA DE UN FRAGMENT

CREACIÓN DE UN FRAGMENT

Crea una vista, preferiblemente en XML.

Crea una clase que defina su comportamiento:

public class MiFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.la_vista, container, false);

}

}

El resto del código similar a una actividad.

AÑADIR UN FRAGMENT DESDE XML

Podemos añadirlo desde XML o desde código

Desde XML:

<LinearLayout …>

<Fragment

android:name="com.example.proyecto.MiFragment"

android:id="@+id/fragment"

android:layout_width= "match_parent"

android:layout_height="match_parent"

/>

…

</LinearLayout>

Una vez creado ya no se puede reemplazarse

AÑADIR UN FRAGMENT DESDE CÓDIGO

Añade en el layout un contenedor para el fragment:

<LinearLayout

android:id="@+id/contenedor_fragment"

android:layout_width= "match_parent"


/>

Desde la actividad:

MiFragment miFragment = new MiFragment();

getSupportFragmentManager().beginTransaction()

.add(R.id.contenedor_fragment, miFragment)

.addToBackStack(null) //Opcional

.commit();

DIFERENCIAS CON LAS VISTAS Y ACTIVIDADES

Diferencias con vistas:

Tienen un ciclo de vida más rico (onCreateView(), …).

Pueden incluirse en la pila de navegación (Back Stack).

Podemos llamar a una actividad y esperar respuesta (onActivityResult() )

No pueden ser anidados.

Diferencias con actividades:

Un fragment siempre ha de estar dentro de una actividad

La barra de acciones

(ActionBar) en Android

QUÉ ES ACTIONBAR

Aparece en la versión 3.0 para unificar la experiencia

del usuario a través de las aplicaciones.

La configuración cambia según el tamaño disponible:

Icono y nombre

de la aplicación

Pestañas Botones de

acciones

Menú de

Overflow

COMO SE CREA UN ACTIONBAR

Las opciones de un ActionBar se configuran igual que

los menús de versiones anteriores (res/menu) <menu>

<item android:id="@+id/preferencias"

android:icon="@android:drawable/ic_menu_preferences"

android:title="Preferencias"/>

</menu>

Si la aplicación se ejecuta

en una versión anterior a

la 3.0 se visualiza de forma

tradicional.

Todos los temas de Android a partir de la versión 3.0

incorporan por defecto la barra de acciones ( a menos

que acaben en NoActionBar).

NUEVOS ATRIBUTOS DE <ITEM>

showAsAction puede tomar los valores:

always la acción siempre aparecerá en la barra de

acciones (poco recomendada).

ifRoom la acción se mostrará si hay espacio disponible

never la acción nunca se mostrará, y quedará postergada

al menú de Overflow.

withText se añade el texto introducido en title.

collapseActionView la acción puede verse en forma

reducida (Ej. Acciones de búsqueda).

orderInCategory indican el orden en que aparecen. A

menor valor más a la izquierda.

EJEMPLO DE XML DE UN ACTIONBAR

<menu>

<item android:title="Preferencias"

android:id="@+id/menu_preferencias“

android:icon="@android:drawable/ic_menu_preferences"

android:orderInCategory=“6"

android:showAsAction="ifRoom|withText"/>

<item android:title="Buscar“

android:id="@+id/menu_buscar"

android:icon="@android:drawable/ic_menu_search“

android:actionViewClass="android.widget.SearchView"


android:showAsAction="always|collapseActionView"/>

<item android:title="Acerca de...“

android:id="@+id/menu_acerca"


android:showAsAction="never"/>

</menu>

CÓDIGO ASOCIADO A UN ACTIONBAR

@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return super.onCreateOptionsMenu(menu); }

@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.menu_preferencias: …

break; case R.id.menu_buscar: …

break; case R.id.menu_acerca: …

break; }

return false; }

USO DE UN WIDGET DE

BÚSQUEDA

USO DE UN WIDGET DE BÚSQUEDA

Aparte de botones y tabs, también se puede añadir el

widget de búsquedas en la barra de acciones

Para ello, añadir el siguiente elemento en el xml del

menú.

<item

android:id="@+id/menu_search"

android:actionViewClass="android.widget.SearchView"

android:icon="@android:drawable/ic_menu_search"

android:orderInCategory="90"

android:showAsAction="ifRoom|collapseActionView"

android:title="Buscar"/>


Al inflar el ActionBar, tendremos que asociar el servicio

de búsqueda.

Para ello, hay que copiar las siguientes líneas en el

método onCreateOptionsMenu()

SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE); SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView(); searchView.setSearchableInfo(searchManager .getSearchableInfo(getComponentName()));


Por último, tendremos que definir en el

AndroidManifest que actividad recibirá estas

búsquedas, en forma de intents. Para ello, basta con

copiar las siguientes líneas dentro del elemento activity

que recibirá las búsquedas.

<intent-filter> <action

android:name="android.intent.action.SEARCH" />

</intent-filter>

<meta-data

android:name="android.app.searchable"

android:resource="@xml/searchable" />

ACCEDER A INFORMACIÓN

GLOBAL DE LA APLICACIÓN

¿DÓNDE ALMACENAMOS INFORMACIÓN

COMÚN A TODA LA APLICACIÓN?

Cada uno de los componentes de una aplicación se

escriben en una clase separada.

Hasta ahora hemos visto:

Usar preferencias de la aplicación (solo variables simples)

Utilizar el modificador static.

Nuevas alternativas

Crear un descendiente de Application

Utilizar el patrón Singleton

LA CLASE APPLICATION

Para almacenar información global a la aplicación. public class Aplicacion extends Application { private int saldo; @Override public void onCreate() { SharedPreferences pref = getSharedPreferences("pref", MODE_PRIVATE); int saldo = pref.getInt("saldo_inicial", -1); } public int getSaldo(){ return saldo; } public void putSaldo(int saldo){ this.saldo=saldo; } }


Métodos callback:

onCreate() cuando se cree la aplicación.

onConfigurationChanged(Configuration nuevaConfig) cuando se

realicen cambios en la configuración del dispositivo, mientras

que la aplicación se está ejecutando.

onLowMemory() cuando el sistema se está quedando sin memoria.

Trata de liberar toda la memoria que sea posible.

onTrimMemory(int nivel) (desde nivel API 14) cuando el sistema

determina que es un buen momento para que una aplicación

recorte memoria. Por ejemplo, cuando está en el fondo de la pila

de actividades y no hay suficiente memoria para mantener

tantos procesos. Se nos pasa el nivel de necesidad: TRIM_MEMORY_COMPLETE, TRIM_MEMORY_BACKGROUND,

TRIM_MEMORY_MODERATE, …


Registra la clase creada en AndroidManifest <application

android:name="Aplicacion"

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

Para acceder al objeto Aplicacion aplicacion = (Aplicacion) contexto.getApplicationContext();

Desde una actividad: int miSaldo = ((Aplicacion) getApplicationContext()).getSaldo();

EL PATRÓN SINGLETON

Una clase con este patrón solo dispone de unobjeto, que

podrá ser accedido utilizando un método estático.

public class Singleton { // Esta será la instancia única de esta clase private static Singleton INSTANCIA = new Singleton(); // El constructor es protected para evitar acceso desde fuera. protected Singleton() {} // Método para obtener la única instancia de nuestra clase public static Singleton getInstancia() { return INSTANCIA; } }

Acceso:.

Singleton referencia = Singleton.getInstancia();

SINGLETON EN ANDROID

public class Saldo { private static Saldo INSTANCIA = new Saldo(); private Context contexto; // Casi siempre se necesita private int saldo = -1; protected Saldo() {} public static Saldo getInstancia() { return INSTANCIA; } public void inicializa(Context contexto){ this.contexto = contexto; SharedPreferences pref = contexto.getSharedPreferences ("pref", Context.MODE_PRIVATE); int saldo = pref.getInt("saldo_inicial", -1); } … public int getSaldo() { return saldo; } public void putSaldo(int saldo) { this.saldo = saldo; } }

Para utilizar esta clase puedes usar el siguiente código:

Saldo saldo = Saldo.getInstancia(); saldo.inicializa(contexto); int n = saldo.getSaldo();

SINGLETON EN ANDROID

… public int getSaldo() { return saldo; } public void putSaldo(int saldo) { this.saldo = saldo; } }

Para utilizar esta clase puedes usar el siguiente código:

Saldo saldo = Saldo.getInstancia(); saldo.inicializa(contexto); int n = saldo.getSaldo();

APPLICATION O SINGLETON

Documentación de Android:

“There is normally no need to subclass Application. In

most situation, static singletons can provide the same

functionality in a more modular way”.

Singleton: mayor modularidad.

Application: código más limpio y no requiere ser

inicializado desde fuera de la clase.

NAVIGATION DRAWER

NAVIGATION DRAWER

Se presentó en el Google IO del

2013

Hasta ahora se utilizaba con

librerías externas.

Suele tener estructura de menú,

pero es posible cualquier layout

Se abre pulsando el botón o con

desplazamiento desde el lado

izquierdo

NAVIGATION DRAWER

Esa en fase de pruebas y no pertenece a un nivel de

API en concreto. Solo se encuentra en la librería de

compatibilidad, a partir de la revisión 18.

Esta disponible para versiones anteriores a la 3.0. Pero

usa nombres de clases son diferentes.

En el curso trabajaremos con la versión 3.0.

Tenéis un tutorial para versiones anteriores en:

http://www.sgoliver.net/blog/?p=4104

http://www.sgoliver.net/blog/?p=4104

NAVIGATION DRAWER

Pasos a seguir:

1 - Crea un Layout para la actividad

2 - Crea la funcionalidad de la vista del Navigation Drawer

3 - Asocia el Navigation Drawer a la barra de acciones

4 - Añade los recursos

1- CREA UN LAYOUT PARA LA ACTIVIDAD

<android.support.v4.widget.DrawerLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

<FrameLayout <!—El contenido de la actividad -->

android:id="@+id/fragment_container"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<ListView <!—El contenido del Navigation Drawer -->

android:id="@+id/left_drawer"

android:layout_width="240dp“ <!—Máx. 320 -->


android:layout_gravity="start " <!—izquierda -->

android:choiceMode="singleChoice"

android:divider="@android:color/transparent"

android:dividerHeight="0dp"

android:background="#111"/>

</android.support.v4.widget.DrawerLayout>

2- CREA LA FUNCIONALIDAD DE LA VISTA DEL

NAVIGATION DRAWER

En caso de basarse en un ListView:

Crear elemento

Crear un BaseAdapter

Escribir el escuchador de eventos para cuando se seleccione

un elemento de la vista.

En caso de usar otro tipo de vistas, las acciones a

realizar serían muy diferentes.

3 - ASOCIA EL N. DRAWER A LA BARRA DE ACCIONES

public class MainActivity extends Activity { private DrawerLayout drawerLayout; private ActionBarDrawerToggle drawerToggle; ... public void onCreate(Bundle savedInstanceState) { … drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); drawerToggle = new ActionBarDrawerToggle(this, // Actividad drawerLayout, // DrawerLayout R.drawable.ic_drawer, // Icono del Navigation Drawer R.string.drawer_open, // Descripcion abrimos Nav. Drawer R.string.drawer_close)// Descripcion cierre Nav. Drawer { public void onDrawerClosed(View view) { getActionBar().setTitle(getTitle()); } //Titulo App public void onDrawerOpened(View drawerView) { getActionBar().setTitle("Seleccione opción");} }; drawerLayout.setDrawerListener(drawerToggle); getActionBar().setDisplayHomeAsUpEnabled(true); } @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); drawerToggle.syncState(); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); drawerToggle.onConfigurationChanged(newConfig); } @Override public boolean onOptionsItemSelected(MenuItem item) { if (drawerToggle.onOptionsItemSelected(item)) { return true; } ... } ... }

3 - ASOCIA EL N. DRAWER A LA BARRA DE ACCIONES

… @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); drawerToggle.syncState(); }

@Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); drawerToggle.onConfigurationChanged(newConfig); }

@Override public boolean onOptionsItemSelected(MenuItem item) { if (drawerToggle.onOptionsItemSelected(item)) { return true; } ... // Resto de acciones del AcrionBar } ... }

4 – AÑADE LOS RECURSOS

Para R.string.drawer_open y R.string.drawer_close

Añade al fichero res/values/strings.xml <string name="drawer_open">navigation drawer abierto</string>

<string name="drawer_close">navigation drawer cerrado</string>

Para R.drawable.ic_drawer

Acceder a Android Asset Studio en la sección

Navigation Drawer Indicator Generator. Pulsa en el

botón Download ZIP

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




http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-nav-drawer-indicator.html#theme=light&color=33b5e5%2C40







APLICACIÓN A AUDIOLIBROS

Realizar los 4 pasos anteriores

Modificar BookInfo para que almacene el género

Modificar SelectorAdapter para que solo muestre los

libros según el filtro de búsqueda.

ANIMACIONES EN ANDROID

ANIMACIONES EN ANDROID

La clase AnimationDrawable: Permite crear drawables

que reproducen una animación fotograma a fotograma.

Animaciones de vistas: (Tween) Permiten crear efectos

de translación, rotación, zoom y alfa a cualquiera vista

de nuestra aplicación. Aunque existe otro API, este

todavía sigue siendo interesante

Animaciones de propiedades: Nuevo mecanismo

incorporado en Android 3.0. Permite animar cualquier

propiedad de cualquier objeto, sea una vista o no.

Además modifica el objeto en sí, no solamente cambia

su representación en pantalla como ocurre en una

animación Tween.

ANIMACIONES DE PROPIEDADES

Desventajas animaciones Tween:

Solo podemos animar objetos de la clase View.

Está limitado a estas cuatro transformaciones.

Solo modifica la forma en que la vista es representada, pero

no sus propiedades en si.

Desventajas animaciones de propiedades:

Solo disponible a partir de la versión 3.0.

Requiere más tiempo en inicializarse y escribir más código

ANIMACIONES DE VISTAS (TWEEN)

<set>

<scale android:duration="2000"

android:fromXScale="2.0"

android:fromYScale="2.0"

android:toXScale="1.0"

android:toYScale="1.0" />

<rotate android:startOffset="2000"

android:duration="2000"

android:fromDegrees="0"

android:toDegrees="360"

android:pivotX="50%"

android:pivotY="50%"/>

<translate android:startOffset="2000"

android:duration="2000"

android:fromXDelta="0"

android:fromYDelta="0"

android:toXDelta="50"

android:toYDelta="100" />

</set>

ANIMACIONES DE VISTAS:

TRANSICIONES ENTRE ACTIVIDADES

entrada_derecha.xml

<translate android:duration="800"

android:fromXDelta="-100%“

android:toXDelta="0" />

salida_ izquierda.xml

<translate android:duration="800"

android:fromXDelta=“0 “

android:toXDelta="100%" />

Desde la actividad que lanza:

Intent i = new Intent(this, SegundaActivity.class);

startActivity(i);

overridePendingTransition(R.anim.entrada_derecha, R.anim.salida_izquierda);

ANIMACIONES DE PROPIEDADES

Animator

ValueAnimator

ObjectAnimator

Animator

AnimatorSet

API para animaciones genérico, aplicable a cualquier

objeto.

Definida en el paquete android.animation a

partir de la versión 3.0.

Jerarquía de clases:

VALUEANIMATOR

Sencillo motor para conseguir que en una propiedad

cambie desde un valor inicial, a otro final, a lo largo de

un tiempo determinado.

Es muy genérico, no solo puedes usar para animaciones

de tipo gráfico. Por ejemplo, aumentar el volumen de

un MediaPlayer poco a poco con el tiempo.

PROPIEDADES DE VALUEANIMATOR

propiedad Descripción Valor por

defecto

values Lista de valores para la animación. Típicamente

dos: inicial y final. -

duration Duración de la animación. 300ms

frameDelay Tiempo de refresco. Es decir, cada cuanto tiempo 10ms

startDelay Retraso en el arranque de la animación. 0ms

interpolator

Permite definir diferentes tipos de

interpolaciones temporales como el movimiento

lineal, acelerado o decelerado.

Accelerate

Decelerate Interpolator

repeatCount Número de repeticiones (INFINITE si nunca para) 0

repeatMode

Cuando termina una repetición y ha de pasar a la

siguiente: la reinicia (RESTART) o la repite hacia

atrás (REVERSE)

RESTART

USO DE VALUEANIMATOR

public class MainActivity extends Activity implements

ValueAnimator.AnimatorUpdateListener {

private TextView textView;

{ …

ValueAnimator animacion = ValueAnimator.ofFloat(10,40);

animacion.setDuration(1000);

animacion.setInterpolator(new DecelerateInterpolator());

animacion.setRepeatCount(4);

animacion.setRepeatMode(ValueAnimator.REVERSE);

animacion.addUpdateListener(this);

animacion.start();

}

@Override public void onAnimationUpdate(ValueAnimator animacion) {

float value = ((Float) (animacion.getAnimatedValue())).floatValue();

textView.setTextSize(value);

}

}

ESCUCHADORES DE EVENTOS

OBJECTANIMATOR

public class MainActivity extends Activity {

private TextView textView;

{ …

ObjectAnimator animacion = ObjectAnimator.ofFloat(textView, “textSize", 10, 40); animacion.setDuration(1000);

animacion.setInterpolator(new DecelerateInterpolator());

animacion.setRepeatCount(4);

animacion.setRepeatMode(ValueAnimator.REVERSE);

animacion.start();

}

}

RESTRICCIONES DE OBJECTANIMATOR

La propiedad que se está animando debe tener un

método setter en forma de set<Propiedad>().

Si no se indica valor inicial ha de tener un método con

la forma get<Propiedad>().

Los métodos setter y getter han de trabajar con el

mismo tipo que el especificado: ofFloat(), ofInt(),

ofObject(), ofPropertyValuesHolder()

Cada vez que se cambia una propiedad el objeto ha de

llamar a invalidate() para forzar el redibujado.

http://developer.android.com/reference/android/animation/ObjectAnimator.html#ofPropertyValuesHolder(java.lang.Object, android.animation.PropertyValuesHolder...)

USO DE OBJECTANIMATOR

AnimatorSet conjunto = new AnimatorSet();

conjunto.play(anim1).before(anim2);

conjunto.play(anim2).with(anim3);

conjunto.play(anim4).after(anim3);

conjunto.start();

ANIMACIONES CON XML <set android:ordering="sequentially" >

<set>

<objectAnimator android:duration="1000"

android:propertyName="textSize"

android:valueTo="50"

android:valueType="floatType" />


android:propertyName="textScaleX"

android:valueFrom="0.2"

android:valueTo="1.5" />

</set>


android:propertyName="textColor"

android:repeatCount="infinite"

android:repeatMode="reverse"

android:valueTo="#0000FF" />

</set>

NUEVAS PROPIEDADES A PARTIR DE V3.0

propiedad Descripción alpha Nivel de transparencia (0=transparente, 1=opaca)

translationX Desplazamiento X respecto a su posición en layout

translationY Desplazamiento Y respecto a su posición en layout

rotation Rotación en grados de la vista (siguiendo agujas reloj)

scaleX Factor de ampliación de la vista en el eje X

scaleY Factor de ampliación de la vista en el eje Y

pivotX Posición X de pivote para rotaciones y escalados

pivotY Posición Y de pivote para rotaciones y escalados

rotationX Rotación 3D en grados de la vista sobre el eje X

rotationY Rotación 3D en grados de la vista sobre el eje Y

cameraDistance Distancia en eje Z para calcular la perspectiva 3D

X Posición desde la izquierda del padre

Y Posición desde arriba del padre

U1+repaso+-+Interfaz+Usuario

Documents

Transcript of U1+repaso+-+Interfaz+Usuario