web-dev-qa-db-fra.com

Android ajout d'animations simples tout en étant visible (view.Gone)

J'ai conçu une mise en page simple. J'ai terminé la conception sans animation, mais je souhaite maintenant ajouter des animations lors d'un événement d'affichage de vue en mode texte et je ne sais pas comment l'utiliser. Est-ce que mon design xml a l'air bien ou pas? Toute suggestion serait appréciée.

Mon XML

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"
    Android:longClickable="false"
    Android:orientation="vertical"
    Android:weightSum="16" >

<LinearLayout 
    Android:layout_width="fill_parent"
    Android:layout_height="0dp"
    Android:orientation="vertical"
    Android:background="#00DDA0"
    Android:layout_weight="3" >
</LinearLayout>
 <TextView
        Android:id="@+id/Information1"
        Android:layout_width="match_parent"
        Android:layout_height="1dp" 
        Android:text="Child Information" 
        Android:background="#0390BE"
        Android:layout_weight="0.75"
        Android:textColor="#FFFFFF"
        Android:layout_gravity="center|fill_horizontal"/>

 <LinearLayout
     Android:id="@+id/layout1"
     Android:layout_width="fill_parent"
     Android:layout_height="0dp"
     Android:layout_weight="8.5"
     Android:background="#BBBBBB"
     Android:orientation="vertical" >

     <TextView
         Android:id="@+id/textView1"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"        
         Android:text="TextView" />
 </LinearLayout>

  <TextView
        Android:id="@+id/Information2"
        Android:layout_width="match_parent"
        Android:layout_height="0dp" 
        Android:text="Parent Information" 
        Android:background="#0390BE"
        Android:layout_weight="0.75"
        Android:textColor="#FFFFFF"
        Android:layout_gravity="center|fill_horizontal"/>
  <LinearLayout 
          Android:id="@+id/layout2"
    Android:layout_width="fill_parent"
    Android:layout_height="0dp"
    Android:orientation="vertical"
    Android:background="#BBBBBB"
    Android:layout_weight="8.5" >
     <TextView
         Android:id="@+id/textView2"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"        
         Android:text="TextView" />
      </LinearLayout>
   <TextView
        Android:id="@+id/Information3"
        Android:layout_width="match_parent"
        Android:layout_height="0dp" 
        Android:text="Siblings" 
        Android:background="#0390BE"
        Android:layout_weight="0.75"
        Android:textColor="#FFFFFF"
        Android:layout_gravity="center|fill_horizontal"/>
   <LinearLayout 
          Android:id="@+id/layout3"
    Android:layout_width="fill_parent"
    Android:layout_height="0dp"
    Android:orientation="vertical"
    Android:background="#BBBBBB"
    Android:layout_weight="8.5" >
     <TextView
         Android:id="@+id/textView3"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"        
         Android:text="TextView" />
      </LinearLayout>
    <TextView
        Android:id="@+id/Information4"
        Android:layout_width="match_parent"
        Android:layout_height="0dp" 
        Android:text="Teacher Information" 
        Android:background="#0390BE"
        Android:layout_weight="0.75"
        Android:textColor="#FFFFFF"
        Android:layout_gravity="center|fill_horizontal"/>
    <LinearLayout 
          Android:id="@+id/layout4"
    Android:layout_width="fill_parent"
    Android:layout_height="0dp"
    Android:orientation="vertical"
    Android:background="#BBBBBB"
    Android:layout_weight="8.5" >
     <TextView
         Android:id="@+id/textView4"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"        
         Android:text="TextView" />
      </LinearLayout>
     <TextView
        Android:id="@+id/Information5"
        Android:layout_width="match_parent"
        Android:layout_height="0dp" 
        Android:text="Grade Information" 
        Android:background="#0390BE"
        Android:layout_weight="0.75"
        Android:textColor="#FFFFFF"
        Android:layout_gravity="center|fill_horizontal"/>
     <LinearLayout 
          Android:id="@+id/layout5"
    Android:layout_width="fill_parent"
    Android:layout_height="0dp"
    Android:orientation="vertical"
    Android:background="#BBBBBB"
    Android:layout_weight="8.5" >
     <TextView
         Android:id="@+id/textView5"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"        
         Android:text="TextView" />
      </LinearLayout>
      <TextView
        Android:id="@+id/Information6"
        Android:layout_width="match_parent"
        Android:layout_height="0dp" 
        Android:text="Health Information" 
        Android:background="#0390BE"
        Android:layout_weight="0.75"
        Android:textColor="#FFFFFF"
        Android:layout_gravity="center|fill_horizontal"/>
      <LinearLayout 
          Android:id="@+id/layout6"
    Android:layout_width="fill_parent"
    Android:layout_height="0dp"
    Android:orientation="vertical"
    Android:background="#BBBBBB"
    Android:layout_weight="8.5" >
    <TextView
         Android:id="@+id/textView5"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"        
         Android:text="TextView" 
         Android:layout_weight="8.5" />
      </LinearLayout>

