2010-12-26 11 views
9

Come per l'oggetto, vorrei riprodurre l'effetto dissolvenza tra due layout. Ora ho questa situazione:Effetto dissolvenza tra i layout

LinearLayout l; 
LinearLayout l2; 

Per passare tra di loro che ho usato

l.setVisibility(View.GONE); 
l2.setVisibility(View.VISIBLE); 

voglio aggiungere effetto di dissolvenza tra questo transiction, come posso farlo?

risposta

3

Utilizzo di R.anim.fade_out & .R.anim.fade_in è possibile creare un'animazione che esegue questa operazione. Non ne so molto di questo, ma ecco un tutorial per quanto riguarda le animazioni in Android: Animation Tutorial

P.S. Questo tutorial non è mio, quindi il credito non mi esce.

Edit:

AnimationSet set = new AnimationSet(true); 

Animation animation = new AlphaAnimation(0.0f, 1.0f); 
animation.setDuration(50); 
set.addAnimation(animation); 

animation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f,Animation.RELATIVE_TO_SELF, 0.0f, 
Animation.RELATIVE_TO_SELF, -1.0f,Animation.RELATIVE_TO_SELF, 0.0f 
); 
animation.setDuration(100); 
set.addAnimation(animation); 

LayoutAnimationController controller = new LayoutAnimationController(set, 0.5f); 
l.setLayoutAnimation(controller); 

Dissolvenza Animazione

public static Animation runFadeOutAnimationOn(Activity ctx, View target) { 
    Animation animation = AnimationUtils.loadAnimation(ctx,android.R.anim.fade_out); 
    target.startAnimation(animation); 
    return animation; 
} 

Sto indovinando si può provare qualcosa di simile, copio incollato l'animazione dal tutorial non so cosa fa esattamente come non ho esperienza con lo sviluppo di Android. Un altro esempio potrebbe essere Example 2

+1

Voglio usare android.R.anim.fade_in e fade_out e ho letto qualcosa sul metodo overridePendingTransiction. Ma non capisco come impostare l'animazione su LinearLayout. Mi potete aiutare? – CeccoCQ

+0

Il tutorial copre anim.fade_in e fade_out, se scorri in basso abit puoi vedere il codice di esempio! Questo dovrebbe farti andare, penso. – Citroenfris

21

Ecco una soluzione di lavoro di cross dissolvenza tra 2 layout:

public class CrossFadeActivity extends Activity { 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.crossfade); 

    final View l1 = findViewById(R.id.l1); 
    final View l2 = findViewById(R.id.l2); 

    final Animation fadeOut = AnimationUtils.loadAnimation(CrossFadeActivity.this, R.anim.fade_out); 
    final Animation fadeIn = AnimationUtils.loadAnimation(CrossFadeActivity.this, R.anim.fade_in); 

    findViewById(R.id.button1).setOnClickListener(new OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      fadeOut.setAnimationListener(new AnimationListener() { 
       @Override 
       public void onAnimationStart(Animation animation) { 
       } 

       @Override 
       public void onAnimationRepeat(Animation animation) { 
       } 

       @Override 
       public void onAnimationEnd(Animation animation) { 
        l1.setVisibility(View.GONE); 
       } 
      }); 
      l1.startAnimation(fadeOut); 
      l2.setVisibility(View.VISIBLE); 
      l2.startAnimation(fadeIn); 
     } 
    }); 
    findViewById(R.id.button2).setOnClickListener(new OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      fadeOut.setAnimationListener(new AnimationListener() { 
       @Override 
       public void onAnimationStart(Animation animation) { 
       } 

       @Override 
       public void onAnimationRepeat(Animation animation) { 
       } 

       @Override 
       public void onAnimationEnd(Animation animation) { 
        l2.setVisibility(View.GONE); 
       } 
      }); 
      l2.startAnimation(fadeOut); 
      l1.setVisibility(View.VISIBLE); 
      l1.startAnimation(fadeIn); 
     } 
    }); 
} 
} 

crossfade.xml:

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

<LinearLayout 
    android:id="@+id/l1" 
    android:layout_width="fill_parent" 
    android:layout_height="300dip" 
    android:orientation="vertical" 
    android:background="@drawable/someimage" 
    > 

    <Button 
     android:id="@+id/button1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Button" /> 

</LinearLayout> 

<RelativeLayout 
    android:id="@+id/l2" 
    android:layout_width="fill_parent" 
    android:layout_height="300dip" 
    android:orientation="vertical" 
    android:background="@drawable/someimage2" 
    android:visibility="gone" 
    > 

    <Button 
     android:id="@+id/button2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Button" 
     android:layout_centerInParent="true" 
     /> 

</RelativeLayout> 

</RelativeLayout> 

Dove L1 e L2 sono 2 esempi di schemi casuali. Il trucco è di metterli in XML in modo tale che si sovrappongano l'un l'altro (ad esempio in un RelativeLayout) con visibile/andato, aggiungere ascoltatori alle animazioni per attivare la visibilità al termine e impostare la vista che deve passare in dissolvenza a visibile prima del l'animazione inizia, altrimenti l'animazione non sarà visibile.

Metto i pulsanti con gli ascoltatori per alternare l'animazione nei layout stessi, perché ho bisogno di implementarlo in quel modo ma l'ascoltatore di clic può essere naturalmente da qualche altra parte (se è solo uno dovrebbe essere usato in combinazione con qualche bandiera o controllo per sapere come passare).

Questi sono i file di animazione. Essi devono essere conservati in cartella res/anim:

fade_in.xml

<?xml version="1.0" encoding="UTF-8"?> 
<alpha xmlns:android="http://schemas.android.com/apk/res/android" 
android:duration="1000" 
android:fillAfter="true" 
android:fromAlpha="0.0" 
android:toAlpha="1.0" /> 

fade_out.xml

<?xml version="1.0" encoding="UTF-8"?> 
<alpha xmlns:android="http://schemas.android.com/apk/res/android" 
android:duration="1000" 
android:fillAfter="true" 
android:fromAlpha="1.0" 
android:toAlpha="0" /> 

UPDATE:

Invece di usare R.anim.fade_in, puoi utilizzare il valore predefinito fade_in dall'API Android (android.R.fade_in):

final Animation fadeIn = AnimationUtils.loadAnimation(CrossFadeActivity.this, android.R.anim.fade_in); 

Utilizzando android.R.anim.fade_in, non è necessario creare il file res/anim/fade_in.xml.

Android ha un pacchetto con alcune animazioni utili su android.R.anim: http://developer.android.com/reference/android/R.anim.html

+2

È inoltre possibile utilizzare il metodo '.bringToFront()' per invertire l'ordine z dei relativi layout nel caso in cui l'utente debba interagire con il foreground. Questa risposta copre solo l'aspetto dell'animazione. –

2

Dal momento che Android 3.0 è possibile utilizzare

android:animateLayoutChanges="true" 

in un layout in XML e le eventuali modifiche a questi contenuti specifici layout in fase di esecuzione sarà animato. Ad esempio, nel tuo caso, è necessario impostare questo attributo per il genitore per il layout madre di L e L2 per esempio

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    tools:context="me.kalem.android.RegistrationActivity" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:animateLayoutChanges="true" 
    android:padding="20dp"> 

    <LinearLayout 
     android:id="@+id/l1" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:visibility="visible"> 

    ........ 

    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/l2" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:visibility="gone"> 

    ........ 

    </LinearLayout> 

</LinearLayout> 

Ora nascondere L1 e L2 che mostra in fase di esecuzione verrà animato.

Problemi correlati