¿Cómo evito que mi botón de acción flotante bloquee otros componentes?


22

El nuevo diseño de materiales de Google recomienda utilizar botones de acción flotantes para llamar la atención del usuario sobre la acción principal en esa pantalla. Hay bastantes ejemplos de esto dentro de una vista de lista.

Ahora, suponga que su vista de lista tiene elementos suficientes para llenar la pantalla, haciendo imposible el desplazamiento. Si los elementos de su lista tienen un determinado componente con el que el usuario puede interactuar, por ejemplo, un interruptor o una estrella favorita, es posible que el botón de acción flotante esté bloqueando este componente. ¿Cómo debemos manejar este caso?

EDITAR: Esto realmente siempre sucede con el último elemento de la lista. Aquí hay un ejemplo donde la 'estrella favorita' no se puede usar correctamente. También está bloqueando contenido, como el tiempo en este ejemplo.

ejemplo de botón de acción flotante que bloquea la IU

Respuestas:


14

Hay algunas formas diferentes de manejar esto.

  1. No coloque contenido vital debajo del botón

    Este es el enfoque más obvio, y probablemente el más general. Siempre que sea posible, estructura tu diseño para asegurarte de que no haya nada vital debajo del botón de acción como otros botones, contenido principal, etc.

    Puede agregar espacio adicional utilizando relleno o una entrada en blanco, formateando el contenido para que las cosas no tan importantes no estén donde estará el botón, o alguna otra cosa; depende del contenido y del diseño que desee.

  2. Reubicar el botón

    El botón de acción no tiene que estar en la parte inferior derecha. Dependiendo de su diseño, puede tener más sentido colocarlo en otra ubicación. Creo que los ejemplos a continuación lo hacen bastante bien.

    Google acaba de actualizar su guía de diseño de materiales e hizo una página solo para el botón de acción flotante que muestra que se está utilizando en diferentes ubicaciones y tamaños, además de una animación (se trata a continuación).

Primera imagen de Reddit News Pro . Segunda imagen de Mark DiSciullo .

  1. No muestres el botón todo el tiempo

    A veces, el botón de acción no es lo suficientemente vital como para que deba verse todo el tiempo. En casos como este, ocultarlo en el desplazamiento o mientras se desplaza hacia abajo puede tener sentido. Si y cómo lo hace depende del contenido y el diseño, ninguna respuesta es verdadera para todas las aplicaciones.

    Las pautas actualizadas de Google muestran una versión de animar el botón de entrada y salida al escalar todo en lugar de deslizarse como la imagen a continuación.

Imagen de la acción flotante .


8

Puede ser un poco simplista y no la solución más elegante, pero: agregue una entrada vacía 'ficticia' al final de la lista, para que el usuario pueda desplazarse más allá de la última entrada.


1
Esta podría considerarse la solución "oficial", porque la aplicación Gmail la usa.
Vicky Chijwani

1
Además, puede llamarlo "relleno al final de la lista" en lugar de una entrada ficticia (que, como señala, suena poco elegante).
Vicky Chijwani


2

Rebotando la idea de "Reubicar el botón" en la respuesta aceptada, la parte de Técnicas de desplazamiento de las pautas de diseño de materiales tiene una posible implementación de esa idea.

A saber, el botón de acción flotante rompe el borde entre el contenido y una barra de aplicaciones con espacio flexible. Al desplazarse:

El espacio flexible se reduce hasta que solo queda la barra de herramientas. Al desplazarse a la parte superior de la página, el espacio flexible vuelve a crecer.

El botón de acción flotante se anima en la pantalla como una pieza de material en expansión.

https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior

fabuloso entre la barra de aplicaciones y el contenido


1

Utilicé esto en el método onBindViewHolder de RecyclerView.Adapter para establecer el margen inferior del último elemento de la lista en 72dp para que se desplace hacia arriba sobre el botón de acción flotante.

Esto no requiere una entrada ficticia en la lista.

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    // other binding code goes here.

    if (position + 1 == getItemCount()) {
        // set bottom margin to 72dp.
        setBottomMargin(holder.itemView, (int) (72 * Resources.getSystem().getDisplayMetrics().density));
    } else {
        // reset bottom margin back to zero. (your value may be different)
        setBottomMargin(holder.itemView, 0);
    }
}

public static void setBottomMargin(View view, int bottomMargin) {
    if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
        params.setMargins(params.leftMargin, params.topMargin, params.rightMargin, bottomMargin);
        view.requestLayout();
    }
}

Funciona para mi :).
OWADVL
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.