</LinearLayout>

Mon Java

public class Certify_Info extends Activity {

    private static TextView tv2,tv3,tv5,tv6,tv4,tv1;
    private static LinearLayout l1,l2,l3,l4,l5,l6;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_certify__info);

        tv1=(TextView) findViewById(R.id.Information1);
        tv2=(TextView) findViewById(R.id.Information2);
        tv3=(TextView) findViewById(R.id.Information3);
        tv4=(TextView) findViewById(R.id.Information4);
        tv5=(TextView) findViewById(R.id.Information5);
        tv6=(TextView) findViewById(R.id.Information6); 

        l1=(LinearLayout) findViewById(R.id.layout1);
        l2=(LinearLayout) findViewById(R.id.layout2);
        l3=(LinearLayout) findViewById(R.id.layout3);
        l4=(LinearLayout) findViewById(R.id.layout4);
        l5=(LinearLayout) findViewById(R.id.layout5);
        l6=(LinearLayout) findViewById(R.id.layout6); 

        l2.setVisibility(View.GONE);
        l3.setVisibility(View.GONE); 
        l4.setVisibility(View.GONE); 
        l5.setVisibility(View.GONE);
        l6.setVisibility(View.GONE);

        tv1.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l2.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.GONE);
                l1.setVisibility(View.VISIBLE);
            }
        });
        tv2.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.GONE);
                l2.setVisibility(View.VISIBLE);
            }
        });
        tv3.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l2.setVisibility(View.GONE);
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.GONE);
                l3.setVisibility(View.VISIBLE);

            }
        });
        tv4.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l2.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.GONE);
                l4.setVisibility(View.VISIBLE); 
            }
        });
        tv5.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l2.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l6.setVisibility(View.GONE);
                l5.setVisibility(View.VISIBLE); 
            }
        });
        tv6.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l2.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.VISIBLE);
            }
        });

    }
}
javaandroidandroid-animation
195
arun

Vous pouvez faire deux choses pour ajouter des animations. D'abord, vous pouvez laisser Android animer les modifications de présentation à votre place. Ainsi, chaque fois que vous modifiez quelque chose dans la présentation, comme changer de visibilité ou de position de vue, Android créera automatiquement des animations de fondu/transition. Pour utiliser cet ensemble

Android:animateLayoutChanges="true"

sur le nœud racine de votre mise en page.

Votre deuxième option serait d'ajouter manuellement des animations. Pour cela, je vous suggère d'utiliser la nouvelle API d'animation introduite dans Android 3.0 (Honeycomb). Je peux vous donner quelques exemples:

Ceci efface un View:

view.animate().alpha(0.0f);

Cela revient dans:

view.animate().alpha(1.0f);

Ceci déplace une View de sa hauteur:

view.animate().translationY(view.getHeight());

Ceci ramène la View à sa position de départ après avoir été déplacée ailleurs:

view.animate().translationY(0);

Vous pouvez également utiliser setDuration() pour définir la durée de l'animation. Par exemple, ceci efface une View sur une période de 2 secondes:

view.animate().alpha(0.0f).setDuration(2000);

Et vous pouvez combiner autant d’animations que vous le souhaitez, par exemple, cela efface un View et le réduit simultanément pendant une période de 0,3 seconde:

view.animate()
        .translationY(view.getHeight())
        .alpha(0.0f)
        .setDuration(300);

Et vous pouvez également affecter un auditeur à l'animation et réagir à toutes sortes d'événements. Comme lorsque l'animation commence, quand elle se termine ou se répète, etc. En utilisant la classe abstraite AnimatorListenerAdapter, vous n'avez pas à implémenter tous les rappels de AnimatorListener à la fois, mais uniquement ceux dont vous avez besoin. Cela rend le code plus lisible. Par exemple, le code suivant disparaît progressivement d'un View le déplace vers le bas de sa hauteur sur une période de 0,3 seconde (300 millisecondes). Lorsque l'animation est terminée, sa visibilité est définie sur View.GONE.

view.animate()
        .translationY(view.getHeight())
        .alpha(0.0f)
        .setDuration(300)
        .setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                view.setVisibility(View.GONE);
            }
        });
616
Xaver Kapeller

S'il vous plaît vérifier this link. Ce qui permettra des animations comme les animations L2R, R2L, T2B, B2T.

Ce code montre l'animation de gauche à droite

TranslateAnimation animate = new TranslateAnimation(0,view.getWidth(),0,0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
view.setVisibility(View.GONE);

si vous voulez le faire à partir de R2L, utilisez

TranslateAnimation animate = new TranslateAnimation(0,-view.getWidth(),0,0);

pour de haut en bas comme

TranslateAnimation animate = new TranslateAnimation(0,0,0,view.getHeight());

et vice versa ..

23
NullPointerException

Le moyen le plus simple d’animer les changements Visibility consiste à utiliser Transition API, disponible dans le package de support (androidx). Appelez simplement la méthode TransitionManager.beginDelayedTransition puis changez la visibilité de la vue. Il y a plusieurs transitions par défaut comme Fade, Slide.

import androidx.transition.TransitionManager;
import androidx.transition.Transition;
import androidx.transition.Fade;

private void toggle() {
    Transition transition = new Fade();
    transition.setDuration(600);
    transition.addTarget(R.id.image);

    TransitionManager.beginDelayedTransition(parent, transition);
    image.setVisibility(show ? View.VISIBLE : View.GONE);
}

Où parent est le parent ViewGroup de la vue animée. Résultat:

enter image description here

Voici le résultat avec Slide transition:

import androidx.transition.Slide;

Transition transition = new Slide(Gravity.BOTTOM);

enter image description here

Il est facile d'écrire une transition personnalisée si vous avez besoin de quelque chose de différent. Voici un exemple avec CircularRevealTransition que j’ai écrit dans autre réponse . Il montre et cache la vue avec l'animation CircularReveal.

Transition transition = new CircularRevealTransition();

enter image description here

L'option Android:animateLayoutChanges="true" fait la même chose, elle utilise simplement AutoTransition comme transition.

18
ashakirov

Basé sur la réponse de @Xaver Kapeller, j'ai trouvé un moyen de créer une animation de défilement lorsque de nouvelles vues apparaissent à l'écran (ainsi qu'une animation pour les masquer).

Cela passe de cet état:

  • Bouton
  • Dernier bouton

à

  • Bouton
  • Bouton 1
  • Bouton 2
  • Bouton 3
  • Bouton 4
  • Dernier bouton

et vice versa.

Ainsi, lorsque l'utilisateur clique sur le premier bouton, les éléments "Bouton 1", "Bouton 2", "Bouton 3" et "Bouton 4" apparaissent à l'aide de l'animation en fondu et l'élément "Dernier bouton" se déplace vers le bas jusqu'à la fin. La hauteur de la disposition changera également, ce qui permettra d’utiliser correctement la vue par défilement.

C'est le code pour montrer les éléments avec animation:

private void showElements() {
    // Precondition
    if (areElementsVisible()) {
        Log.w(TAG, "The view is already visible. Nothing to do here");
        return;
    }

    // Animate the hidden linear layout as visible and set
    // the alpha as 0.0. Otherwise the animation won't be shown
    mHiddenLinearLayout.setVisibility(View.VISIBLE);
    mHiddenLinearLayout.setAlpha(0.0f);
    mHiddenLinearLayout
            .animate()
            .setDuration(ANIMATION_TRANSITION_TIME)
            .alpha(1.0f)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    updateShowElementsButton();
                    mHiddenLinearLayout.animate().setListener(null);
                }
            })
    ;

    mLastButton
            .animate()
            .setDuration(ANIMATION_TRANSITION_TIME)
            .translationY(mHiddenLinearLayoutHeight);

    // Update the high of all the elements relativeLayout
    LayoutParams layoutParams = mAllElementsRelativeLayout.getLayoutParams();

    // TODO: Add vertical margins
    layoutParams.height = mLastButton.getHeight() + mHiddenLinearLayoutHeight;
}

