Come posso creare un layout scorrevole, come il menu principale di Android?

Question

Devo creare un'applicazione con 4 viste. Ho bisogno di passare da una vista a un'altra semplicemente con un tocco e uno spostamento a sinistra oa destra (nessun pulsante). L'effetto che vorrei è lo stesso che vedi quando navighi nel menu principale di Android quando passi da una pagina all'altra.

Ho testato ViewFlipper, ma non riesco a utilizzarlo: sembra che non abbia catturato correttamente l'evento di tocco. Non so nemmeno se sia il componente giusto.

Qual è il modo giusto per gestire questo?

Answer 1

Finalmente l'ho fatto. Questa è la mia soluzione. Prima di tutto è necessario definire un layout principale, che contenga il layout figlio.

<?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> 

dove page_1 e page_2 sono il layout che ho bisogno di scambiare. Quelli layout sono assolutamente standard, realizzati come si prefaccia.

allora avete bisogno di un'attività:

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! Fatto!

Answer 2

Penso che quello che stai cercando è un SlidingDrawer. Con questo, si potrebbe così qualcosa di simile:

<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

Penso che si possa utilizzare l'animazione di layout per lo scopo ..

res/anim/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" 
/> 

Fonte:

// 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

Si intende la schermata iniziale in cui è possibile scorrere tra le visualizzazioni e scatta su ciascuna di esse?
This potrebbe aiutarti.