LayoutTransition: Anima vista accanto a una vista espandibile

Question

Ho ricreato il mio problema in una rappresentazione molto semplice. Ho 3 immagini di testo. 2 di questi sono in un LinearLayout separato, il terzo è allo stesso livello del LinearLayout. Sto attivando la visibilità di test1 e test2 e mi piacerebbe vederli svanire (che funziona). Inoltre, voglio inserire test3 nella sua nuova posizione (in luogo dello test1 e test2). Non posso farlo accadere. test3 scatta semplicemente al suo nuovo punto.

Come posso ottenere questo?

Il mio codice:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/parent" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:animateLayoutChanges="true" 
    android:orientation="vertical" > 

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

    <LinearLayout android:animateLayoutChanges="true" 
     android:id="@+id/child1" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" > 

     <TextView 
      android:id="@+id/test1" 
      android:layout_width="match_parent" android:visibility="gone" 
      android:layout_height="wrap_content" 
      android:text="TEST1" /> 

     <TextView 
      android:id="@+id/test2" 
      android:layout_width="match_parent" android:visibility="gone" 
      android:layout_height="wrap_content" 
      android:text="TEST2" /> 
    </LinearLayout> 

    <TextView 
     android:id="@+id/test3" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:text="TEST3" /> 

</LinearLayout> 

E nella mia attività:

public class LayoutAnimations extends Activity { 
    private boolean toggle = true; 

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

     Button button = (Button) findViewById(R.id.button); 
     button.setOnClickListener(new OnClickListener() { 

      @Override 
      public void onClick(View v) { 
       if (toggle) { 
        findViewById(R.id.test1).setVisibility(View.VISIBLE); 
        findViewById(R.id.test2).setVisibility(View.VISIBLE); 
       } else { 
        findViewById(R.id.test1).setVisibility(View.GONE); 
        findViewById(R.id.test2).setVisibility(View.GONE); 
       } 
       toggle = !toggle; 
      } 
     }); 

    } 

} 

Edit: Io in realtà sono un altro TextView accanto test1 e test2 che dovrebbe essere visibile in ogni momento, in modo da non si può semplicemente nascondere lo LinearLayout stesso.

Answer 1

ho risolto utilizzando un altro problema. . See this answer

Citando:

credo che l'approccio più semplice è quello di estendere Animation classe ed eseguire l'override applyTransformation() per cambiare l'altezza della vista come segue:

import android.view.View; 
import android.view.ViewGroup.LayoutParams; 
import android.view.animation.Animation; 
import android.view.animation.Transformation; 
import android.widget.LinearLayout; 

public class MyCustomAnimation extends Animation { 

    public final static int COLLAPSE = 1; 
    public final static int EXPAND = 0; 

    private View mView; 
    private int mEndHeight; 
    private int mType; 
    private LinearLayout.LayoutParams mLayoutParams; 

    public MyCustomAnimation(View view, int duration, int type) { 

     setDuration(duration); 
     mView = view; 
     mEndHeight = mView.getHeight(); 
     mLayoutParams = ((LinearLayout.LayoutParams) view.getLayoutParams()); 
     mType = type; 
     if(mType == EXPAND) { 
      mLayoutParams.height = 0; 
     } else { 
      mLayoutParams.height = LayoutParams.WRAP_CONTENT; 
     } 
     view.setVisibility(View.VISIBLE); 
    } 

    public int getHeight(){ 
     return mView.getHeight(); 
    } 

    public void setHeight(int height){ 
     mEndHeight = height; 
    } 

    @Override 
    protected void applyTransformation(float interpolatedTime, Transformation t) { 

     super.applyTransformation(interpolatedTime, t); 
     if (interpolatedTime < 1.0f) { 
      if(mType == EXPAND) { 
       mLayoutParams.height = (int)(mEndHeight * interpolatedTime); 
      } else { 
       mLayoutParams.height = (int) (mEndHeight * (1 - interpolatedTime)); 
      } 
      mView.requestLayout(); 
     } else { 
      if(mType == EXPAND) { 
       mLayoutParams.height = LayoutParams.WRAP_CONTENT; 
       mView.requestLayout(); 
      }else{ 
       mView.setVisibility(View.GONE); 
      } 
     } 
    } 
} 

Per usarlo, impostare il onclick() come segue:

int height; 