et voici le code pour cacher les éléments de l'animation:

private void hideElements() {
    // Precondition
    if (!areElementsVisible()) {
        Log.w(TAG, "The view is already non-visible. Nothing to do here");
        return;
    }

    // Animate the hidden linear layout as visible and set
    mHiddenLinearLayout
            .animate()
            .setDuration(ANIMATION_TRANSITION_TIME)
            .alpha(0.0f)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    Log.v(TAG, "Animation ended. Set the view as gone");
                    super.onAnimationEnd(animation);
                    mHiddenLinearLayout.setVisibility(View.GONE);
                    // Hack: Remove the listener. So it won't be executed when
                    // any other animation on this view is executed
                    mHiddenLinearLayout.animate().setListener(null);
                    updateShowElementsButton();
                }
            })
    ;

    mLastButton
            .animate()
            .setDuration(ANIMATION_TRANSITION_TIME)
            .translationY(0);

    // Update the high of all the elements relativeLayout
    LayoutParams layoutParams = mAllElementsRelativeLayout.getLayoutParams();

    // TODO: Add vertical margins
    layoutParams.height = mLastButton.getHeight();
}

Notez qu'il existe un hack simple sur la méthode pour masquer l'animation. Sur l'écouteur d'animation mHiddenLinearLayout, j'ai dû supprimer l'auditeur lui-même en utilisant:

mHiddenLinearLayout.animate().setListener(null);

En effet, une fois qu'un écouteur d'animation est attaché à une vue, lors de la prochaine exécution d'une animation dans cette vue, l'écouteur sera également exécuté. Cela pourrait être un bug dans l'écouteur d'animation.

Le code source du projet est sur GitHub: https://github.com/jiahaoliuliu/ViewsAnimated

Bonne codage!

Mise à jour : Pour tout écouteur attaché aux vues, il devrait être supprimé à la fin de l'animation. Ceci est fait en utilisant

view.animate().setListener(null);
11
jiahao

Essayez d’ajouter cette ligne à la disposition parent XML.

 Android:animateLayoutChanges="true"
8
Ricardo Romo

J'ai pu afficher/masquer un menu de cette façon:

MenuView.Java (étend FrameLayout)

private final int ANIMATION_DURATION = 500;

public void showMenu()
{
    setVisibility(View.VISIBLE);
    animate()
            .alpha(1f)
            .setDuration(ANIMATION_DURATION)
            .setListener(null);
}

private void hideMenu()
{
    animate()
            .alpha(0f)
            .setDuration(ANIMATION_DURATION)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    setVisibility(View.GONE);
                }
            });
}

Source

6
Nelson Almendra