Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

Introducción a la Nueva Activity (Actividad) Transiciones de Lollipop

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

What You'll Be Creating

Introducción

Uno delos aspectos más interesantes de las especificaciones de Material Design es la continuación visual entre actividades. Con unas cuantas líneas de código, las nuevas APIs de Lolllipop te permiten aplicar transiciones significativamente entre dos actividades, gracias a las animaciones prolijas y continuas. Ésto rompe los límites tradicionales de las anteriores versiones de Android y permite al usuario entender como los elementos van de un punto a otro.

En éste tutorial, te mostraré como lograr éste resultado, haciendo una sencilla aplicación consistente con las pautas del Material Design de Google.

Requisitos Previos

En éste tutorial, asumiré que ya estás familiarizado con el desarrollo en Android y que utilizas Android Studio como tu IDE. Usaré extensivamente Android intents (intenciones), asumiendo un conocimiento básico del ciclo de vida de la actividad, y el nuevo widget RecyclerView introducido con la API 21, el pasado mes de Junio. No voy a profundizar en los detalles de ésta clase, pero, si estás interesado, puedes encontrar una gran explicación en éste tutorial de Tuts+.

1. Crea la Primera Activity

La estructura básica de la aplicación es sencilla. Hay dos activities, una principal, MainActivity.java, cuya tarea es mostrar una lista de elementos, y una segunda, DetailActivity.java, que mostrará los detalles del elemento seleccionado en la lista previa.

Paso 1: El Widget RecyclerView

Para mostrar la lista de elementos, la activity principal usará el widget RecyclerView introducido en Android Lollipop. Lo primero que necesitas hacer es, añadir la siguiente línea a la sección de dependencias en el archivo build.grade de tu proyecto para habilitar la retrocompatibilidad.

Paso 2: Definición de Datos

Por simpleza, no definiremos una base de datos real o una fuente de datos similar para la aplicación. En cambio, usaremos una clase personalizada, Contact. Cada elemento tendrá un nombre, un color, información básica de contacto asociada a él. Así es como se ve la implementación de la clase Contact:

Finalizarás con un agradable contenedor para la información que te interesa. Pero necesitamos llenarlo con algunos datos. En la parte superior de la clase Contact, agrega el siguiente fragmento de código para llenar el conjunto de datos.

Al definir los datos como public y static, cada clase en el proyecto podrá leerlos. En un sentido, imitamos el comportamiento de una base de datos con la excepción que la estamos codificando en una clase.

Paso 3: Definiendo los Layouts Principales

El layot (maquetado) de la actividad principal es simple, porque la lista llenará toda la pantalla. El layout incluye un RelativeLayout como la raíz-pero puede ser también un LinearLayout-y un RecyclerView como su único hijo.

Debido a que el widget RecyclerView arregla subelementos y nada más, también necesitas diseñar el layout de un sólo elemento de la lista. Queremos tener un círculo de color a la izquierda de cada elemento de la lista de contactos así que primero tienes que definir el circle.xml dibujable.

Ahora tienes los elementos necesarios para definir el layout del elemento de la lista.

Paso 4: Mostrar los datos usando el RecyclerView

Casi hemos llegado al final de la primera parte del tutorial. Aún tienes que escribir el RecyclerView.ViewHolder y el RecyclerView.Adapter, y asignar todo a la view asociada en el método onCreate de la actividad principal. En éste caso, el RecyclerView.ViewHolder también debe poder manejar clicks así que necesitarás añadir una clase específica capaz de hacer eso.  Comencemos definiendo la clase responsable para el manejo de los clicks.

Es necesario especificar el RecyclerView.Adapter, que llamaré DataManager. Es responsable de cargar los datos e insertarlos en las views de la lista. Ésta clase de adminstrador de datos contendrá también la definición del RecyclerView.ViewHolder.

Finalmente, agregamos el siguiente código al método onCreate, debajo setContentView. La actividad principal está lista.

Así es como se verá la aplicación si la compilas y ejecutas.

First Activity when completed

2. Crea los Detalles de la Activity.

Paso 1: El layout

La segunda activity es mucho más sencilla. Toma el ID del contacto seleccionado y captura la información adicional que la primera activity no muestra.

Desde un punto de vista de diseño, el layout de ésta activity es crucial ya que es la parte más importante de la aplicación. Pero por lo que concierne a XML, es trivial.  El layout es una serie de instancias de TextView posicionadas de una forma placentera, usanod RelativeLayout y LinearLayout. Así es como se verá el layout:

Paso 2: Enviar y Recibir el ID vía Intent Extras

