web-dev-qa-db-fra.com

Android Menu des boutons d'action flottants extensibles de la bibliothèque de support de conception

Maintenant que la Android Design Support Library est disponible, est-ce que quelqu'un sait comment implémenter un menu Fab étendu, comme la fab sur l'application Inbox?

Devrait ressembler à ceci:

enter image description here

androidmaterial-designfloating-action-buttonspeed-dial
156
EkKoZ

Actuellement, aucun widget n'est fourni dans la bibliothèque de conception. La seule façon de le faire rapidement et facilement consiste à utiliser des bibliothèques tierces.

Vous pouvez évidemment le faire en utilisant la bibliothèque de conception aussi, mais ce sera un travail énorme et prendra beaucoup de temps. J'ai mentionné quelques bibliothèques utiles, qui peuvent vous aider à atteindre cet objectif.

  1. Bouton Flottant Rapide (wangjiegulu)
  2. Bouton d'action flottante (Clans)
  3. Bouton d'action flottante (makovkastar)
  4. Bouton d'action flottant Android (futuresimple)

J'utilise le 4ème.

139
Aritra Roy

Il est un peu tard pour répondre à cette question, mais j'ai une meilleure approche pour implémenter le menu FAB animé sans utiliser aucune bibliothèque ou écrire un code XML énorme pour les animations. J'espère que cela aidera à l'avenir pour quelqu'un qui a besoin d'un moyen simple de le mettre en œuvre.

Donc c'est assez simple en utilisant simplement animate (). TranslationY (), vous pouvez animer le FAB de haut en bas comme je l'ai fait dans mon code ci-dessous, vérifier le code complet dans github .

tout d’abord, définissez tous vos FAB au même endroit afin qu’ils se chevauchent. Rappelez-vous qu’il s’agit bien du FAB que vous voulez cliquer et afficher. par exemple:

    <Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab3"
    Android:layout_width="@dimen/standard_45"
    Android:layout_height="@dimen/standard_45"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/standard_21"
    app:srcCompat="@Android:drawable/ic_btn_speak_now" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab2"
    Android:layout_width="@dimen/standard_45"
    Android:layout_height="@dimen/standard_45"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/standard_21"
    app:srcCompat="@Android:drawable/ic_menu_camera" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab1"
    Android:layout_width="@dimen/standard_45"
    Android:layout_height="@dimen/standard_45"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/standard_21"
    app:srcCompat="@Android:drawable/ic_dialog_map" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@Android:drawable/ic_dialog_email" />

Dans votre classe Java, définissez simplement tous vos FAB et effectuez le clic comme indiqué ci-dessous:

 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab1 = (FloatingActionButton) findViewById(R.id.fab1);
    fab2 = (FloatingActionButton) findViewById(R.id.fab2);
    fab3 = (FloatingActionButton) findViewById(R.id.fab3);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if(!isFABOpen){
                showFABMenu();
            }else{
                closeFABMenu();
            }
        }
    });

Maintenant, utilisez l'animation (). TranslationY () pour animer votre FAB, je préfère que vous utilisiez l'attribut de cette méthode dans DP car utiliser uniquement un int affectera la compatibilité de l'affichage avec une résolution plus élevée ou plus faible. comme indiqué ci-dessous:

 private void showFABMenu(){
    isFABOpen=true;
    fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_55));
    fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_105));
    fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_155));
}

private void closeFABMenu(){
    isFABOpen=false;
    fab1.animate().translationY(0);
    fab2.animate().translationY(0);
    fab3.animate().translationY(0);
}

Définissez maintenant la dimension mentionnée ci-dessus dans res-> values-> dimens.xml comme indiqué ci-dessous:

    <dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>

C'est tout espoir que cette solution aidera les gens à l'avenir, qui recherchent une solution simple.

ÉDITÉ

Si vous voulez ajouter une étiquette sur le FAB, prenez simplement un LinearLayout horizontal et placez le FAB avec textview comme étiquette, et animez les mises en page si vous rencontrez un problème, vous pouvez consulter mon exemple de code dans github. questions dans cet exemple de code. consultez mon exemple de code pour FABMenu dans Github

pour fermer le FAB sur Backpress, remplacez onBackPress () comme indiqué ci-dessous:

    @Override
public void onBackPressed() {
    if(!isFABOpen){
        this.super.onBackPressed();
    }else{
        closeFABMenu();
    }
}

Les captures d’écran ont aussi le titre avec FAB, parce que je les prends dans mon exemple d’application ingithub

enter image description here

140
HAXM

  • Commencez par créer les présentations de menu dans le fichier XML de votre présentation d’activité. Par exemple une mise en page linéaire avec une orientation horizontale et inclure un TextView pour l'étiquette, puis un bouton d'action flottant à côté du TextView.

  • Créez les dispositions de menu selon vos besoins et votre nombre.

  • Créez un bouton d’action flottant et, en cliquant dessus, changez la visibilité des dispositions de menu.

