Hot!

Cómo agregar Flip Animations a su aplicación de Android

Las animaciones invertidas pueden crear una sensación más realzada para su aplicación haciéndola más lúdica, especialmente cuando se muestran notificaciones. A continuación, le mostramos cómo implementar una página que invierta la animación.

Crear vistas

Una carta tiene dos lados y cada lado debe ser un diseño separado. Crea 2 diseños, un diseño posterior y un diseño frontal. La vista frontal contendrá una imagen y la vista posterior contendrá una descripción. Aquí está el diseño para el frente de la tarjeta que muestra una imagen. Ponlo en un archivo llamado front.xml en "res / layout":

xml Seleccionar todo
xmlSelect All
< ImageView  xmlns: android = "http://schemas.android.com/apk/res/android" 
    android: layout_width = "match_parent" 
    android: layout_height = "match_parent" 
    android: src = "@ dibujable / postre" 
    android: scaleType = "centerCrop" 
    android: contentDescription = "YUMMY" />
El siguiente es el diseño de la parte posterior, que muestra texto que da una descripción de la imagen. Coloque el siguiente XML en back.xml:

xml Seleccionar todo
xmlSelect All
< LinearLayout  xmlns: android = "http://schemas.android.com/apk/res/android" 
    android: layout_width = "match_parent" 
    android: layout_height = "match_parent" 
    android: orientation = "vertical" 
    android: background = "# a6c " 
    android: padding = " 16dp " 
    android: gravity = " bottom " > 
    < TextView  android: id = " @android: id / text1 " 
        style = "? android: textAppearanceLarge " 
        android: textStyle = " bold "
        android: textColor ="#fff" 
        android: layout_width = "match_parent" 
        android: layout_height = "wrap_content" 
        android: texto = "delicioso" />    
</ LinearLayout >
Crea los animadores

Los animadores se utilizan para controlar los elementos visuales. Necesitarás cuatro animadores para cuando la carta se anime a la izquierda, a la derecha, a la derecha y a la izquierda. El efecto del primer animador es girar la parte posterior de la tarjeta en la vista. Aquí está el XML para res / animator / left_in.xml:

xml Seleccionar todo
xmlSelect All
< set  xmlns: android = "http://schemas.android.com/apk/res/android" > 
    < objectAnimator 
        android: valueFrom = "1.0" 
        android: valueTo = "0.0" 
        android: propertyName = "alpha" 
        android: duration = "0" /> 
    <! - Girar. -> 
    < objectAnimator 
        android: valueFrom = "-180" 
        android: valueTo = "0" 
        android: propertyName = "rotationY" 
        android: interpolator = "@android:
        "3000" /> 
    < objectAnimator 
        android: valueFrom = "0.0" 
        android: valueTo = "1.0" 
        android: propertyName = "alpha" 
        android: startOffset = "1500" 
        android: duration = "1" /> 
</ set >
El efecto de este animador siguiente es girar el frente de la tarjeta fuera de la vista. Coloque el siguiente XML en animator / left_out.xml:

xml Seleccionar todo
xmlSelect All
< set  xmlns: android = "http://schemas.android.com/apk/res/android" > 
    <! - Girar. -> 
    < objectAnimator 
        android: valueFrom = "0" 
        android: valueTo = "180" 
        android: propertyName = "rotationY" 
        android: interpolator = "@android: interpolator / accelerate_decelerate" 
        android: duration = "3000" /> 
    <! - - A la mitad de la rotación (ver startOffset), configure el alfa en 0. -> 
    < objectAnimator 
        android: valueFrom = "1.0" 
        android:
        android: propertyName = "alpha" 
        android: startOffset = "1500" 
        android: duration = "1" /> 
</ set >
El tercer animador gira la parte delantera de la tarjeta fuera de la vista . Ponga este código en animator / right_in.xml:

xml Seleccionar todo
xmlSelect All
< set  xmlns: android = "http://schemas.android.com/apk/res/android" > 
    < objectAnimator 
        android: valueFrom = "1.0" 
        android: valueTo = "0.0" 
        android: propertyName = "alpha" 
        android: duration = "0" /> 
    <! - Girar. -> 
    < objectAnimator 
        android: valueFrom = "180" 
        android: valueTo = "0" 
        android: propertyName = "rotationY" 
        android: interpolator = "@android:
        "3000" /> 
    < objectAnimator 
        android: valueFrom = "0.0" 
        android: valueTo = "1.0" 
        android: propertyName = "alpha" 
        android: startOffset = "1500" 
        android: duration = "1" /> 
</ set >
El animador final se usa para rotar la parte posterior de la tarjeta hacia la vista. Aquí está el XML para animator / right_out.xml:

