web-dev-qa-db-fra.com

Exemple FloatingActionButton avec bibliothèque de support

Récemment, j'ai lu ces articles:

Bibliothèque de conception Android

bibliothèque de support Android, révision 22.2.

FloatingActionButton

Mais aucun d’entre eux ne m’a donné un exemple détaillé sur la création d’une nouvelle FloatingActionButton. Si difficile à comprendre, je pose cette question.

Quelqu'un peut-il me donner un exemple à ce sujet?

Toute aide beaucoup soit appréciée. Merci d'avance.

EDIT

Je viens de trouver quelques problèmes sur FloatingActionButton (FAB) et je souhaite améliorer une autre réponse. Voir ma réponse ci-dessous.

androidandroid-support-libraryfloating-action-buttonandroid-design-library
125
Anggrayudi H

Donc, dans votre fichier build.gradle, ajoutez ceci:

compile 'com.Android.support:design:27.1.1'

AndroidX Remarque: Google introduit de nouvelles bibliothèques d'extension AndroidX pour remplacer les anciennes bibliothèques de support. Pour utiliser AndroidX, assurez-vous d’abord que vous avez mis à jour votre fichier gradle.properties , modifié build.gradle pour définir compileSdkVersion sur 28 (ou une version ultérieure), et utilisez la ligne suivante au lieu de la précédente compile.

implementation 'com.google.Android.material:material:1.0.0'

Ensuite, dans votre themes.xml ou styles.xml ou quoi que ce soit, assurez-vous de définir ceci: c'est la couleur d'accent de votre application, et la couleur de votre FAB, à moins que vous ne le remplaciez (voir ci-dessous):

        <item name="colorAccent">@color/floating_action_button_color</item>

Dans le XML de la mise en page:

<RelativeLayout
 ...
 xmlns:app="http://schemas.Android.com/apk/res-auto">

       <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/myFAB"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:src="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

Ou si vous utilisez la bibliothèque de matériaux AndroidX ci-dessus, utilisez plutôt ceci:

<RelativeLayout
 ...
 xmlns:app="http://schemas.Android.com/apk/res-auto">

       <com.google.Android.material.floatingactionbutton.FloatingActionButton
            Android:id="@+id/myFAB"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:srcCompat="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

Vous pouvez voir plus d'options dans docs(documents matériels ici) (setRippleColor, etc.), mais l'une des remarques est:

    app:fabSize="mini"

Un autre intéressant - pour changer la couleur de fond d'un seul FAB, ajoutez:

    app:backgroundTint="#FF0000"

(par exemple pour le changer en rouge) au XML ci-dessus.

Quoi qu'il en soit, dans le code, une fois que la vue de l'activité/du fragment est gonflée ...

    FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
    myFab.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            doMyThing();
        }
    });

Observations:

  • Si l'un de ces boutons se trouve sur une "couture" divisant deux vues (en utilisant un RelativeLayout, par exemple) avec, par exemple, une marge de présentation inférieure négative recouvrant la bordure, vous remarquerez un problème: la taille du FAB est en réalité très différent sur Lollipop vs pré-Lollipop. Vous pouvez réellement voir cela dans l'éditeur de disposition visuelle d'AS lorsque vous passez d'une API à une autre - cela se brise soudainement lorsque vous passez à la pré-Lollipop. La raison de la taille supplémentaire semble être que l'ombre augmente la taille de la vue dans toutes les directions. Vous devez donc en tenir compte lorsque vous ajustez les marges des FAB si elles sont proches d'autres éléments.

  • Voici un moyen de supprimer ou de modifier le remplissage s'il y en a trop:

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Lollipop) {
    RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
    p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
    myFab.setLayoutParams(p);
}

  • En outre, j'allais placer par programme la FAB sur la "couture" entre deux zones d'un RelativeLayout en saisissant la hauteur de la FAB, en la divisant par deux, et en utilisant cela comme décalage de marge. Mais myFab.getHeight () retournait zéro, même après que la vue ait été gonflée, semblait-il. Au lieu de cela, j'ai utilisé un ViewTreeObserver pour obtenir la hauteur uniquement après l'avoir définie, puis définir la position. Voir cette astuce ici . Cela ressemblait à ceci:

        ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
    if (viewTreeObserver.isAlive()) {
        viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                    closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
                // not sure the above is equivalent, but that's beside the point for this example...
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
                params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
                closeButton.setLayoutParams(params);
            }
        });
    }

    Pas sûr que ce soit la bonne façon de le faire, mais cela semble fonctionner.

  • Il semble que vous puissiez réduire l'espace ombré du bouton en diminuant l'altitude.

  • Si vous voulez que le FAB soit sur une "couture", vous pouvez utiliser layout_anchor et layout_anchorGravity, voici un exemple:

    <Android.support.design.widget.FloatingActionButton
    Android:layout_height="wrap_content"
    Android:layout_width="wrap_content"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    Android:src="@drawable/ic_discuss"
    Android:layout_margin="@dimen/fab_margin"
    Android:clickable="true"/>