@Override 
public void onClick(View v) { 
    if(view2.getVisibility() == View.VISIBLE){ 
     MyCustomAnimation a = new MyCustomAnimation(view2, 1000, MyAnimation.COLLAPSE); 
     height = a.getHeight(); 
     view2.startAnimation(a); 
    }else{ 
     MyCustomAnimation a = new MyCustomAnimation(view2, 1000, MyAnimation.EXPAND); 
     a.setHeight(height); 
     view2.startAnimation(a); 
    } 
} 

Cordiali saluti.

Answer 2

uso questa animazione XML slide_in_left.XML

<translate 
    android:duration="500" 
    android:fromXDelta="-100%" 
    android:fromYDelta="0%" 
    android:toXDelta="0%" 
    android:toYDelta="0%" /> 
</set> 

e slid_in_right.XML

<translate 
    android:duration="500" 
    android:fromXDelta="100%" 
    android:fromYDelta="0%" 
    android:toXDelta="0%" 
    android:toYDelta="0%" /> 
</set> 

uso questa animazione Animazione slideinleft, slideinright;

e initlize questa animazione

public void AnimationInitialization() { 

    slideinleft= AnimationUtils 
      .loadAnimation(this, R.anim.slide_in_left); 


    slideinright= AnimationUtils.loadAnimation(this, 
      R.anim.slide_in_right); 

} 

e chiamare questa funzione 2 per cambiare visibilità

public void showMenu() { 

    linearlayout_first.clearAnimation(); 

    linearlayout_first.startAnimation(slideinleft); 

    linearlayout_first.setVisibility(View.VISIBLE); 

} 

public void hideMenu() { 

    linearlayout_second.clearAnimation(); 
    linearlayout_second.startAnimation(slideinright); 


    linearlayout_second.setVisibility(View.GONE); 
} 

è possibile modificare il layout come richiedete. cambia anche in Xdelta e Ydelta dell'animazione XML ..

Answer 3

La documentazione è un po 'confusa. Per android:animateLayoutChanges, si dice

... Quando questo flag è impostato su true, un oggetto predefinito LayoutTransition sarà impostato sul contenitore e predefiniti animazioni ViewGroup verrà eseguito quando si verificano questi cambiamenti di layout.

mentre la documentazione di setLayoutTransition metodo della classe ViewGroup dice:

Per impostazione predefinita, l'oggetto transizione è nullo (modifiche in modo di layout non sono animati).

Si dovrebbe provare a impostare un LayoutTransition sul layout.

Ecco un esempio che lo fa .. http://www.java2s.com/Code/Android/UI/UseLayoutTransitiontoautomatetransitionanimationsasitemsarehiddenorshowninacontainer.htm

Answer 4

ho voluto la stessa cosa accada nella mia app. Per ottenere ciò:

1. Creare un'animazione adatta in Res/anim. Ho usato una diapositiva dal tipo di animazione sinistra. Puoi google altro se non sei soddisfatto di questo.

   slide_out_left.xml

   <translate 
       android:duration="@android:integer/config_mediumAnimTime" 
       android:fromXDelta="0" 
       android:toXDelta="-50%p" /> 
   
   <alpha 
       android:duration="@android:integer/config_mediumAnimTime" 
       android:fromAlpha="1.0" 
       android:toAlpha="0.0" /> 
   

2. Attaccare l'animazione sopra definito con la vista da animare, (nel tuo caso child1 contenente text1 e testo2)

   Animation outAnimation; 
   LinearLayout a1 = (LinearLayout)findViewById(R.id.child1); 
   
   outAnimation = (Animation) AnimationUtils.loadAnimation (getApplicationContext(), R.anim.slide_out_left); 
   
   a1.setAnimation(outAnimation); 
   outAnimation.setAnimationListener(new AnimationListener() { 
   
       @Override 
       public void onAnimationEnd(Animation arg0) { 
       a1.setVisibility(View.GONE);        
       } 
       @Override 
       public void onAnimationRepeat(Animation animation) { 
        // TODO Auto-generated method stub       
       } 
   
       @Override 
       public void onAnimationStart(Animation animation) { 
        // TODO Auto-generated method stub 
       }     
   }); 
   a1.startAnimation(outAnimation); 
   

NOTA: Ho attaccato animazione con child1 invece di text3 perché quando child1 scivolerà lentamente verrà automaticamente dare l'illusione che text3 sta scivolando in