Animations

Android Support Library (II) – Transiciones entre actividades y fragments

Desde la versión lollipop de android, se ha dado mucha importancia a las animaciones para mostrar diferentes comportamientos o para dirigir al usuario a nuevas pantallas. Con la llegada de Material Design, se ha incrementado el número de animaciones, como el compartimiento de elementos visuales entre diferentes vistas. Gracias a las librerías de compatibilidad,  la tarea se ha simplificado considerablemente, dándonos la oportunidad de realizar aplicaciones más atractivas para el usuario final.  La librería de compatibilidad nos ofrece clases de utilidades para que estas transiciones se puedan hacer, sin tener en cuenta las diferentes versiones de android. Por ejemplo: En las versiones anteriores a la 5, las transiciones entre actividades no se mostrarán, pero en las versiones posteriores si que lo harán.

 

Transiciones entre Actividades

Con la incursión de material design, las transiciones y el compartimiento de elementos visuales entre actividades se ha vuelto casi un “MUST” de nuestras aplicaciones. Para utilizarlas, primero debemos asegurarnos de que utilizamos la librería

...
compile 'com.android.support:appcompat-v7:23.3.0'
...

Para comenzar, deberemos indicar en el nuestro tema de aplicación en values-v21 que se van a realizar animaciones y de que tipo son:

...



<style name="AppTheme" parent="AppTheme.Base">
    <item name="android:windowContentTransitions">true</item>
    <item name="android:windowAllowEnterTransitionOverlap">true</item>
    <item name="android:windowAllowReturnTransitionOverlap">true</item>
    <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
    <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>



...

Debemos definir y ver que elementos queremos compartir y que actividades están relacionadas. Una vez localizados, comenzaremos por los ficheros de layouts, incluyendo en los elementos que queramos compartir(tanto en el origen como en el destino), el nombre con el que vamos a identificar a la transición de la vista en cuestión. En el nuestro caso, vamos a compartir un ImageView.

...
<ImageView android:id="@+id/iv_user_avatar" android:transitionName="@string/transition_avatar" android:layout_width="60dp" android:layout_height="60dp" android:layout_gravity="center"/>
...

Una vez hecho esto, deberemos indicar en la actividad de origen que elemento queremos compartir y con que nombre. Para ello deberemos utilizar clase ActivityOptionsCompat, la cual nos facilitará la tarea. En esta clase, deberemos indicar qué vista es y con que nombre de transición y pasárselo al intent de inicio de actividad.

Intent intent = new Intent(this, UserDetailActivity.class);

intent.putExtra(UserDetailActivity.EXTRA_USER, user);

ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(mImageView, getString(R.string.transition_avatar) ) ;

startActivity(intent, options.toBundle());

Si queremos compartir más de un elemento, deberemos usar tantos elementos Pair<View, String> como sea necesario.

Intent intent = new Intent(this, UserDetailActivity.class);

intent.putExtra(UserDetailActivity.EXTRA_USER, user);

Pair<View, String> p1 = Pair.create((View) holder.getIvUserAvarar(), getString(R.string.transition_avatar));

Pair<View, String> p2 = Pair.create((View) holder.getTvUserName(), getString(R.string.transition_name));

Pair<View, String> p3 = Pair.create((View) holder.getTvUserSurname(), getString(R.string.transition_surname));

Pair<View, String> p4 = Pair.create((View) holder.getTvUserActor(), getString(R.string.transition_actor));

ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(this, p1, p2, p3, p4);

startActivity(intent, options.toBundle());

Para finalizar, en la actividad de origen sólo debemos inicializar el valor de la vista con lo que queramos. En nuestro caso, es un recurso de la aplicación.

 

Transiciones entre Fragmentos

Muchos de los proyectos, en vez de hacerse todo entre actividades, se utilizan fragments con solo una actividad. Como es normal, también existen las transiciones entre fragments.
Lo primero que debemos saber, es que en este caso si que debemos preocuparnos de la versión en la que se está ejecutando la aplicación. Para realizar las transiciones, deberemos tener la referencia de ambos fragmentos, indicarle la que queremos que se produzca, e insertar todo en el FragmentTransaction

...
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

heroeDetailFragment = HeroeDetailFragment.newInstance(heroe);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

    // Inflate transitions to apply
    Transition changeTransform = TransitionInflater.from(this).inflateTransition(R.transition.change_image_transform);

    Transition explodeTransform = TransitionInflater.from(this).inflateTransition(android.R.transition.explode);

    // Setup exit transition on first fragment
    heroesListFragment.setSharedElementReturnTransition(changeTransform);
    heroesListFragment.setExitTransition(explodeTransform);

    // Setup enter transition on second fragment
    heroeDetailFragment.setSharedElementEnterTransition(changeTransform);
    heroeDetailFragment.setEnterTransition(explodeTransform);

    transaction.addSharedElement(holder.getIvAvatar(), getString(R.string.

}

transaction.addToBackStack(null);

transaction.replace(R.id.main_container, heroeDetailFragment );

transaction.commit();
...

Para acabar, puedes ver el código  en un proyecto de ejemplo de GITHUB


Deja un comentario

3 × cinco =