En este curso se retoman los temas vistos en cursos anteriores. Se complementan con aspectos prácticos como la forma de implementar mapas en tus proyectos con el API de Google Maps. También, muestra cómo aprovechar el multitask de Android y hacer animaciones en 2D para llevar tus aplicaciones a más dispositivos como weareables, televisiones y autos. Después de este curso, podrás subir tu aplicación a Google Play Store y hacerte visible para el mundo entero.
Ejemplo: Transiciones
Loading...
來自 Universidad Nacional Autónoma de México 的課程
Desarrollo de aplicaciones avanzadas con Android
71 個評分
從本節課中
Transiciones Material Design
Las aplicaciones que desarrolles, no sólo tienes que ser funcionales y únicas, sino que también, pueden ser bonitas, con estilo propio y efectos personalizados. Para ello, emplearás Material Design que te permitirá crear animaciones y transiciones en Android para brindar una mejor experiencia a tus usuarios.
與講師見面
Anahi SalgadoAnahi Salgado. Android Certified Application Developer, programadora, capacitadora y conferencista.
Universidad Nacional Autónoma de México
Hagamos un ejemplo de cómo implementar transiciones en nuestras aplicaciones.
Aquí tengo la aplicación que hemos estado trabajando durante todos nuestros cursos.
Es nuestra aplicación de contactos.
Y como observamos pues hasta el momento nuestra aplicación se ve así.
Tenemos una ligera transición que es más bien las transiciones que
nos proporciona el sistema operativo Android en la versión que estemos.
Y bueno esta es la aplicación que tenemos hasta el momento.
Vamos a darle un poco más de movimiento a todo esto que está aquí.
Todo este cambio que hago desde esta actividad hasta llegar a esta.
Y vamos a trabajar las transiciones.
Como you vimos, tenemos tres tipos de transiciones.
Tenemos la transición explode, la transición slide y la transición fade.
Entonces qué te parece si para trabajar esta pantalla
vamos a generar una transición explode.
Y el modo en que lo vamos a estar trabajando, que es la manera más fácil que
hasta el momento tenemos, es a través de solamente código Java, puro código Java.
Vamos a estar trabajando en la transición explode.
Entonces para esto es muy importante que
antes de realizar cualquier transición analices un poco el
estatus o qué es lo que va a realizar exactamente la transición.
Es decir, por ejemplo en este caso es una transición muy breve.
Pero me encuentro en la actividad A,
digamos, que la actividad A es la que tiene esta lista de perritos.
Y lo que yo quiero es pasar de la actividad A a la actividad B.
Y precisamente esa transición entre la actividad A y la actividad B
es donde yo voy a darle un efecto.
Ahora, como vimos en los vídeos anteriores,
podemos agregar estos efectos que you les dijimos cuáles eran.
El efecto explode, el efecto slide o el efecto fade.
Yo puedo agregarlos a una transición donde yo puedo decir que
ese efecto se agregue cuando yo estoy saliendo de la
actividad A y llegando a la actividad B.
Yo puedo decir que ese efecto,
por ejemplo el efecto explode, ocurra mientras la actividad A está saliendo.
O al mismo tiempo yo puedo decir que el efecto, por ejemplo,
slide ocurra cuando estoy llegando a la actividad B.
O puedo decir también de otra forma que el efecto fade,
por ejemplo, ocurra cuando estoy regresando a la actividad A.
Entonces voy a tener varios estatus
de los movimientos que hago entre mis actividades.
Cuando la actividad está saliendo.
Cuando la actividad está llegando, por decirlo así, o entrando.
Y cuando la actividad está regresando a su actividad anterior.
Entonces estos eventos precisamente los voy a estar cachando en el
métodos setExitTransition, cuando la actividad está saliendo,
setEnterTransition, cuando la actividad está entrando.
Y setReturnTransition, cuando la actividad está regresando a su estado anterior.
Entonces en esas transiciones, en esos tres momentos,
yo puedo meter el efecto fade o el efecto slide o el efecto explode.
Entonces hagamos que esta actividad cuando sale tenga el efecto explode.
Y de acuerdo a nuestro proyecto, como lo tenemos organizado,
es que cuando yo paso de la actividad A a la actividad B,
es en el momento en el que yo le doy clic a esta foto.
O a cualquiera de las que están aquí.
Entonces como lo que estoy manejando es un recycler view, yo tengo
que localizar donde está ese método on clic de la foto.
Entonces el método on clic de la foto si recuerdas está en mi clase
contactoAdaptador.
Esta es la estructura de cómo tengo mi proyecto.
Por supuesto el proyecto está disponible en el GitHub que
más adelante te voy a colocar el enlace del GitHub.
Y entonces yo tengo aquí mi proyecto en la carpeta Java.
Buscaré en la carpeta adapter y ahí está la clase ContactoAdaptador.
Vamos a abrir esa clase y específicamente en esa clase ContactoAdaptador
voy a buscar dentro, voy a buscar en mi
RecyclerViewAdapter, en mi clase ContactoAdaptador RecyclerViewAdapter.
Voy a buscar el método onBindViewHolder.
Donde recuerdas que ahí está el view image foto que es
exactamente este view que tenemos en la tarjeta, en la card view.
Y entonces aquí tenemos you nuestro método onClick.
Este método onClick lo que está haciendo es que
a través de un intent está yendo a la ventana de detalle contacto.
Y entonces aquí tenemos activity.startActivity(intent).
Bien, como hemos visto anteriormente en los vídeos,
las transiciones es una característica que fue incluida
en Android Lollipop, en la versión 5.0 de Android.
Por lo tanto en versiones anteriores
esta característica en especial no va a estar disponible.
Las transiciones no están disponibles en versiones anteriores a Android.
Entonces, por lo tanto lo que yo voy a tener que hacer es generar
precisamente esa detección o esa validación
de versiones que mi aplicación en algún momento debe estar manejando.
Es decir, a nivel de código la aplicación debe detectar
en qué versión se encuentra del sistema operativo Android.
Y entonces a partir de ahí habilitar la opción de transiciones.
Entonces la forma en que haré esos será colocando un if.
Voy a colocar mi if antes de activity.startActivity.
Entonces voy a colocar un if y a través de la clase Build
voy a poner .VERSION.SDK_ INT.
Que esto en realidad lo que me está dando es la versión del sistema operativo
donde está corriendo mi aplicación.
Entonces yo tengo que comparar que la versión del sistema operativo donde
corre mi aplicación si esta versión es mayor
o es igual a precisamente la versión Lollipop.
Y la versión Lollipop la traerá también a partir de la clase
Build.VERSION_CODES_CODES.LOLLIPOP.
Entonces gracias a esta validación yo puedo decidir
en qué momento ejecutar mis transiciones.
Entonces dijimos que vamos a trabajar con la transición explode.
Yo más arriba estoy acarreando un objeto activity que
viene desde el momento en el que estamos instanciando
ContactoAdaptador y se pasa por aquí, etc.
Pero si estás corriendo esto lo podrías correr en un contexto de actividad.
O sea, podrías estar trabajándolo en tu clásico MainActivity
que esté heredando directamente de la clase Activity.
Y entonces podrías ejecutarlo directamente como getWindow y así sucesivamente.
Pero en mi caso como no estoy en un contexto de actividad pues
yo tengo que colocar activity, el contexto que estoy trayendo y entonces gerWindow.
Si tú estuvieras en una actividad solamente partirías de aquí en adelante.
Entonces sería getWindow.
Dijimos que el efecto de explode se va a ejecutar
cuando la actividad
parta hacia la actividad B.
O cuando la actividad salga hacia la actividad B.
Entonces por eso colocamos setExitTransition.
Y simplemente dentro de este método vamos a colocar la instrucción new Explode.
Y además después de esto voy a colocar
activity.startActivity.
Y vamos a pasar el intent que estamos trabajando arriba, y le voy a poner
ActivityOptionsCompat.makeSceneTransition- Animation.
Le voy a poner de nuevo activity.
En estos lugares donde estoy colocando activity, específicamente aquí,
si tú estás trabajando en un contexto de actividad puedes colocar this solamente.
Después necesitaremos por acá abajo nuestro objeto view que
estamos recopilando en nuestro método onClick.
Y después un parámetro.
Colocaremos así por el momento porque más adelante lo vamos a estar trabajando.
Bien, es todo.
Y vamos a poner al final .toBundle.
Voy a darle aquí un salto de línea.
Con esto estamos habilitando que esta característica, este efecto explode está
pasando como transición de la actividad A en la que estoy.
Y al iniciar la actividad B entonces se ejecute ese efecto.
Entonces vamos a darle play para ver cómo se ve.
Y you estoy corriendo el proyecto.
Entonces de de este lado vamos a tener la forma en que se ve el proyecto
sin transiciones.
Y de este lado vamos a trabajar cómo se empieza a ver con transiciones.
Bien, entonces vamos a ver.
Aquí vamos a darle clic.
Y se alcanza a ver por ahí el efecto.
Pero estamos teniendo por ahí algo extraño.
Y eso es porque se está ejecutando dos veces el método startActivity.
Muy bien.
Si alguna de las versiones no está trabajando con esto entonces es importante
colocar un else y entonces ejecutar un startActivity sencillo.
Vamos a correrlo de nuevo.
you está.
Le voy a dar play, le voy a dar clic.
Ahí está.
Si observaste el efecto explode.
El efecto explode es básicamente todos los demás elementos,
es como si explotaran y entonces salen disparados uno en cada dirección.
Por ejemplo si yo le doy clic aquí y entonces se ve la foto del animalito.
Le doy clic acá, se ve la foto del perrito.
Y en comparación con lo que tenemos aquí pues este efecto simplemente
se ve el efecto de que la actividad se sobrepone a la otra.
Y aquí you se ve mucho mejor.
Además el efecto que nosotros le pasamos,
new Explode, lo pasamos como un objeto directo.
Podemos nosotros también estar manipulando un poco el efecto explode
creando directamente un objeto.
Llamémoslo de forma aparte.
Y puedo estarle colocando new Explode, así.
Y entonces a explode colocarle .setDuration, por ejemplo.
Entonces yo puedo hacer que la duración sea un poco más prolongada.
Aquí la duración se mide en milisegundos.
Entonces yo puedo hacer que la duración se vea así.
Entonces tomando el objeto por aparte puedo empezar a manipular más opciones.
Puedo estar trabajando con los métodos que lo componen.
Entonces vamos a incrementar la duración para ahora ver cómo
es que esto se está viendo.
Vamos a correrlo.
Y you está listo.
Le voy a dar play.
Y alcanzas a observar que la transición se está dando de una forma más lenta.
Y acuérdate que esta transición está dándose
cuando la actividad A está saliendo para llegar a la actividad B.
Perfecto.
Ahora vamos a trabajar con los siguientes efectos que tenemos.
Con el efecto slide y el efecto fade.
Yo quiero que ocurra algo lindo.
Que cuando llegue yo a la actividad B que ocurra un efecto como de slide.
Entonces voy a estar trabajando con
el slide y además con el método setEnterTransition.
Entonces voy a irme en mi código a la actividad B,
que esta actividad B es específicamente la actividad DetalleContacto.
Esa actividad DetalleContacto la tengo aquí a nivel
casi en la raíz de mi proyecto, en la raíz de mi package.
La voy a abrir y aquí de la misma forma tengo que colocar la misma validación.
La voy a colocar debajo de donde estuvimos trabajando con Picasso.
Básicamente es comparar Build.VERSION.SDK_INT.
Que sea mayor o igual a Build.VERSION_CODES.LOLLIPOP.
Y entonces aquí dentro trabajar mis transiciones.
Y acá afuera trabajar cualquier otra
cosa que en este caso pues no corresponda a transiciones.
Entonces el efecto slide, yo voy a crear aquí un objeto.
Y le voy a dar Slide slide = new Slide.
Y entonces yo puedo decir que este slide tenga una duración
.setDuration de unos 500 milisegundos.
Y entonces puedo decirle getWindow.
Como observas aquí sí estoy en un contexto de actividad y entonces puedo llamar
directamente al método set getWindow.
Aquí el método que voy a estar trabajando es que quiero que cuando la actividad
entre, entonces voy a poner setEnterTransition.
Cuando la actividad entre entonces ejecuta el efecto slide.
El objeto que acabo de definir.
Entonces al mismo tiempo.
Yo puedo estar trabajando con varias transiciones o con varios efectos.
Pero puedo trabajar varios efectos en diferentes momentos.
you trabajamos cuando la actividad está saliendo en la parte de setExitTransition.
Pero ahora cuando la actividad está llegando.
También yo podría trabajar cuando la actividad está
regresando a la actividad anterior con el método setReturnTransition.
Voy a hacer que cuando voy a poner aquí getWindow.setReturnTransition,
que cuando regrese entonces se ejecute el método Fade.
Listo.
Vamos a probar esto.
Los cambios you fueron aplicados.
Vamos a darle aquí regresar.
Perfecto.
Entonces vamos a darle clic al perrito.
Y como observas se ejecuta el método slide
y regresa con un efecto de fade.
Esta ahí el slide yendo de abajo hacia arriba y con efecto de fade.
Ahora, a este efecto de slide,
yo puedo estar trabajando con él varias direcciones.
Porque puedo hacer slide en varias direcciones específicamente.
Como observamos pues ahorita el slide se está dando de abajo hacia arriba.
Y además está yendo en una velocidad de 500 milisegundos,
medio segundo más o menos.
Entonces yo puedo trabajar las direcciones del slide.
Por ejemplo, el método constructor de la clase Slide es precisamente quien recibe
la dirección o el sentido hacia donde debe ejecutarse el slide.
Yo puedo utilizar por ejemplo la clase Gravity, punto.
Yo puedo utilizar BOTTOM,
puedo utilizar TOP, puedo utilizar RIGHT, puedo utilizar LEFT.
Y así varios parámetros de la clase Gravity.
Por ejemplo, vamos a hacer que el slide ahora se dé a la derecha.
Me voy a regresar aquí.
Vamos a hacer que el efecto además dure un poco más.
Para que podamos ver más pronunciado el efecto.
Vamos a correrlo de nuevo.
Listo, you está.
Voy a darle aquí clic.
El efecto se da desde la derecha, más bien el slide proviene de la derecha.
Puedo regresar y aquí de nuevo está hacia la derecha.
Esto mismo puedo utilizar RIGHT, puedo ahora colocar LEFT.
De nuevo.
Corremos.
Y ahora proviene de la izquierda.
Puedo hacer el TOP.
Y al hacer clic proviene de abajo hacia arriba.
El que particularmente a mí me gusta más es el de BOTTOM.
Y me gustaría que aquí fuese como unos 1200 para ver el efecto.
Voy a darle aquí back.
you está.
Y ahí está el de bottom, como que viene de abajo hacia arriba y como que da mayor
el efecto de Material Design.
Bien, estos son parámetros que podemos estar trabajando en la clase slide.
Y entonces recuerda que podemos generar eventos de entrada,
eventos de salida y eventos de regreso.
Adicionalmente podemos trabajar con algo que se conoce como elementos compartidos.
Y son esas transiciones que ocurren cuando este elemento, por ejemple esta foto,
está siendo compartida en la actividad en la otra actividad.
Entonces cuando yo tengo un elemento de la actividad inicial A y
que este elemento es compartido en la actividad final B,
yo puedo manejar una animación en ese elemento que está siendo compartido.
Entonces para hacer esto tenemos que detectar el elemento en particular.
Por ejemplo esto, que es la imagen, es una imagen
que primeramente esta imagen aquí en esta actividad A está contenida en una tarjeta.
Y coincidentemente la imagen que está
en la actividad B también está contenida en una tarjeta.
Entonces este card, esta tarjeta de la actividad
A la voy a encontrar en la carpeta RES en layout.
Y si recuerdas se llamaba cardview_grid_contacto.
Y el elemento en el que debo estar trabajando es específicamente en la foto,
o en elemento ImageView.
Entonces ahora debo detectar
el elemento que está en la segunda actividad, en la actividad B.
Y si mal no recuerdo esto es un activity,
entonces debe estar en el activity_detalle_contacto_foto.
Debe estar ahi.
Es esto.
Y entonces aquí está también nuestro ImageView que se llama imgFotoDetalle.
Bien.
Si nosotros queremos trabajar con esto una animación,
en que este elemento al momento de llegar acá tenga una animación,
yo debo trabajar una propiedad que se llama android:transitionName.
Y entonces lo que yo coloque aquí
tiene que ser lo mismo en ambos elementos.
Es un parámetro, es simplemente un identificador.
Entonces dice android:transitionName.
El identificador lo voy a estar dando de alta en el archivo string.
Y le voy a poner transicion_foto.
Voy a darle un clic, un alt + enter para crear el valor string value.
Y le voy a poner animacion_foto.
Entonces esta propiedad también debe tenerla.
Voy a dar un copiar, debe tenerla el
CardViewContacto, especialmente en el image_foto.
Entonces debe tenerla quien tu quieras que esté compartiendo la animación.
Bien, you tenemos este parámetro que hay que definir en el layout.
Ahora debo detectar de nuevo el clic.
Dónde se está dando la animación inicial.
El clic está aquí en mi contacto adaptador en el método on clic de la foto.
Entonces en el método on clic de la foto,
donde yo tenía activity.startActivity(intent.
Recuerdas que habíamos colocado esta clase
ActivityOptionsCompat.makeSceneTransition y habíamos dejado este parámetro vacío.
Muy bien.
Este parámetro debe tener precisamente la llave o la clave
que nosotros definimos como transition name para estos elementos compartidos.
Para que el código Java le asigne una animación a esos elementos.
Y entonces como comparten el mismo nombre le asignará la animación
a ambos elementos.
Voy a ponerle un activity.getString.
Recuerda que si tú estás en un contexto de activity simplemente
dices getString directamente.
Y lo que voy a hacer es accesar el recurso R.string.
Se llamaba transicion_foto.
Perfecto.
Vamos a correrlo.
Es todo lo que hay que colocar.
Simplemente el parámetro que se está compartiendo.
Lo estamos corriendo, está you apunto de lanzarse.
Y listo.
Entonces vamos a ver cómo se ve la transición.
Voy a darle clic a la foto.
Y se ve cómo la foto como que entra y se pone al foco, y entonces regresa.
Entonces igualmente por acá, así entra la foto y regresa.
Y entonces nos da ese efecto como si la foto se hiciera grande,
si tuviera un efecto de zoom sobre la transición.
Bien. Pues estos son algunos tipos de
transiciones que podemos manejar, los efectos que Material Design maneja.
El efecto explode, el efecto slide, el efecto face.
Manejamos también los eventos en las transiciones como setExitTransition.
Una transición de salida, una transición de entrada, una transición de regreso.
Transición es cuando elementos compartidos y además un
último detalle que también podemos estar capturando, es que podemos
estar capturando los callbacks que tenga una transición en específico.
¿Y esto cómo lo hacemos?
Es que a veces nosotros necesitamos detectar cuándo la transición you terminó.
Es decir, esto setEnterTransition se da cuando la actividad está entrando.
Pero a veces yo quisiera saber ¿En qué momento está iniciando la transición y en
qué momento está terminando la transición?
Para eso yo necesitaré saber precisamente
los call backs que nos estará devolviendo este efecto.
Entonces yo puedo accesar al objeto slide y colocar .addlistener
y entonces dentro colocaré el objeto new transition listener.
Y entonces me estará trayendo, sobre escribiendo
todos los métodos callback de ese efecto en esa transición.
Entonces, como observas pues una transición también tiene un
ciclo de vida comenzará con iniciándose.
Cuando la transición en algún momento se cancele o se ponga en pausa o se termine,
o cuando esté también en un estado de onResume.
Entonces yo podría estar por acá trabajando.
Y voy a manejar unos toast.
Aquí no olvides poner el punto y coma.
Entonces voy a manejar aquí un toast.
Yo probablemente quisiera saber cuándo la transición está empezando.
Entonces empezando la transición.
O yo quisiera saber específicamente cuándo la transición you terminó.
¿Esto para qué?
¿Para qué me serviría hacer esto?
¿Para qué me serviría conocer?
Porque yo podría estar personalizando más animaciones.
O podría decir que cuando la transición termine entonces colócale
un texto o pinta de color un elemento y etcétera.
¿No? Podemos hacer muchos efectos sobre los
call backs de transiciones.
Entonces vamos a correr esto para ver cómo es que estamos detectando este call back,
que éste se da en el efecto de slide.
Bien, entonces al darle clic aquí nos lanza empezando y termina.
Entonces como observas
está detectando cuándo empieza la transición y además cuándo termina.
Por supuesto estos toast
tienen que ver más también la forma en cómo se están mostrando.
Con la cantidad de tiempo que dura cada toast.
Pero lo que nos importa es que ambos toast se están ejecutando en un orden efectivo.
Cuando un toast, cuando una transición inicia y cuando la transición termina.
Entonces esto es interesante.
Esa es la forma en como podemos estar trabajando transiciones
en Android con Material Design.