Ya que las dos activities están vinculadas por un intent, necesitas enviar algún fragmento de información que permita a la segunda activity entender de que contacto solicitaste los detalles.

Una opción puede ser usar la variable posición como una referencia. La posición del elemento en la lista corresponde a la posición del elemento en el arreglo así que no estará mal usar éste número como una única referencia.

Ésto funcionaría, pero si tomas este planteamiento y, por alguna razón, el conjunto de datos es modificado en el runtime, la referencia no coincidirá con el contacto en el que estás interesado. Ésta es la razón por la que es mejor usar un ID apropiado. Ésta información es el método getId definido en la clase Contact.

Edita el manejador onItemClick de la lista de elementos como se muestra abajo.

La DetailsActivity recibirá la información del Intent extras y construirá el objeto correcto usando la ID como referencia. Ésto es mostrado en el siguiente bloque de código.

Al igual que antes en el método onCreateViewHolder del RecyclerView, las views son inicializadas usando el método findViewById y llenadas usando setText. Por ejemplo, para configurar el campo del nombre hacemos lo siguiente:

El proceso es el mismo para los otros campos. La segunda activity está finalmente lista.

Second Activity when completed

3. Transiciones Significativas

Finalmente hemos llegado al punto central de éste tutorial, animar las dos activities usando el nuevo método de Lollipop para aplicar transiciones utilizando un elemento compartido.

Paso 1: Configura Tu Proyecto

Lo primero que necesitarás hacer es editar tu tema en el archivo style.xml en el directorio values-v21. De ésta forma, habilitas transiciones de contenido y estableces la entrada y salida de la views que no son compartidas entre las dos activities.

Por favor ten en cuenta que tu proyecto debe estar apuntado a (y así ser compilado con) al menos Android API 21.

Las animaciones serán ignoradas en sistemas que no tienen instalado Lolllipop. Desafortunadamente, por razones de rendimiento, la librería AppCompat no proporciona completa retrocompatibilidad para éstas animaciones.

Paso 2: Asignar el Nombre de la Transición en los archivos Layout

Una vez que has editado tu archivo style.xml, tienes que definir la relación entre los dos elementos comunes de las views.

En nuestro ejemplo, las views compartidas son el campo que contiene el nombre del contacto, el del número de teléfono, y el círculo de color.  Para cada uno, tienes que especificar un nombre común de transición. Por ésta razón, comienza a añadir en el archivo strings.xml los siguientes elementos:

Entonces, para cada uno de los tres pares, en los archivos layout añade el atributo android:transitionName con el valor correspondiente.  Para el círculo de color, el código se verá así:

Gracias a éste atributo, Android sabrá que views están compartidas entre las dos activities y animará correctamente la transición. Repite el mismo proceso para las otras dos views.

Paso 3: Configura el Intent

Desde un punto de vista de codificación, necesitarás adjuntar un específico paquete ActivityOptions al intent. El método que necesitas es makeSceneTransitionAnimation, que toma como parámetros el contexto de la aplicación y tantos elementos compartidos como necesitemos. En el método onItemClick del RecyclerView, edita el Intent previamente definido así:

Para cada elemento compartido a ser animado, tendrás que agregar al método makeSceneTransitionAnimation un nuevo elemento Pair. Cada Pair tiene dos valores, el primero como una referencia a la view desde la que estás transicionando, la segunda es el valor del atributo transitionName.

Ten cuidado cuando importes la clase Pair. Necesitarás incluir el paquete android.support.v4.util, no el paquete android.util. También, recuerda usar el método ActivityCompat.startActivity en lugar del método startActivity, porque de otra manera no podrás ejecutar tu aplicación en entornos con API inferior a 16.

Eso es todo. Terminaste Así de simple.

Conclusión

En éste tutorial aprendiste como aplicar transiciones de manera fácil y atractiva entre dos activities que comparten uno o más elementos, permitiendo una continuidad significativa y placentera.

Comenzaste al crear la primera de las dos activities, cuyo papel es mostrar la lista de contactos. Luego completaste la segunda activity, diseñando su layout, e implementando una forma de pasar una única referencia entre las dos activities. Finalmente, viste la manera en la que funciona makeSceneTransitionAnimation, gracias al atributo transitionName en XML.

Consejo Extra: Aplicar Estilo a Detalles.

Para crear una verdadera aplicación Material Design, como se muestra en las capturas de pantalla anteriores, también necesitarás cambiar los colores de tu tema. Edita tu tema base en el directorio values-v21 para lograr un resultado atractivo.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.