¿Cómo puedo crear un diseño deslizante, como el menú principal de Android?

Question

Necesito crear una aplicación con 4 vistas. Necesito pasar de una vista a otra simplemente tocando y moviéndome hacia la izquierda o hacia la derecha (sin botón). El efecto que me gustaría es el mismo que ves cuando navegas en el menú principal de Android cuando pasas de una página a otra.

He probado ViewFlipper, pero no puedo usarlo: parece que no capta el evento táctil correctamente. Ni siquiera sé si es el componente correcto.

¿Cuál es la forma correcta de manejar esto?

Answer 1

Finalmente lo hice. Esta es mi solución. Antes que nada, necesita definir un diseño principal que contenga el diseño de elementos secundarios.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    > 


<ViewFlipper android:id="@+id/ViewFlipper01" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    > 
    <include android:id="@+id/libraryView1" layout="@layout/page_1" /> 
    <include android:id="@+id/libraryView2" layout="@layout/page_2" /> 


</ViewFlipper> 

</RelativeLayout> 

donde la página_1 y la página_2 son el diseño que necesito intercambiar. Esos diseños son diseños estándar, hechos como prefieres.

Luego hay una actividad:

public class Main extends Activity { 

    private ViewFlipper vf; 

    private float oldTouchValue; 

    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.main); 

     vf=(ViewFlipper)findViewById(R.id.ViewFlipper01); 
    } 

    @Override 
    public boolean onTouchEvent(MotionEvent touchevent) { 
     switch (touchevent.getAction()) 
     { 
      case MotionEvent.ACTION_DOWN: 
      { 
       oldTouchValue = touchevent.getX(); 
       break; 
      } 
      case MotionEvent.ACTION_UP: 
      { 
       //if(this.searchOk==false) return false; 
       float currentX = touchevent.getX(); 
       if (oldTouchValue < currentX) 
       { 
        vf.setInAnimation(inFromLeftAnimation()); 
        vf.setOutAnimation(outToRightAnimation()); 
        vf.showNext(); 
       } 
       if (oldTouchValue > currentX) 
       { 
        vf.setInAnimation(inFromRightAnimation()); 
        vf.setOutAnimation(outToLeftAnimation()); 
        vf.showPrevious(); 
       } 
      break; 
      } 
     } 
     return false; 
    } 

    //for the previous movement 
    public static Animation inFromRightAnimation() { 

     Animation inFromRight = new TranslateAnimation(
     Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, 
     Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f 
     ); 
     inFromRight.setDuration(350); 
     inFromRight.setInterpolator(new AccelerateInterpolator()); 
     return inFromRight; 
     } 
    public static Animation outToLeftAnimation() { 
     Animation outtoLeft = new TranslateAnimation(
     Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f, 
     Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f 
     ); 
     outtoLeft.setDuration(350); 
     outtoLeft.setInterpolator(new AccelerateInterpolator()); 
     return outtoLeft; 
     }  
    // for the next movement 
    public static Animation inFromLeftAnimation() { 
     Animation inFromLeft = new TranslateAnimation(
     Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, 
     Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f 
     ); 
     inFromLeft.setDuration(350); 
     inFromLeft.setInterpolator(new AccelerateInterpolator()); 
     return inFromLeft; 
     } 
    public static Animation outToRightAnimation() { 
     Animation outtoRight = new TranslateAnimation(
     Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f, 
     Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f 
     ); 
     outtoRight.setDuration(350); 
     outtoRight.setInterpolator(new AccelerateInterpolator()); 
     return outtoRight; 
     }  
} 

Tada! ¡Hecho!

Answer 2

Creo que lo que estás buscando es un SlidingDrawer. Con esto, se podía por lo menos así:

<SlidingDrawer 
    android:id="@+id/drawer" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 

    android:handle="@+id/handle" 
    android:content="@+id/content"> 

    <ImageView 
     android:id="@id/handle" 
     android:layout_width="88dip" 
     android:layout_height="44dip" /> 

    <GridView 
     android:id="@id/content" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 

</SlidingDrawer> 

Answer 3

Creo que se puede utilizar la animación de diseño con el fin ..

res/animal/popin.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@android:anim/accelerate_interpolator"> 
    <scale 
    android:fromXScale="0.0" android:toXScale="1.0" 
    android:fromYScale="0.0" android:toYScale="1.0" 
    android:pivotX="50%" 
    android:pivotY="50%" 
    android:duration="400" 
    /> 
</set> 

res/anim/popinlayout.xml:

<layoutAnimation 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:delay="0.5" 
    android:animationOrder="random" 
    android:animation="@anim/popin" 
/> 

Fuente:

// Applying a Layout Animation and Animation Listener 
aViewGroup.setLayoutAnimationListener(new AnimationListener() { 
    public void onAnimationEnd(Animation _animation) { 
    // TODO: Actions on animation complete. 
    } 
    public void onAnimationRepeat(Animation _animation) {} 
    public void onAnimationStart(Animation _animation) {} 
}); 

aViewGroup.scheduleLayoutAnimation(); 

Answer 4

¿Te refieres a la pantalla de inicio donde puedes deslizar entre las vistas y se ajusta a cada una?
This podría ayudarlo.