Buscar..


Introducción

El botón de acción flotante se usa para un tipo especial de acción promovida, se anima en la pantalla como una pieza de material en expansión, de forma predeterminada. El icono dentro de él puede estar animado, y también FAB puede moverse de manera diferente a otros elementos de la interfaz de usuario debido a su importancia relativa. Un botón de acción flotante representa la acción principal en una aplicación que simplemente puede desencadenar una acción o navegar a algún lugar.

Parámetros

Parámetro Detalle
android.support.design:elevation Valor de elevación para el FAB. Puede ser una referencia a otro recurso, en la forma "@ [+] [paquete:] tipo / nombre" o un atributo de tema en la forma "? [Paquete:] tipo / nombre".
android.support.design:fabSize Tamaño para la FAB.
android.support.design:rippleColor Color de la ondulación para el FAB.
android.support.design:useCompatPadding Habilitar el relleno de compat.

Observaciones

Los botones de acción flotantes se utilizan para un tipo especial de acción promovida. Se distinguen por un icono en forma de círculo que flota sobre la interfaz de usuario y tienen comportamientos de movimiento especiales relacionados con la transformación, el lanzamiento y el punto de anclaje de transferencia.

Solo se recomienda un botón de acción flotante por pantalla para representar la acción más común.

Antes de usar el FloatingActionButton debe agregar la dependencia de la biblioteca de soporte de diseño en el archivo build.gradle :

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

Documentación oficial:

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

Especificaciones de materiales de diseño:

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

Cómo agregar el FAB al diseño

Para usar un FloatingActionButton, simplemente agregue la dependencia en el archivo build.gradle como se describe en la sección de comentarios.

A continuación, agregue al diseño:

 <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 ejemplo:

introduzca la descripción de la imagen aquí

Color

El color de fondo de esta vista se establece de manera predeterminada en el colorAccent de su tema.

En la imagen de arriba, si el src solo apunta al ícono + (por defecto, 24x24 dp), para obtener el color de fondo del círculo completo puede usar la app:backgroundTint="@color/your_colour"

Si desea cambiar el color en el código que puede utilizar,

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

Si desea cambiar el color de FAB en estado presionado

mFab.setRippleColor(your color in int);

Posicionamiento

Se recomienda colocar un mínimo de 16dp desde el borde en el móvil y un mínimo de 24dp en la tableta / escritorio.

Nota : una vez que establezca un src excepto para cubrir el área completa de FloatingActionButton asegúrese de tener el tamaño correcto de esa imagen para obtener el mejor resultado.

El tamaño predeterminado del círculo es 56 x 56dp

introduzca la descripción de la imagen aquí

Mini tamaño de círculo: 40 x 40dp

Si solo desea cambiar solo el icono Interior, use un icono de 24 x 24dp para el tamaño predeterminado

Mostrar y ocultar el botón de acción flotante al deslizar

Para mostrar y ocultar un FloatingActionButton con la animación predeterminada, simplemente llame a los métodos show() y hide() . Es una buena práctica mantener un FloatingActionButton en el diseño de la actividad en lugar de colocarlo en un fragmento, esto permite que las animaciones predeterminadas funcionen cuando se muestran y ocultan.

Aquí hay un ejemplo con un ViewPager :

  • Tres pestañas
  • Mostrar FloatingActionButton para la primera y tercera pestaña
  • Ocultar el FloatingActionButton de FloatingActionButton en la pestaña central
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();
                }
            }
        });

    }
}

Resultado:

introduzca la descripción de la imagen aquí

Mostrar y ocultar el botón de acción flotante en el desplazamiento

A partir de la biblioteca de soporte, versión 22.2.1, es posible mostrar y ocultar un FloatingActionButton del comportamiento de desplazamiento utilizando una clase secundaria FloatingActionButton.Behavior que aprovecha los métodos show() y hide() .

Tenga en cuenta que esto solo funciona con un CoordinatorLayout junto con las vistas internas que admiten el desplazamiento anidado, como RecyclerView y NestedScrollView .

Esta clase ScrollAwareFABBehavior proviene de las Guías de Android en Codepath (se requiere cc-wiki con atribución)

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();
        }
    }
}

En el xml de diseño de FloatingActionButton, especifique la app:layout_behavior con el nombre de clase completamente calificado de ScrollAwareFABBehavior :

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

Por ejemplo, con este diseño:

<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>

Aquí está el resultado:

introduzca la descripción de la imagen aquí

Ajuste del comportamiento de FloatingActionButton

Puede establecer el comportamiento de la FAB en XML.

Por ejemplo:

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

O puedes configurar programáticamente usando:

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


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow