web-dev-qa-db-fra.com

Animer les modes de visibilité, GONE et VISIBLE

Donc, je suis en train d'essayer d'animer quand je règle la visibilité d'un calque linéaire avec d'autres widgets, de GONE à VISIBLE et inversement. Voici une image pour montrer ce que je veux faire:

enter image description here

Je peux montrer et cacher, mais je ne suis pas comment puis-je animer correctement le glissement .... :(

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

Et voici le code Java qui appelle l'événement button:

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


            }
        }
});
androidanimationvisibilityslide
113
Maxrunner

Comme tomash a déjà dit: Il n'y a pas de moyen facile.

Vous voudrez peut-être jeter un coup d'œil à ma réponse ici .
Il explique comment réaliser une vue glissante (changement de dimension).
Dans ce cas, il s’agissait d’une vue gauche et droite: expansion gauche, disparition droite.
Ce n’est peut-être pas exactement ce dont vous avez besoin, mais vous pouvez le faire fonctionner avec un esprit inventif;

14
Knickedi

Pour animer les modifications de mise en page, vous pouvez ajouter l'attribut suivant à votre LinearLayout

Android:animateLayoutChanges="true"

et il animera automatiquement les modifications pour vous.

Pour information, si Android:animateLayoutChanges="true" est utilisé, une animation personnalisée via anim xml ne fonctionnera pas.

273
Christian Göllner

La visibilité elle-même peut être facilement animée en surchargeant la méthode setVisibility. Regardez le code complet:

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);
    }
}
22
Ruslan Yanchyshyn

C'est une question assez ancienne, montrent encore les commentaires, que les gens ont toujours des problèmes, voici donc ma solution avec les fonctionnalités supplémentaires suivantes:

  • ajuster l'animation (vitesse, type, ...)
  • n'a pas besoin d'étendre une classe
  • dans mon cas, animateLayoutChanges a des problèmes dans la nouvelle CoordinatorLayout

Fonction - Exemple (j'ai cette fonction dans une classe d'utilitaires) 

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

Ajuster l'animation

Après avoir appelé view.animate(), vous pouvez ajuster l’animation à votre guise (définir la durée, définir l’interpolateur, etc.). Vous pouvez également masquer une vue en la redimensionnant au lieu d’ajuster sa valeur alpha; il vous suffit de remplacer le alpha(...) par scaleX(...) ou scaleY(...) dans la méthode de l’utilitaire si vous voulez que

11
prom85

Si quelqu'un d'autre se débat avec cette situation dans le présent, voici une version beaucoup plus simple: 

Il est possible de définir une propriété de la mise en page parent dans le fichier XML: 

Android:animateLayoutChanges="true"

Cela animera les vues lorsqu'elles seront ajoutées/supprimées.
Gardez une référence à la vue et réinsérez-la à son index approprié, et vous êtes dorée.

2
Max Izrin

Vous souhaitez probablement utiliser un ExpandableListView, un ListView spécial qui vous permet d'ouvrir et de fermer des groupes.

2
yingted

Vous pouvez utiliser la vue de liste extensible expliquée dans les démonstrations de l'API pour afficher les groupes.

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

Pour animer le mouvement des éléments de la liste, vous devez redéfinir la méthode getView et appliquer une animation de traduction à chaque élément de la liste . Les valeurs de l'animation dépendent de la position de chaque élément de la liste . une simple liste voir longtemps.

1
Ajit Pratap Singh

Il n’existe pas de moyen facile d’animer des vues masquées/masquées. Vous pouvez essayer la méthode décrite dans la réponse suivante: Comment animer View.setVisibility (GONE)

1
tomash

Il existe un moyen très simple, mais il ne suffit pas de régler Android:animateLayoutChanges="true". Vous devez activer TransitionType dans votre activité. Vérifiez ce lien pour plus d’informations: http://www.thecodecity.com/2018/03/Android-animation-on-view-visibility.html

0
Vishal