2010-10-28 16 views
105

Estoy intentando animar cuando establezco la visibilidad de una distribución lineal con otros widgets, desde GONE a VISIBLE y viceversa. Estoy usando togglebuttons para mostrar y ocultar. Aquí está una imagen para mostrar lo que quiero hacer:Anima los modos de visibilidad, GONE y VISIBLE

enter image description here

puedo mostrar y ocultar, pero no soy siguiente ¿Cómo puedo animar el deslizamiento correctamente .... :(

Heres mi xml :

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/LinearLayout01" 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:orientation="vertical"> 
<ScrollView 
    android:id="@+id/ScrollView01" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent" 
     android:orientation="vertical"> 
     <!-- TITULO1 --> 
      <LinearLayout 
       android:layout_height="wrap_content" 
       android:layout_width="fill_parent" 
       android:orientation="horizontal" 
       android:background="#848284" 
       android:padding="4px"> 
       <TextView 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:id="@+id/TextView01" 
        android:text="Informação Geral" 
        android:textColor="#FFFFFF" 
        android:gravity="left" 
        android:textStyle="bold" 
        android:singleLine="true" 
        android:ellipsize="end" 
        android:layout_gravity="center_vertical" 
        android:textSize="18px" 
        android:paddingLeft="4px"> 
       </TextView> 
       <LinearLayout 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:layout_gravity="right|center_vertical" android:gravity="right|center_vertical" android:paddingTop="2px"> 
         <ToggleButton 
          android:layout_height="wrap_content" 
          android:layout_width="wrap_content" 
          android:textOff="Expandir" 
          android:textOn="Minimizar" 
          android:id="@+id/mostrar" 
          android:width="80px"> 
         </ToggleButton> 
       </LinearLayout> 

      </LinearLayout> 
      <!--LINHA SEPARADORA--> 
      <View 
       android:id="@+id/View01" 
       android:layout_width="wrap_content" 
       android:background="#B5B5B5" 
       android:layout_height="2px"> 
      </View> 
      <!-- CONTENT INITIALLY HIDDEN (GONE) --> 
      <LinearLayout 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:visibility="gone" 
       android:id="@+id/informgeral" 
       android:orientation="vertical"> 
       <LinearLayout 
        android:id="@+id/LinearLayout01" 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:paddingBottom="5px" 
        android:paddingTop="5px" 
        android:paddingLeft="8px" 
        android:orientation="vertical"> 
        <LinearLayout 
         android:layout_width="fill_parent" 
         android:layout_height="wrap_content" 
         android:orientation="horizontal"> 
         <TextView 
          android:id="@+id/consult_nrprocesso" 
          android:textStyle="bold" 
          android:layout_height="wrap_content" 
          android:layout_weight="1" 
          android:gravity="left" 
          android:ellipsize="end" 
          android:layout_width="wrap_content" 
          android:singleLine="true" 
          android:text="@string/srch_number_proc"/> 
         <TextView 
          android:id="@+id/consult_nrprocessovalue" 
          android:layout_width="0px" 
          android:layout_height="wrap_content" 
          android:layout_weight="1" 
          android:gravity="right" 
          android:singleLine="true" 
          android:ellipsize="end"/> 
        </LinearLayout> 
        <LinearLayout 
         android:layout_height="wrap_content" 
         android:layout_width="fill_parent"> 
         <TextView 
          android:id="@+id/consult_tipoprocinfo" 
          android:text="Numero Atribuido ao Processo" 
          android:layout_height="wrap_content" 
          android:layout_weight="1" 
          android:gravity="left" 
          android:singleLine="true" 
          android:ellipsize="end" 
          android:layout_width="wrap_content" 
          android:textSize="12px"/> 
        </LinearLayout> 
       </LinearLayout> 
       <View 
        android:id="@+id/View01" 
        android:layout_width="wrap_content" 
        android:background="#B5B5B5" 
        android:layout_height="1px"> 
       </View> 
<LinearLayout 
    android:id="@+id/LinearLayout02" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px"> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"> 
      <TextView 
       android:id="@+id/consult_tipoproc" 
       android:textStyle="bold" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="left" 
       android:ellipsize="end" 
       android:layout_width="wrap_content" 
       android:singleLine="true" 
       android:text="@string/proc_type"/> 
      <TextView 
       android:id="@+id/consult_tipoprocvalue" 
       android:layout_width="0px" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="right" 
       android:singleLine="true" 
       android:ellipsize="end"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent"> 
    <TextView 
      android:id="@+id/consult_tipoprocinfo" 
      android:text="Variante do Processo em causa" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:gravity="left" 
      android:singleLine="true" 
      android:ellipsize="end" 
      android:layout_width="wrap_content" 
      android:textSize="12px"/> 
    </LinearLayout>  
</LinearLayout> 
<View android:id="@+id/View01" 
     android:layout_width="fill_parent" 
     android:background="#B5B5B5" 
     android:layout_height="1px"> 
</View> 
<LinearLayout 
    android:id="@+id/LinearLayout03" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px"> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"> 
      <TextView 
       android:id="@+id/consult_etapa" 
       android:textStyle="bold" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="left" 
       android:ellipsize="end" 
       android:layout_width="wrap_content" 
       android:singleLine="true" 
       android:text="@string/srch_task"/> 
      <TextView 
       android:id="@+id/consult_etapavalue" 
       android:layout_width="0px" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="right" 
       android:singleLine="true" 
       android:ellipsize="end"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content"> 
    <TextView 
      android:id="@+id/consult_etapainfo" 
      android:text="Etapa onde se encontra o processo" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:gravity="left" 
      android:singleLine="true" 
      android:ellipsize="end" 
      android:layout_width="wrap_content" 
      android:textSize="12px"/> 
    </LinearLayout>  
</LinearLayout> 
<View android:id="@+id/View01" 
     android:layout_width="wrap_content" 
     android:background="#B5B5B5" 
     android:layout_height="1px"> 
</View> 
    <LinearLayout 
    android:id="@+id/LinearLayout04" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px"> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"> 
      <TextView 
       android:id="@+id/consult_criadopor" 
       android:textStyle="bold" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="left" 
       android:ellipsize="end" 
       android:layout_width="wrap_content" 
       android:singleLine="true" 
       android:text="@string/criado_por"/> 
      <TextView 
       android:id="@+id/consult_criadoporvalue" 
       android:layout_width="0px" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="right" 
       android:singleLine="true" 
       android:ellipsize="end"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content"> 
    <TextView 
      android:id="@+id/consult_criadoporinfo" 
      android:text="Entidade responsável pela criação do Processo." 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:gravity="left" 
      android:singleLine="true" 
      android:ellipsize="end" 
      android:layout_width="wrap_content" 
      android:textSize="12px"/> 
    </LinearLayout>  
</LinearLayout> 
<View android:id="@+id/View01" 
     android:layout_width="wrap_content" 
     android:background="#B5B5B5" 
     android:layout_height="1px"> 
</View> 
<LinearLayout 
    android:id="@+id/LinearLayout05" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px"> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"> 
      <TextView 
       android:id="@+id/consult_assunto" 
       android:textStyle="bold" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="left" 
       android:ellipsize="end" 
       android:layout_width="wrap_content" 
       android:singleLine="true" 
       android:text="@string/proc_subject"/> 
      <TextView 
       android:id="@+id/consult_assuntovalue" 
       android:layout_width="0px" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="right" 
       android:singleLine="true" 
       android:ellipsize="end"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content"> 
    <TextView 
      android:id="@+id/consult_assuntoinfo" 
      android:text="Assunto do Processo" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:gravity="left" 
      android:singleLine="true" 
      android:ellipsize="end" 
      android:layout_width="wrap_content" 
      android:textSize="12px"/> 
    </LinearLayout>  
</LinearLayout> 
<View android:id="@+id/View01" 
     android:layout_width="wrap_content" 
     android:background="#B5B5B5" 
     android:layout_height="1px"> 
</View> 
<LinearLayout 
    android:id="@+id/LinearLayout05" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px"> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"> 
      <TextView 
       android:id="@+id/consult_datainicio" 
       android:textStyle="bold" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="left" 
       android:ellipsize="end" 
       android:layout_width="wrap_content" 
       android:singleLine="true" 
       android:text="@string/srch_datebeg"/> 
      <TextView 
       android:id="@+id/consult_datainiciovalue" 
       android:layout_width="0px" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="right" 
       android:singleLine="true" 
       android:ellipsize="end"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content"> 
    <TextView 
      android:id="@+id/consult_dataincioinfo" 
      android:text="Data da criação do Processo" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:gravity="left" 
      android:singleLine="true" 
      android:ellipsize="end" 
      android:layout_width="wrap_content" 
      android:textSize="12px"/> 
    </LinearLayout>  
</LinearLayout> 
</LinearLayout> 
<!-- TITULO2 --> 
<LinearLayout 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:orientation="horizontal" 
    android:background="#848284" android:padding="4px"> 
    <TextView 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:id="@+id/TextView01" 
     android:text="Informação Complementar" 
     android:textColor="#FFFFFF" 
     android:gravity="left" 
     android:textStyle="bold" 
     android:singleLine="true" 
     android:ellipsize="end" 
     android:layout_gravity="center_vertical" android:paddingLeft="4px" android:textSize="16px"> 
    </TextView> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent" 
     android:layout_gravity="right|center_vertical" 
     android:gravity="right|center_vertical" 
     android:paddingTop="2px"> 
     <ToggleButton 
      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      android:textOff="Expandir" 
      android:textOn="Minimizar" 
      android:id="@+id/mostrar2" 
      android:width="80px"> 
     </ToggleButton> 
    </LinearLayout> 
</LinearLayout> 
<View 
    android:id="@+id/View01" 
    android:layout_width="wrap_content" 
    android:background="#B5B5B5" 
    android:layout_height="2px"> 
</View> 

<!-- TITULO3 --> 
<LinearLayout 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:orientation="horizontal" 
    android:background="#848284" 
    android:padding="4px"> 
    <TextView 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:id="@+id/TextView01" 
     android:text="Documentos Anexados" 
     android:textColor="#FFFFFF" 
     android:gravity="left" 
     android:textStyle="bold" 
     android:singleLine="true" 
     android:ellipsize="end" 
     android:layout_gravity="center_vertical" 
     android:textSize="18px" 
     android:paddingLeft="4px"> 
    </TextView> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent" 
     android:layout_gravity="right|center_vertical" 
     android:gravity="right|center_vertical" 
     android:paddingTop="2px"> 
     <ToggleButton 

      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      android:textOff="Expandir" 
      android:textOn="Minimizar" 
      android:id="@+id/mostrar" 
      android:width="80px"> 
     </ToggleButton> 
    </LinearLayout>  
</LinearLayout> 
<!--LINHA SEPARADORA--> 
<View 
    android:id="@+id/View01" 
    android:layout_width="wrap_content" 
    android:background="#B5B5B5" 
    android:layout_height="2px"> 
</View> 
<!-- TITULO4 --> 
<LinearLayout 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:orientation="horizontal" 
    android:background="#848284" 
    android:padding="4px"> 
    <TextView 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:id="@+id/TextView01" 
     android:text="Etapas" 
     android:textColor="#FFFFFF" 
     android:gravity="left" 
     android:textStyle="bold" 
     android:singleLine="true" 
     android:ellipsize="end" 
     android:layout_gravity="center_vertical" 
     android:textSize="18px" 
     android:paddingLeft="4px"> 
    </TextView> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent" 
     android:layout_gravity="right|center_vertical" 
     android:gravity="right|center_vertical" 
     android:paddingTop="2px"> 
     <ToggleButton 

      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      android:textOff="Expandir" 
      android:textOn="Minimizar" 
      android:id="@+id/mostrar" 
      android:width="80px"> 
     </ToggleButton> 
    </LinearLayout>  
</LinearLayout> 
<!--LINHA SEPARADORA--> 
<View 
    android:id="@+id/View01" 
    android:layout_width="wrap_content" 
    android:background="#B5B5B5" 
    android:layout_height="2px"> 
</View> 
</LinearLayout> 
</ScrollView> 

Y aquí está el código de java que llama al evento de botón:

final ToggleButton bt=(ToggleButton) findViewById(R.id.mostrar); 


    bt.setOnClickListener(new OnClickListener() { 
     public void onClick(View v) { 
      if (bt.isChecked()) { 

       /*TranslateAnimation slide = new TranslateAnimation(0, 0, 0, 
          -findViewById(R.id.informgeral).getHeight()*2); 
          slide.setDuration(500); 
          slide.setFillAfter(true); 
          findViewById(R.id.informgeral).startAnimation(slide);*/ 

       findViewById(R.id.informgeral).setVisibility(View.VISIBLE);; 

      } else { 

      /* TranslateAnimation slide = new TranslateAnimation(0, 0, 0, 
          findViewById(R.id.informgeral).getHeight()); 
          slide.setDuration(500); 
          slide.setFillAfter(true); 
          findViewById(R.id.informgeral).startAnimation(slide);*/ 


          //findViewById(R.id.listBut).startAnimation(slide); 


       findViewById(R.id.informgeral).setVisibility(View.GONE);; 


      } 
     } 
}); 
+87

Holy wall of XML! O.o – kcoppock

+0

Sí, es posible que sea más pequeño: P – Maxrunner

Respuesta

14

Me gusta tomash dicho anteriormente: No hay una manera fácil.

Es posible que desee echar un vistazo a my answer here.
Explica cómo realizar una vista deslizante (cambio de dimensión).
En este caso, era una vista izquierda y derecha: se expandió a la izquierda, desapareció a la derecha.
Es tal vez no hacer exactamente lo que necesita, pero con el espíritu inventivo se puede hacer que funcione;)

1

No hay una manera fácil de animar ocultando/mostrando vistas. Puede probar el método descrito en la siguiente respuesta: How do I animate View.setVisibility(GONE)

+0

¿Esto asegura que cuando muestre algo que se HA IDO se expandirá y empujará todo lo que está por debajo? – Maxrunner

+0

http://stackoverflow.com/a/17513664/1179638 Compruebe esto –

2

Es posible que desee utilizar un ExpandableListView, un ListView especial que le permite abrir y grupos cercanos.

1

Usted puede utilizar la vista de lista ampliable explica en demostraciones del API para mostrar grupos

http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/ExpandableList1.html.

Para animar el movimiento de los elementos de la lista, deberá anular el método getView y aplicar animación de traducción en cada elemento de la lista. Los valores para la animación dependen de la posición de cada elemento de la lista. Esto fue algo que probé en una simple lista desde hace mucho tiempo.

22

El cambio de visibilidad en sí mismo se puede animar fácilmente anulando el método setVisibility. Mira código completo:

public class SimpleViewAnimator extends FrameLayout 
{ 
    private Animation inAnimation; 
    private Animation outAnimation; 

    public SimpleViewAnimator(Context context) 
    { 
     super(context); 
    } 

    public void setInAnimation(Animation inAnimation) 
    { 
     this.inAnimation = inAnimation; 
    } 

