Digamos que tengo un diseño lineal vertical con:
[v1]
[v2]
Por defecto v1 tiene visibily = GONE. Me gustaría mostrar v1 con una animación expandida y presionar hacia abajo v2 al mismo tiempo.
Intenté algo como esto:
Animation a = new Animation()
{
int initialHeight;
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
final int newHeight = (int)(initialHeight * interpolatedTime);
v.getLayoutParams().height = newHeight;
v.requestLayout();
}
@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
initialHeight = height;
}
@Override
public boolean willChangeBounds() {
return true;
}
};
Pero con esta solución, parpadeo cuando comienza la animación. Creo que se debe a que v1 muestra el tamaño completo antes de que se aplique la animación.
Con javascript, esta es una línea de jQuery! ¿Alguna forma simple de hacer esto con Android?
a.setDuration(((int)(initialHeight / v.getContext().getResources().getDisplayMetrics().density)) * 4)
v.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
y ¡v.getLayoutParams().height = interpolatedTime == 1 ? targetHeight : (int)(targetHeight * interpolatedTime);
Eso funcionó para mí!Estaba tratando de hacer lo que creo que era una animación muy similar y encontré una solución elegante. Este código asume que siempre vas de 0-> ho h-> 0 (h es la altura máxima). Los tres parámetros del constructor son view = la vista que se va a animar (en mi caso, una vista web), targetHeight = la altura máxima de la vista y down = un valor booleano que especifica la dirección (true = expandiendo, false = colapsando).
fuente
Hoy me topé con el mismo problema y creo que la verdadera solución a esta pregunta es esta
Tendrá que establecer esta propiedad para todos los diseños superiores, que están involucrados en el turno. Si ahora configura la visibilidad de un diseño como GONE, el otro ocupará el espacio a medida que el que desaparece lo libere. Habrá una animación predeterminada que es una especie de "desvanecimiento", pero creo que puede cambiar esto, pero la última que no he probado, por ahora.
fuente
Tomé la solución de @LenaYan que no me funcionó correctamente ( porque estaba transformando la Vista a una vista de altura 0 antes de colapsar y / o expandirse ) e hice algunos cambios.
Ahora funciona muy bien , tomando la altura anterior de la Vista y comienza a expandirse con este tamaño. Colapsar es lo mismo.
Simplemente puede copiar y pegar el siguiente código:
Uso:
¡Suficientemente fácil!
Gracias LenaYan por el código inicial!
fuente
Una alternativa es utilizar una animación de escala con los siguientes factores de escala para expandirse:
y para colapsar:
fuente
La respuesta de @Tom Esterez , pero actualizada para usar view.measure () correctamente según Android getMeasuredHeight, devuelve valores incorrectos.
fuente
Ok, acabo de encontrar una solución MUY fea:
¡No dude en proponer una mejor solución!
fuente
View.onMeause(widthMeasureSpec, heightMeasureSpec)
invocación, por lo que las especificaciones de ancho y alto deben intercambiarse.fuente
Si no desea expandirse o contraerse completamente, aquí hay una simple Animación de altura:
Uso:
fuente
He adaptado la respuesta aceptada actualmente por Tom Esterez , que trabajó pero tenía un entrecortado y no muy suave animación. Mi solución básicamente reemplaza la
Animation
con aValueAnimator
, que puede ajustarse con unaInterpolator
de su elección para lograr varios efectos como sobreimpulso, rebote, aceleración, etc.Esta solución funciona muy bien con vistas que tienen una altura dinámica (es decir, usando
WRAP_CONTENT
), ya que primero mide la altura real requerida y luego la anima a esa altura.Entonces simplemente llama
expand( myView );
ocollapse( myView );
.fuente
v.measure()
y ahora está funcionando perfectamente. ¡Gracias!Haciendo uso de las funciones de extensión de Kotlin, esto es probado y la respuesta más corta
Simplemente llame a animateVisibility (expand / collapse) en cualquier vista.
fuente
Agregando a la excelente respuesta de Tom Esterez y la excelente actualización de Erik B , pensé en publicar mi propia toma, compactando los métodos de expansión y contrato en uno. De esta manera, podría tener, por ejemplo, una acción como esta ...
... que llama al siguiente método y deja que descubra qué hacer después de cada onClick () ...
fuente
Me gustaría agregar algo a la muy útil respuesta anterior . Si no conoce la altura con la que terminará dado que sus vistas .getHeight () devuelve 0, puede hacer lo siguiente para obtener la altura:
Donde DUMMY_HIGH_DIMENSIONS es el ancho / alto (en píxeles) que su vista está restringida a ... tener un número enorme es razonable cuando la vista se encapsula con un ScrollView.
fuente
Este es un fragmento que utilicé para cambiar el tamaño del ancho de una vista (LinearLayout) con animación.
Se supone que el código se expande o reduce según el tamaño de destino. Si desea un ancho fill_parent, tendrá que pasar el ancho primario .getMeasuredWidth como ancho objetivo mientras establece el indicador en verdadero.
Espero que ayude a algunos de ustedes.
}
fuente
resizeAnim.start()
. También he intentado con y sinsetFillAfter(true)
.startAnimation(resizeAnim)
a la vista.Para una animación suave, utilice el controlador con el método de ejecución ..... y disfrute de la animación Expandir / Contraer
Y llame usando este código:
Otra solución es:
fuente
Soluciones combinadas de @Tom Esterez y @Geraldo Neto
fuente
Sí, acepté los comentarios anteriores. Y, de hecho, parece que lo correcto (¿o al menos lo más fácil?) Es especificar (en XML) una altura de diseño inicial de "0px", y luego puede pasar otro argumento para "toHeight" ( es decir, la "altura final") para el constructor de su subclase de animación personalizada, por ejemplo, en el ejemplo anterior, se vería algo así:
De todos modos, ¡espero que ayude! :)
fuente
Aquí está mi solución. Pienso que es más simple. Solo expande la vista, pero puede ampliarse fácilmente.
fuente
Creo que la solución más fácil es establecer
android:animateLayoutChanges="true"
a suLinearLayout
y luego simplemente mostrar / ocultar la vista por proponiéndose su visibilidad. Funciona de maravilla, pero no tienes control sobre la duración de la animación.fuente
Estás en el camino correcto. Asegúrese de tener v1 configurado para tener una altura de diseño de cero justo antes de que comience la animación. Desea inicializar su configuración para que se vea como el primer fotograma de la animación antes de comenzar la animación.
fuente
Este fue mi solución, mi
ImageView
crece de100%
a200%
y volver a su tamaño original, utilizando dos archivos de animación dentro deres/anim/
la carpetaanim_grow.xml
anim_shrink.xml
Enviar un
ImageView
a mi métodosetAnimationGrowShrink()
setAnimationGrowShrink()
método:fuente
Esta es una solución de trabajo adecuada, lo he probado:
Exapnd:
Colapso:
Animador de valor:
La vista v es la vista que se va a animar, PARENT_VIEW es la vista del contenedor que contiene la vista.
fuente
Esto es realmente simple con droidQuery . Para comenzar, considere este diseño:
Podemos animar la altura al valor deseado, digamos
100dp
, usando el siguiente código:Luego, usa
droidQuery
para animar. La forma más simple es con esto:Para hacer que la animación sea más atractiva, considere agregar una relajación:
También puede cambiar la duración al
AnimationOptions
usar elduration()
método o controlar lo que sucede cuando finaliza la animación. Para un ejemplo complejo, intente:fuente
La mejor solución para expandir / contraer vistas:
fuente
onCheckedChanged
.Puede usar un ViewPropertyAnimator con un ligero giro. Para colapsar, escala la vista a una altura de 1 píxel, luego escóndela. Para expandir, muéstrelo, luego amplíelo a su altura.
El pivote le dice a la vista desde dónde escalar, el valor predeterminado está en el medio. La duración es opcional (por defecto = 1000). También puede configurar el interpolador para usar, como
.setInterpolator(new AccelerateDecelerateInterpolator())
fuente
Creé una versión en la que no necesita especificar la altura del diseño, por lo tanto, es mucho más fácil y limpio de usar. La solución es obtener la altura en el primer fotograma de la animación (está disponible en ese momento, al menos durante mis pruebas). De esta manera, puede proporcionar una Vista con una altura arbitraria y un margen inferior.
También hay un pequeño truco en el constructor: el margen inferior se establece en -10000 para que la vista permanezca oculta antes de la transformación (evita el parpadeo).
fuente
Use ValueAnimator:
fuente
mainView.getLayoutParams().height = height
.fuente
La clase se puede llamar de la siguiente manera
fuente
Basado en soluciones de @Tom Esterez y @Seth Nelson (top 2) las simplifiqué. Además de las soluciones originales, no depende de las opciones de desarrollador (configuración de animación).
fuente