Recherche…


Introduction

Le bouton d'action flottant est utilisé par défaut pour un type spécial d'action promue, qu'il anime sur l'écran en tant que matériau en expansion. L'icône à l'intérieur peut être animée, et FAB peut également se déplacer différemment des autres éléments de l'interface utilisateur en raison de leur importance relative. Un bouton d'action flottant représente l'action principale dans une application qui peut simplement déclencher une action ou naviguer quelque part.

Paramètres

Paramètre Détail
android.support.design:elevation Valeur d'élévation pour le FAB. Peut être une référence à une autre ressource, sous la forme "@ [+] [package:] type / name" ou un attribut de thème sous la forme "? [Package:] type / name".
android.support.design:fabSize Taille pour le FAB.
android.support.design:rippleColor Couleur d'ondulation pour le FAB.
android.support.design:useCompatPadding Activer le remplissage de compat.

Remarques

Les boutons d'action flottants sont utilisés pour un type particulier d'action promue. Ils se distinguent par une icône encerclée flottant au-dessus de l'interface utilisateur et ont des comportements de mouvement particuliers liés au morphing, au lancement et au point d'ancrage de transfert.

Un seul bouton d'action flottant est recommandé par écran pour représenter l'action la plus courante.

Avant d'utiliser le FloatingActionButton vous devez ajouter la dépendance de bibliothèque du support de conception dans le fichier build.gradle :

dependencies {
    compile 'com.android.support:design:25.1.0'
}

Documentation officielle:

https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

Spécifications de conception matérielle:

https://material.google.com/components/buttons-floating-action-button.html

Comment ajouter le FAB à la mise en page

Pour utiliser un FloatingActionButton, ajoutez simplement la dépendance dans le fichier build.gradle comme décrit dans la section Remarques.

Puis ajoutez à la mise en page:

 <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"
        android:src="@drawable/my_icon" />

Un exemple:

entrer la description de l'image ici

Couleur

La couleur d'arrière-plan de cette vue correspond par défaut au colorAccent de votre thème.

Dans l'image ci-dessus, si le src ne pointe que sur l'icône + (par défaut 24x24 dp), pour obtenir la couleur d'arrière - plan du cercle complet, vous pouvez utiliser app:backgroundTint="@color/your_colour"

Si vous souhaitez changer la couleur dans le code, vous pouvez utiliser,

myFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));

Si vous voulez changer la couleur de FAB dans l'utilisation de l'état pressé

mFab.setRippleColor(your color in int);

Positionnement

Il est recommandé de placer un minimum de 16 dB à partir du bord sur le mobile et de 24 dB minimum sur la tablette / le bureau.

Remarque : une fois que vous avez défini un src sauf pour couvrir toute la zone de FloatingActionButton assurez-vous de disposer de la bonne taille pour obtenir le meilleur résultat.

La taille de cercle par défaut est de 56 x 56dp

entrer la description de l'image ici

Taille de cercle mini: 40 x 40dp

Si vous ne voulez changer que l'icône Intérieur, utilisez une icône 24 x 24dp pour la taille par défaut.

Afficher et masquer FloatingActionButton sur Swipe

Pour afficher et masquer un FloatingActionButton avec l'animation par défaut, il suffit d'appeler les méthodes show() et hide() . Il est recommandé de conserver un FloatingActionButton dans la disposition des activités au lieu de le placer dans un fragment, cela permet aux animations par défaut de fonctionner lors de l'affichage et du masquage.

Voici un exemple avec un ViewPager :

  • Trois onglets
  • Afficher FloatingActionButton pour le premier et le troisième onglet
  • Masquer le FloatingActionButton au milieu de l'onglet
public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab;
    ViewPager viewPager;

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

        fab = (FloatingActionButton) findViewById(R.id.fab);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        // ...... set up ViewPager ............

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                if (position == 0) {
                    fab.setImageResource(android.R.drawable.ic_dialog_email);
                    fab.show();
                } else if (position == 2) {
                    fab.setImageResource(android.R.drawable.ic_dialog_map);
                    fab.show();
                } else {
                    fab.hide();
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageScrollStateChanged(int state) {}
        });

        // Handle the FloatingActionButton click event:
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = viewPager.getCurrentItem();
                if (position == 0) {
                    openSend();
                } else if (position == 2) {
                    openMap();
                }
            }
        });

    }
}

Résultat:

entrer la description de l'image ici

Afficher et masquer FloatingActionButton sur le défilement

À partir de la version 22.2.1 de Support Library, il est possible d'afficher et de masquer un FloatingActionButton contre un comportement de défilement à l'aide d'une sous-classe FloatingActionButton.Behavior qui tire parti des méthodes show() et hide() .

Notez que cela ne fonctionne qu'avec un CoordinatorLayout associé à des vues internes prenant en charge le défilement imbriqué, telles que RecyclerView et NestedScrollView .

Cette classe ScrollAwareFABBehavior provient des Guides Android sur Codepath (cc-wiki avec attribution requise)

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                                       final View directTargetChild, final View target, final int nestedScrollAxes) {
        // Ensure we react to vertical scrolling
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                               final View target, final int dxConsumed, final int dyConsumed,
                               final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            // User scrolled down and the FAB is currently visible -> hide the FAB
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            // User scrolled up and the FAB is currently not visible -> show the FAB
            child.show();
        }
    }
}

Dans le app:layout_behavior XML de présentation FloatingActionButton, spécifiez l' app:layout_behavior avec le nom de classe qualifié complet de ScrollAwareFABBehavior :

app:layout_behavior="com.example.app.ScrollAwareFABBehavior"

Par exemple avec cette mise en page:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="6dp">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll|enterAlways"
            />

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            app:tabMode="fixed"
            android:layout_below="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:elevation="0dp"
            app:tabTextColor="#d3d3d3"
            android:minHeight="?attr/actionBarSize"
            />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:layout_behavior="com.example.app.ScrollAwareFABBehavior"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

Voici le résultat:

entrer la description de l'image ici

Définition du comportement de FloatingActionButton

Vous pouvez définir le comportement du FAB en XML.

Par exemple:

<android.support.design.widget.FloatingActionButton    
   app:layout_behavior=".MyBehavior" />

Ou vous pouvez définir par programmation en utilisant:

CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setBehavior(xxxx);
fab.setLayoutParams(p);


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow