2010-10-28 5 views
105

Also ich versuche zu animieren, wenn ich die Sichtbarkeit eines linearen Layouts mit anderen Widgets von GONE zu VISIBLE und dem Gegenteil stelle.Im mit togglebuttuttons zum ein- und ausblenden. Hier ist ein Bild zu zeigen, was ich tun möchte:Animierte Sichtbarkeitsmodi, GONE und VISIBLE

enter image description here

kann ich zeigen und verstecken, aber ich bin nicht nach, wie kann ich das animieren Schiebe richtig .... :(

Heres mein 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> 

Und hier ist der Java-Code, der die Schaltfläche Ereignis ruft:

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

Heilige Wand von XML! O.o – kcoppock

+0

Ja, es ist wahrscheinlich möglich, es kleiner zu machen: P – Maxrunner

Antwort

14

Wie tomash sagte vorher: Es gibt keinen einfachen Weg.

Sie möchten vielleicht einen Blick auf my answer here werfen.
Es wird erläutert, wie eine gleitende (Dimension ändernde) Ansicht realisiert werden kann.
In diesem Fall war es eine linke und rechte Ansicht: Links expandierend, rechts verschwindend.
Es ist nicht gerade tun könnte, was Sie brauchen, aber mit Erfindungsgeist man kann es funktioniert;)

1

Es gibt keine einfache Möglichkeit, Verstecke/Ansichten zu animieren. Sie können versuchen, Methode beschrieben in der folgenden Antwort: How do I animate View.setVisibility(GONE)

+0

Stellt dies sicher, dass, wenn Sie etwas zeigen, was GONE ist, es sich ausdehnt und alles nach unten drückt? – Maxrunner

+0

http://Stackoverflow.com/a/17513664/1179638 Überprüfen Sie diese –

2

Wahrscheinlich haben Sie Ihren ExpandableListView, eine spezielle Listview verwenden möchten, die Sie Gruppen öffnen und zu schließen lässt.

1

Sie können die erweiterbare Liste Ansicht in API Demos verwenden erklärt zu zeigen Gruppen

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

Um die Bewegung der Listenelemente zu animieren, müssen Sie die Methode getView überschreiben und auf jedes Listenelement eine Übersetzungs-Animation anwenden. Die Werte für die Animation hängen von der Position jedes Listenelements ab. Das war etwas, was ich in einer einfachen Listenansicht lange Zeit versucht habe.

22

Die Sichtbarkeitsänderung selbst kann einfach durch Überschreiben der setVisibility-Methode animiert werden. Schauen Sie sich vollständigen Code:

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

Vergessen Sie nicht hinzuzufügen öffentlichen SimpleViewAnimator (Kontext Kontext, AttributSet attrs) { Super (Kontext, attrs); } Andernfalls wird nicht aus dem Layout xml aufgeblasen! –

254

Layout-Änderungen zu animieren, können Sie das folgende Attribut zu Ihrem Linearlayout hinzufügen

android:animateLayoutChanges="true" 

und es wird Änderungen animieren automatisch für Sie.


Informationen, wenn android:animateLayoutChanges="true" verwendet wird, dann benutzerdefinierte Animation über Anim xml wird nicht funktionieren.

+22

Aber nur von API 11 (Android 3.0) – Oliv

+6

Sie haben gerade die kleine Welt gespeichert =) – totten

+0

Einfach, aber eine Menge Mühe gespart. Vielen Dank. –

2

Wenn jemand anderes mit diesem in der Gegenwart strugelling, hier eine viel einfachere Version ist:

android:animateLayoutChanges="true" 

Dies wird:

eine Eigenschaft des übergeordneten Layout in der XML einstellen Es ist möglich, animieren Ansichten, wenn sie hinzugefügt/entfernt werden.
Behalten Sie einen Verweis auf die Ansicht und fügen Sie sie wieder in den richtigen Index ein und Sie sind Gold.

10

Dies ist eine recht alte Frage, noch zeigen, kommentiert, dass immer noch Menschen Probleme haben, so ist hier meine Lösung mit folgenden zusätzlichen Funktionen:

  • stellen Sie die Animation (Geschwindigkeit, Typ, ...)
  • benötigt keine Klasse
  • in meinem Fall zu verlängern, hat animateLayoutChanges Probleme in der neuen CoordinatorLayout

Funktion - EXAMP le (Ich habe diese Funktion in einer Utility-Klasse)

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(); 
    } 
} 

Animation einstellen

Nach view.animate() rufen Sie die Animation zu, was Sie wollen einstellen (eingestellte Dauer, eingestellt Interpolator und mehr ...). Sie können eine Ansicht auch ausblenden, indem Sie sie skalieren, anstatt ihren Alpha-Wert anzupassen, ersetzen Sie einfach die alpha(...) durch scaleX(...) oder scaleY(...) in der Hilfsmethode, wenn Sie das wünschen