    public void setOutAnimation(Animation outAnimation) 
    { 
     this.outAnimation = outAnimation; 
    } 

    @Override 
    public void setVisibility(int visibility) 
    { 
     if (getVisibility() != visibility) 
     { 
      if (visibility == VISIBLE) 
      { 
       if (inAnimation != null) startAnimation(inAnimation); 
      } 
      else if ((visibility == INVISIBLE) || (visibility == GONE)) 
      { 
       if (outAnimation != null) startAnimation(outAnimation); 
      } 
     } 

     super.setVisibility(visibility); 
    } 
} 
+3

No olvide agregar público SimpleViewAnimator (Contexto de contexto, AttributeSet attrs) { super (context, attrs); } De lo contrario, esto no se inflará desde el diseño xml! –

254

Para animar los cambios de diseño, se puede añadir el siguiente atributo a su LinearLayout

android:animateLayoutChanges="true" 

y se animará a los cambios de forma automática.


Para obtener información, si se utiliza android:animateLayoutChanges="true", a continuación, animación personalizada a través de XML anim no funcionará.

+22

Pero solo de API 11 (Android 3.0) – Oliv

+6

Acabas de guardar el pequeño mundo =) – totten

+0

Simple pero ahorró mucho esfuerzo. Gracias. –

2