Rappelez-vous que vous pouvez automatiquement faire sauter le bouton quand un Snackbar apparaît en l'enveloppant dans un CoordinatorLayout .

Plus:

267
fattire

Je viens de trouver quelques problèmes sur FAB et je souhaite améliorer une autre réponse.

problème setRippleColor

Ainsi, le problème viendra une fois que vous aurez défini la couleur d'ondulation (couleur FAB activée) par programme via setRippleColor. Mais nous avons toujours une autre façon de le définir, c’est-à-dire en appelant:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color);
fab.setBackgroundTintList(rippleColor);

Votre projet doit avoir cette structure:

/res/color/fab_ripple_color.xml

enter image description here

Et le code de fab_ripple_color.xml est:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:color="@color/fab_color_pressed" />
    <item Android:state_focused="true" Android:color="@color/fab_color_pressed" />
    <item Android:color="@color/fab_color_normal"/>
</selector>

Enfin, modifiez légèrement votre FAB:

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/ic_action_add"
    Android:layout_alignParentBottom="true"
    Android:layout_alignParentRight="true"
    app:fabSize="normal"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:rippleColor="@Android:color/transparent"/> <!-- set to transparent color -->

Pour les API de niveau 21 et supérieur, définissez la marge droite et inférieure à 24dp:

...
Android:layout_marginRight="24dp"
Android:layout_marginBottom="24dp" />

Guides de conception FloatingActionButton

Comme vous pouvez le voir sur mon code XML FAB ci-dessus, j'ai défini:

        ...
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        ...

  • En définissant ces attributs, vous n'avez pas besoin de redéfinir layout_marginTop et layout_marginRight (uniquement sur les versions antérieures à Lollipop). Android le placera automatiquement sur le côté droit de l'écran, ce qui est identique à FAB normal dans Android Lollipop.

        Android:layout_alignParentBottom="true"
    Android:layout_alignParentRight="true"

Ou, vous pouvez utiliser ceci dans CoordinatorLayout:

        Android:layout_gravity="end|bottom"
  • Vous devez disposer de 6dp elevation et de 12dp pressedTranslationZ, selon ce guide de Google.

FAB rules

48
Anggrayudi H

FloatingActionButton étend ImageView. Donc, c'est simple, comme si vous introduisiez un ImageView dans votre mise en page. Voici un exemple XML.

<Android.support.design.widget.FloatingActionButton   xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/somedrawable"
    Android:layout_gravity="right|bottom"
    app:borderWidth="0dp"
    app:rippleColor="#ffffff"/>

app:borderWidth="0dp" est ajouté comme solution de contournement pour les problèmes d'élévation.

12
siriscac

pour AndroidX utiliser comme

<com.google.Android.material.floatingactionbutton.FloatingActionButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" />
3
Dan Alboteanu