xml Seleccionar todo
xmlSelect All
< set  xmlns: android = "http://schemas.android.com/apk/res/android" > 
    <! - Girar. -> 
    < objectAnimator 
        android: valueFrom = "0" 
        android: valueTo = "-180" 
        android: propertyName = "rotationY" 
        android: interpolator = "@android: interpolator / accelerate_decelerate" 
        android: duration = "3000" /> 
    <! - A la mitad de la rotación (ver startOffset), configure el alfa en 0. -> 
    < objectAnimator 
        android: valueFrom = "1.0" 
        android:
        android: propertyName = "alpha" 
        android: startOffset = "1500" 
        android: duration = "1" /> 
</ set >
Crea Fragmentos y anima los Flips

Cree las clases de fragmentos anterior y posterior, y un diseño para mostrar los fragmentos. También debe configurar el fragmento que se mostrará de forma predeterminada cuando se inicie la actividad. Aquí está el diseño para mostrar los fragmentos, que puede usar para agregar fragmentos en tiempo de ejecución. Ponga este código en layout / activity_flip.xml:

xml Seleccionar todo
xmlSelect All
< FrameLayout  xmlns: android = "http://schemas.android.com/apk/res/android" 
    android: id = "@ + id / container" 
    android: layout_width = "match_parent" 
    android: layout_height = "match_parent" />
Estas son las clases de fragmentos para la parte posterior y frontal de la tarjeta:

java Seleccionar todo
javaSelect All
la  clase     pública FlipActivity extiende la actividad {
    ...
    public  static  class  CardFrontFragment  extends  Fragment  {
         public  CardFrontFragment ()  {}
         @Override 
        public View onCreateView (LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)  {
             return inflater.inflate (R.layout.fragment_card_front, container, false );
        }
    }
    public  static  class  CardBackFragment  extends  Fragment  {
         public  CardBackFragment ()  {}
         @Override 
        public View onCreateView (LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)  {
             return inflater.inflate (R.layout.fragment_card_back, container, false );
        }
    }
}
En el código de FlipActivity, configure la vista de contenido para que sea el FrameLayout que acaba de crear. Decide qué tarjeta quieres mostrar de forma predeterminada. En este ejemplo, vamos a mostrar el frente de la tarjeta. Aquí se muestra cómo mostrar un fragmento predeterminado cuando se crea la actividad.