Si alguien más se strugelling con esto en el presente, aquí es una versión mucho más fácil:

Es posible establecer una propiedad de la disposición de los padres en el XML:

android:animateLayoutChanges="true" 

Esta voluntad anima las vistas cuando se agregan/eliminan.
Mantenga una referencia a la vista y vuelva a insertarla en su índice adecuado y usted es oro.

10

Esta es una pregunta bastante viejo, todavía comenta espectáculo, que todavía la gente tiene problemas, así que aquí está mi solución, con las siguientes características adicionales:

  • ajustar la animación (velocidad, tipo, ...)
  • no tiene que extender cualquier clase
  • en mi caso, animateLayoutChanges tiene problemas en el nuevo CoordinatorLayout

Función - examp Le (Tengo esta función en una clase de utilidad)

public static void animateViewVisibility(final View view, final int visibility) 
{ 
    // cancel runnning animations and remove and listeners 
    view.animate().cancel(); 
    view.animate().setListener(null); 

    // animate making view visible 
    if (visibility == View.VISIBLE) 
    { 
     view.animate().alpha(1f).start(); 
     view.setVisibility(View.VISIBLE); 
    } 
    // animate making view hidden (HIDDEN or INVISIBLE) 
    else 
    { 
     view.animate().setListener(new AnimatorListenerAdapter() 
     { 
      @Override 
      public void onAnimationEnd(Animator animation) 
      { 
       view.setVisibility(visibility); 
      } 
     }).alpha(0f).start(); 
    } 
} 

Ajuste animación

Después de llamar view.animate() puede ajustar la animación a lo que quieras (duración fija, los interpolador y más ...) También puede ocultar una vista escalando en lugar de ajustar su valor alfa, simplemente reemplace alpha(...) con scaleX(...) o scaleY(...) en el método de utilidad si desea que

Cuestiones relacionadas