web-dev-qa-db-fra.com

Comment animer FloatingActionButton de la nouvelle bibliothèque de support de conception

J'utilise un TabLayout avec 5 fragments différents. Sur 3 de ces fragments, un Android.support.design.widget.FloatingActionButton devraient apparaître. En ce moment, je règle simplement la visibilité du FAB lorsque l'onglet change, mais je voudrais avoir une animation, où le FAB entre et sort. Comment puis-je y parvenir sous Android?

androidandroid-animationfloating-action-buttonandroid-design-library
13
Michael

Parce que je ne voulais pas étendre le FloatingActionButton, je l'ai fait de cette façon:

FloatingActionButton createButton;

// ...

Animation makeInAnimation = AnimationUtils.makeInAnimation(getBaseContext(), false);
makeInAnimation.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationEnd(Animation animation) { }

    @Override
    public void onAnimationRepeat(Animation animation) { }

    @Override
    public void onAnimationStart(Animation animation) {
        createButton.setVisibility(View.VISIBLE);
    }
});

Animation makeOutAnimation = AnimationUtils.makeOutAnimation(getBaseContext(), true);
makeOutAnimation.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationEnd(Animation animation) {
        createButton.setVisibility(View.INVISIBLE);
    }

    @Override
    public void onAnimationRepeat(Animation animation) { }

    @Override
    public void onAnimationStart(Animation animation) { }
});

// ...

if (createButton.isShown()) {
    createButton.startAnimation(makeOutAnimation);
}

// ...

if (!createButton.isShown()) {
    createButton.startAnimation(makeInAnimation);
}
1
Michael

L'animation masquer/afficher pour la réduction/pop est automatiquement gérée par la nouvelle version de la bibliothèque de support. (22.2.1) Ensuite, l'écouteur OnTabChange affiche ou masque le bouton d'action flottant à l'aide des méthodes show/hide fournies par la nouvelle bibliothèque.

fab.show (); ou fab.hide ();

28
Luci

La révision de la bibliothèque de support de conception 22.2.1 (juillet 2015) a ajouté les méthodes hide() et show() à la classe FloatingActionButton, vous pouvez donc les utiliser à partir de maintenant.

http://developer.Android.com/tools/support-library/index.html

13
Huby

enter image description here

Tu veux quelque chose comme ça? Mais au lieu de l'animer sur onScrollListener, vous pouvez l'animer sur la méthode onCreateView ou onCreate. Suivez ceci -> Implémenter le bouton d'action flottante - Partie 2

Fondamentalement, le code se résume à cela

Animer pour cacher

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
                floatingActionButton.animate().translationY(floatingActionButton.getHeight() + 16).setInterpolator(new AccelerateInterpolator(2)).start();

et

Retour au spectacle

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
                floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();

mais nous ne voulons pas qu'il s'anime juste pour le cacher, donc, 'Animer pour cacher' sera juste quelque chose comme ça

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
                floatingActionButton.setTranslationY(floatingActionButton.getHeight() + 16);

Sur 'Animate to Hide', placez-le sur la méthode onCreateView ou onCreate afin que votre FAB soit masqué lorsque vous créez ce fragment et que vous puissiez ensuite ajouter un gestionnaire et une exécutable qui déclencheront 'Animate retour à Show 'après une seconde ou deux pour montrer votre animation

ou vous pouvez utiliser un temps pour de courtes animations

int mShortAnimationDuration = getResources().getInteger(
            Android.R.integer.config_shortAnimTime);

J'ai essayé celui-ci sur onScroll mais je n'ai pas essayé sur onCreateView ou onCreate mais je suppose que cela devrait fonctionner

- [~ # ~] modifier [~ # ~] -

Essayez ce code;)

public class DummyFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        int mShortAnimationDuration = getResources().getInteger(
                Android.R.integer.config_shortAnimTime);

        FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
        floatingActionButton.setTranslationY(floatingActionButton.getHeight() + 16);

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
                floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();

            }, mShortAnimationDuration);
        }
    }
}
10
Emmanuel Francis Narvasa Ramos

Le moyen le plus simple consiste à étendre la classe FloatingActionButton et à remplacer setVisibility . Comme ça:

public void setVisibility(final int visibility) {
    if (getVisibility() != View.VISIBLE && visibility == View.VISIBLE && inAnim != null) {
        animator = // create your animator here
        super.setVisibility(visibility);
    } else if (getVisibility() == View.VISIBLE && visibility != View.VISIBLE) {
        AnimatorListenerAdapter listener = new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animator) {
                Button.super.setVisibility(visibility);
            }
        });
        animator = // create your animator here
        animator.addListener(listener);
    }
}

Le code ci-dessus est tiré de la classe Button de ma bibliothèque . Vous pouvez trouver des exemples d'implémentations dans les sources.

1
Zielony