java Seleccionar todo
javaSelect All
la  clase     pública FlipActivity extiende la actividad {
     @Override 
    protected  void  onCreate (Bundle savedInstanceState)  {
         super .onCreate (savedInstanceState);
        setContentView (R.layout.activity_flip);
        if (savedInstanceState == null ) {
            getFragmentManager ()
                .beginTransaction ()
                .add (R.id.container, nuevo CardFrontFragment ())
                .cometer();
        }
        ...
    }
Cuando abra la aplicación por primera vez, se mostrará el anverso de la tarjeta que contiene una imagen. Vamos a configurar una acción que mostrará la parte posterior de la tarjeta. El siguiente código mostrará el otro lado de la tarjeta e incorporará las siguientes acciones:

Establece las animaciones que ha creado para las transiciones de fragmentos.
Reemplaza el fragmento mostrado actualmente con un nuevo fragmento y anima este evento con tus animaciones.
Agrega el fragmento mostrado anteriormente al fragmento de la pila posterior, por lo tanto, cuando el usuario presiona el botón Atrás, la tarjeta se vuelve hacia atrás.
java Seleccionar todo
javaSelect All
 void  privado flipCard ()  {
     if (mShowingBack) {
        getFragmentManager (). popBackStack ();
        regreso ;
    }
    // Voltee hacia atrás.

    mShowingBack = verdadero ;
    getFragmentManager ()
        .beginTransaction ()
        .setCustomAnimations (
            R.animator.right_in, R.animator.right_out,
            R.animator.left_in, R.animator.left_out)
        .replace (R.id.container, new CardBackFragment ())
         // Agregue esta transacción a la pila posterior, permitiendo a los usuarios presionar Atrás 
        // para llegar al frente de la tarjeta. 
        .addToBackStack ( null )
         // Confirmar la transacción.
        .cometer();
}
Ahora crea los elementos del menú que mostrarán flip animations cuando se haga clic. En el menú / main.xml, agregue los siguientes elementos de menú:

xml Seleccionar todo
xmlSelect All
< menu  xmlns: android = "http://schemas.android.com/apk/res/android" > 
    < item  android: id = "@ + id / action_add_item" 
        android: title = "@ string / action_add_item" 
        android: icon = "@ drawable / ic_action_new" 
        android: showAsAction = "ifRoom" />
 </ menu >
A continuación, defina ID de elemento de menú para crear instancias de elementos de barra, cree un recurso de valores (values ​​/ action.xml) y agregue el siguiente código XML:

xmlSeleccionar todo
xmlSelect All
< resources > 
    < item  type = "id"  name = "action_next" /> 
    < item  type = "id"  name = "action_flip" /> 
</ resources >
Actualice la clase Activity inflando el menú con los elementos que creó anteriormente y crea una instancia del método flipCard () cuando se hace clic en un elemento del menú.

java Seleccionar todo
javaSelect All
@Override 
public  boolean  onCreateOptionsMenu (menú de menú)  {
     super .onCreateOptionsMenu (menú);
    Elemento MenuItem = menu.add (Menu.NONE, R.id.action_flip, Menu.NONE,
        mShowingBack? R.string.action_photo:
        R.string.action_info);
    item.setIcon (mShowingBack?
        R.drawable.ic_action_photo:
        R.drawable.ic_action_info);
    item.setShowAsAction (MenuItem.SHOW_AS_ACTION_IF_ROOM);
    regreso verdadero ;
}
@Override 
public  boolean  onOptionsItemSelected (elemento MenuItem)  {
     switch (item.getItemId ()) {
         case android.R.id.home:
            NavUtils.navigateUpTo ( esto , nuevo Intento ( esto , FlipActivity.class));
            devolver  verdadero ;
        caso R.id.action_flip:
            carta invertida();
            devolver  verdadero ;
    }
    return  super .onOptionsItemSelected (item);
}
El código final para la actividad (FlipActivity.java) debería verse así:

java Seleccionar todo
javaSelect All
paquete com.example.vaatiesther.flipactionanimation;
importar android.app.Activity;
importar android.app.Fragment;
import android.app.FragmentManager;
importar android.content.Intent;
importar android.os.Bundle;
import android.support.v4.app.NavUtils;
importar android.view.LayoutInflater;
importar android.view.Menu;
importar android.view.MenuItem;
importar android.view.View;
import android.view.ViewGroup;
la  clase pública FlipActivity extiende la actividad implementa FragmentManager   
  .OnBackStackChangedListener  {
     private  boolean mShowingBack = false ;
    @Override 
    protected  void  onCreate (Bundle savedInstanceState)  {
         super .onCreate (savedInstanceState);
        setContentView (R.layout.activity_flip);
        if (savedInstanceState == null ) {
            getFragmentManager ()
                .beginTransaction ()
                .add (R.id.container, nuevo CardFrontFragment ())
                .cometer();
        } else {
            mShowingBack = (getFragmentManager (). getBackStackEntryCount ()> 0 );
        }
        getFragmentManager (). addOnBackStackChangedListener ( esto );
    }
    @Override 
    public  boolean  onCreateOptionsMenu (menú de menú)  {
         super .onCreateOptionsMenu (menú);
        Elemento MenuItem = menu.add (Menu.NONE, R.id.action_flip, Menu.NONE,
            mShowingBack?
            R.string.action_photo:
            R.string.action_info);
        item.setIcon (mShowingBack?
            R.drawable.ic_action_photo:
            R.drawable.ic_action_info);
        item.setShowAsAction (MenuItem.SHOW_AS_ACTION_IF_ROOM);
        devolver  verdadero ;
    }
    @Override 
    public  boolean  onOptionsItemSelected (elemento MenuItem)  {
         switch (item.getItemId ()) {
             case android.R.id.home:
                 // Navega "arriba" de la estructura de demostración a la actividad de launchpad. 
                // Consulte http://developer.android.com/design/patterns/navigation.html para obtener más información. 
                NavUtils.navigateUpTo ( esto , nuevo Intento ( esto , FlipActivity.class));
                devolver  verdadero ;
            caso R.id.action_flip:
                carta invertida();
                devolver  verdadero ;
        }
        volver  super .onOptionsItemSelected (item);
    }
     void  privado flipCard ()  {
         if (mShowingBack) {
            getFragmentManager (). popBackStack ();
            regreso ;
        }
        // Voltee hacia atrás. 
        mShowingBack = true ;
        getFragmentManager ()
            .beginTransaction ()
            .setCustomAnimations (
                R.animator.right_in, R.animator.right_out,
                R.animator.left_in, R.animator.left_out)
            .replace (R.id.container, new CardBackFragment ())
             // Agregue esta transacción a la pila posterior, permitiendo a los usuarios presionar Atrás 
            // para llegar al frente de la tarjeta. 
            .addToBackStack ( null )
             // Confirmar la transacción.
            .cometer();
    }
    @Override 
    public  void  onBackStackChanged ()  {
        mShowingBack = (getFragmentManager (). getBackStackEntryCount ()> 0 );
        // Cuando la pila de respaldo cambia, invalida el menú de opciones (barra de acciones).
        invalidateOptionsMenu ();
    }
    public  static  class  CardFrontFragment  extends  Fragment  {
         public  CardFrontFragment ()  {}
         @Override 
        public View onCreateView (LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)  {
             return inflater.inflate (R.layout.fragment_card_front, container, false );
        }
    }
    public  static  class  CardBackFragment  extends  Fragment  {
         public  CardBackFragment ()  {}
         @Override 
        public View onCreateView (LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)  {
             return inflater.inflate (R.layout.fragment_card_back, container, false );
      

0 comentarios:

Publicar un comentario