S'il vous plaît vérifier le code ci-dessous pour la référence et pour plus d'informations checkout mon projet de github

Projet de caisse de Github

<Android.support.constraint.ConstraintLayout
            Android:id="@+id/activity_main"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            tools:context="com.app.fabmenu.MainActivity">

            <Android.support.design.widget.FloatingActionButton
                Android:id="@+id/baseFloatingActionButton"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="16dp"
                Android:layout_marginEnd="16dp"
                Android:layout_marginRight="16dp"
                Android:clickable="true"
                Android:onClick="@{FabHandler::onBaseFabClick}"
                Android:tint="@Android:color/white"
                app:fabSize="normal"
                app:layout_constraintBottom_toBottomOf="@+id/activity_main"
                app:layout_constraintRight_toRightOf="@+id/activity_main"
                app:srcCompat="@drawable/ic_add_black_24dp" />

            <LinearLayout
                Android:id="@+id/shareLayout"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="12dp"
                Android:layout_marginEnd="24dp"
                Android:layout_marginRight="24dp"
                Android:gravity="center_vertical"
                Android:orientation="horizontal"
                Android:visibility="invisible"
                app:layout_constraintBottom_toTopOf="@+id/createLayout"
                app:layout_constraintLeft_toLeftOf="@+id/createLayout"
                app:layout_constraintRight_toRightOf="@+id/activity_main">

                <TextView
                    Android:id="@+id/shareLabelTextView"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginEnd="8dp"
                    Android:layout_marginRight="8dp"
                    Android:background="@drawable/shape_fab_label"
                    Android:elevation="2dp"
                    Android:fontFamily="sans-serif"
                    Android:padding="5dip"
                    Android:text="Share"
                    Android:textColor="@Android:color/white"
                    Android:typeface="normal" />


                <Android.support.design.widget.FloatingActionButton
                    Android:id="@+id/shareFab"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:clickable="true"
                    Android:onClick="@{FabHandler::onShareFabClick}"
                    Android:tint="@Android:color/white"
                    app:fabSize="mini"
                    app:srcCompat="@drawable/ic_share_black_24dp" />

            </LinearLayout>

            <LinearLayout
                Android:id="@+id/createLayout"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="24dp"
                Android:layout_marginEnd="24dp"
                Android:layout_marginRight="24dp"
                Android:gravity="center_vertical"
                Android:orientation="horizontal"
                Android:visibility="invisible"
                app:layout_constraintBottom_toTopOf="@+id/baseFloatingActionButton"
                app:layout_constraintRight_toRightOf="@+id/activity_main">

                <TextView
                    Android:id="@+id/createLabelTextView"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginEnd="8dp"
                    Android:layout_marginRight="8dp"
                    Android:background="@drawable/shape_fab_label"
                    Android:elevation="2dp"
                    Android:fontFamily="sans-serif"
                    Android:padding="5dip"
                    Android:text="Create"
                    Android:textColor="@Android:color/white"
                    Android:typeface="normal" />

                <Android.support.design.widget.FloatingActionButton
                    Android:id="@+id/createFab"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:clickable="true"
                    Android:onClick="@{FabHandler::onCreateFabClick}"
                    Android:tint="@Android:color/white"
                    app:fabSize="mini"
                    app:srcCompat="@drawable/ic_create_black_24dp" />

            </LinearLayout>

        </Android.support.constraint.ConstraintLayout>

Ce sont les animations-

Animation d'ouverture du menu FAB:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fillAfter="true">
<scale
    Android:duration="300"
    Android:fromXScale="0"
    Android:fromYScale="0"
    Android:interpolator="@Android:anim/linear_interpolator"
    Android:pivotX="50%"
    Android:pivotY="50%"
    Android:toXScale="1"
    Android:toYScale="1" />
<alpha
    Android:duration="300"
    Android:fromAlpha="0.0"
    Android:interpolator="@Android:anim/accelerate_interpolator"
    Android:toAlpha="1.0" />

</set>

Animation de clôture du menu FAB:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fillAfter="true">
<scale
    Android:duration="300"
    Android:fromXScale="1"
    Android:fromYScale="1"
    Android:interpolator="@Android:anim/linear_interpolator"
    Android:pivotX="50%"
    Android:pivotY="50%"
    Android:toXScale="0.0"
    Android:toYScale="0.0" />
<alpha
    Android:duration="300"
    Android:fromAlpha="1.0"
    Android:interpolator="@Android:anim/accelerate_interpolator"
    Android:toAlpha="0.0" />
</set>

Ensuite, dans mon activité, j'ai simplement utilisé les animations ci-dessus pour afficher et masquer le menu FAB:

Afficher le menu fabuleux:

  private void expandFabMenu() {

    ViewCompat.animate(binding.baseFloatingActionButton).rotation(45.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start();
    binding.createLayout.startAnimation(fabOpenAnimation);
    binding.shareLayout.startAnimation(fabOpenAnimation);
    binding.createFab.setClickable(true);
    binding.shareFab.setClickable(true);
    isFabMenuOpen = true;

}

Fermer le menu fab:

private void collapseFabMenu() {

    ViewCompat.animate(binding.baseFloatingActionButton).rotation(0.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start();
    binding.createLayout.startAnimation(fabCloseAnimation);
    binding.shareLayout.startAnimation(fabCloseAnimation);
    binding.createFab.setClickable(false);
    binding.shareFab.setClickable(false);
    isFabMenuOpen = false;

}

Voici la classe d'activité -

package com.app.fabmenu;

import Android.databinding.DataBindingUtil;
import Android.os.Bundle;
import Android.support.design.widget.Snackbar;
import Android.support.v4.view.ViewCompat;
import Android.support.v7.app.AppCompatActivity;
import Android.view.View;
import Android.view.animation.Animation;
import Android.view.animation.AnimationUtils;
import Android.view.animation.OvershootInterpolator;

import com.app.fabmenu.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

private ActivityMainBinding binding;
private Animation fabOpenAnimation;
private Animation fabCloseAnimation;
private boolean isFabMenuOpen = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    binding = DataBindingUtil.setContentView(this,    R.layout.activity_main);
    binding.setFabHandler(new FabHandler());

    getAnimations();


}

private void getAnimations() {

    fabOpenAnimation = AnimationUtils.loadAnimation(this, R.anim.fab_open);

    fabCloseAnimation = AnimationUtils.loadAnimation(this, R.anim.fab_close);

}

private void expandFabMenu() {

    ViewCompat.animate(binding.baseFloatingActionButton).rotation(45.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start();
    binding.createLayout.startAnimation(fabOpenAnimation);
    binding.shareLayout.startAnimation(fabOpenAnimation);
    binding.createFab.setClickable(true);
    binding.shareFab.setClickable(true);
    isFabMenuOpen = true;


}

private void collapseFabMenu() {

    ViewCompat.animate(binding.baseFloatingActionButton).rotation(0.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start();
    binding.createLayout.startAnimation(fabCloseAnimation);
    binding.shareLayout.startAnimation(fabCloseAnimation);
    binding.createFab.setClickable(false);
    binding.shareFab.setClickable(false);
    isFabMenuOpen = false;

}


public class FabHandler {

    public void onBaseFabClick(View view) {

        if (isFabMenuOpen)
            collapseFabMenu();
        else
            expandFabMenu();


    }

    public void onCreateFabClick(View view) {

        Snackbar.make(binding.coordinatorLayout, "Create FAB tapped", Snackbar.LENGTH_SHORT).show();

    }

    public void onShareFabClick(View view) {

        Snackbar.make(binding.coordinatorLayout, "Share FAB tapped", Snackbar.LENGTH_SHORT).show();

    }


}

@Override
public void onBackPressed() {

    if (isFabMenuOpen)
        collapseFabMenu();
    else
        super.onBackPressed();
}
}

Voici les captures d'écran

Floating Action Menu with Label Textview in new Cursive Font Family of Android

Floating Action Menu with Label Textview in new Roboto Font Family of Android

29
Prashant

Une bibliothèque supplémentaire implémentant le numéro abrégé à partir des directives de conception de matériel:

https://github.com/leinardi/FloatingActionButtonSpeedDial

enter image description here

15
Roberto Leinardi

Lorsque j'ai essayé de créer quelque chose de similaire au bouton d'action flottant dans la boîte de réception, j'ai pensé créer son propre composant personnalisé.

Il s'agirait d'une disposition de cadre simple avec une hauteur fixe (pour contenir un menu développé) contenant le bouton FAB et trois autres placés sous le FAB. Lorsque vous cliquez sur FAB, vous animez simplement les autres boutons à traduire sous le FAB.

Certaines bibliothèques le font (par exemple https://github.com/futuresimple/Android-floating-action-button ), mais c'est toujours plus amusant si vous le créez vous-même :)

7
rwojcik

Vous pouvez utiliser la bibliothèque FloatingActionMenu ou cliquez ici pour le didacticiel pas à pas. Sortie du tutoriel:

enter image description here

7
Pacific P. Regmi

J'utilise cette bibliothèque pour faire ceci: https://github.com/futuresimple/Android-floating-action-button

Assez simple à utiliser;)

enter image description here

3
florent champigny