LayoutTransition: Animar la vista junto a una vista en expansión
He recreado mi problema a una representación muy simple. Tengo 3 TextViews. 2 de ellos están en un LinearLayout
separado, el tercero está en el mismo nivel que el LinearLayout
. Estoy cambiando la visibilidad de test1
y test2
, y me gustaría ver que se desvanecen (lo que funciona). Además, quiero que test3
deslice en su nuevo lugar (teniendo lugar de test1
y test2
). No puedo hacer que esto suceda. test3
sólo encaja a su nuevo punto.
¿Cómo puedo lograr esto?
- ¿Por qué animateLayoutChanges mueve la posición de las vistas de hermanos antes de que termine la animación?
- Android RecyclerView desplazamiento suave para ver que está animando su altura
- Cómo iniciar una actividad con una animación completamente programada
- ¿Cómo animar una explosión que sopla los cuerpos circundantes lejos?
- Animación de Android: ¿Esperar hasta que termine?
Mi código:
<?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>
Y en mi Actividad:
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: En realidad tengo otro TextView
lado de test1
y test2
que debe ser visible en todo momento, así que no puedo ocultar el LinearLayout
sí mismo.
- AnimatedVectorDrawable en la biblioteca de soporte y animación de "pathData"
- Buscar EditarTexto de animación como la aplicación de Chrome
- Animación de desenfoque de Android ImageView
- ItemDecoration sobreescribir getItemOffsets () y animación
- Herramientas para crear AnimatedVectorDrawable
- Cómo deslizar el ActionBar junto con el NavigationDrawer
- Tinder como vista de aplicación con Animation
- G + animación de la interfaz de usuario de Android
Lo he resuelto usando otra pregunta. Ver esta respuesta
Citando:
Creo que el enfoque más simple es extender la clase de Animation
y reemplazar applyTransformation()
para cambiar la altura de la vista de la siguiente manera:
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); } } } }
Para usarlo, configure su onclick()
siguiente manera:
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); } }
Saludos.
Quería que ocurriera lo mismo en mi aplicación. Lograr esto:
-
Cree una animación adecuada en Res / anim. He utilizado una diapositiva fuera de la izquierda tipo de animación. Puedes google otro si no estás satisfecho con éste.
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" />
-
Adjuntar animación definida anteriormente con la vista que desea animar, (en su caso child1 que contiene text1 y text2)
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 : He adjuntado animación con child1 en lugar de text3 porque cuando child1 se deslizará hacia fuera lentamente automáticamente dará una ilusión de que text3 está deslizándose pulg.
Utilizar esta animación XML slide_in_left.XML
<translate android:duration="500" android:fromXDelta="-100%" android:fromYDelta="0%" android:toXDelta="0%" android:toYDelta="0%" /> </set>
Y slid_in_right.XML
<translate android:duration="500" android:fromXDelta="100%" android:fromYDelta="0%" android:toXDelta="0%" android:toYDelta="0%" /> </set>
Utilice esta animación Animación slideinleft, slideinright;
E initlize esta animación
public void AnimationInitialization() { slideinleft= AnimationUtils .loadAnimation(this, R.anim.slide_in_left); slideinright= AnimationUtils.loadAnimation(this, R.anim.slide_in_right); }
Y llamar a esta función 2 para cambiar la visibilidad
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); }
Usted puede cambiar la disposición mientras que usted requiere. También cambian en Xdelta y Ydelta de animación XML ..
La documentación es poco confusa. Para android:animateLayoutChanges
, dice
… Cuando este indicador se establece en true, un objeto LayoutTransition predeterminado se establecerá en el contenedor ViewGroup y las animaciones predeterminadas se ejecutarán cuando se produzcan estos cambios de diseño.
Mientras que la documentación del método setLayoutTransition de la clase ViewGroup dice:
De forma predeterminada, el objeto de transición es nulo (por lo que los cambios de diseño no se animan).
Debe intentar establecer una LayoutTransition
en el diseño.
Aquí hay un ejemplo que hace que .. http://www.java2s.com/Code/Android/UI/UseLayoutTransitiontoautomatetransitionanimationsasitemsarehiddenorshowninacontainer.htm
- La mejor manera de ejecutar periódicamente AsyncTasks en Android
- Android Studio – No se puede ejecutar la aplicación en el dispositivo minSdk (API 23, N)! = Device Sdk (API 22)