Como evito que meu botão de ação flutuante bloqueie outros componentes?


22

O novo Design de materiais do Google recomenda o uso de botões de ação flutuantes para chamar a atenção do usuário para a ação principal nessa tela. Existem muitos exemplos disso em uma exibição de lista.

Agora, suponha que sua exibição em lista tenha apenas itens suficientes para preencher a tela, impossibilitando a rolagem. Se os itens de sua lista tiverem um determinado componente com o qual o usuário possa interagir, por exemplo, um comutador ou uma estrela favorita, é possível que o botão de ação flutuante esteja bloqueando esse componente. Como devemos lidar com este caso?

EDIT: Isso realmente sempre acontece com o último item da lista. Aqui está um exemplo em que a 'estrela favorita' não pode ser usada corretamente. Também está bloqueando o conteúdo, como a hora neste exemplo.

exemplo de UI de bloqueio de botão de ação flutuante

Respostas:


14

Existem algumas maneiras diferentes de lidar com isso.

  1. Não coloque conteúdo vital abaixo do botão

    Essa é a abordagem mais óbvia e provavelmente a mais geral. Sempre que possível, estruture seu design para garantir que nada de vital esteja abaixo do botão de ação, como outros botões, conteúdo principal etc.

    Você pode adicionar espaço extra usando preenchimento ou uma entrada em branco, formatando o conteúdo para que as coisas não tão importantes não estejam onde o botão estará, ou alguma outra coisa - isso depende do conteúdo e do design que você deseja.

  2. Realoque o botão

    O botão de ação não precisa estar no canto inferior direito. Dependendo do seu design, pode fazer mais sentido colocá-lo em outro local. Eu acho que os exemplos abaixo fazem isso muito bem.

    O Google acabou de atualizar seu guia de design de material e criou uma página apenas para o botão de ação flutuante, que mostra o uso em diferentes locais e tamanhos, além de uma animação (falamos abaixo).

Primeira imagem do Reddit News Pro . Segunda imagem de Mark DiSciullo .

  1. Não mostrar o botão o tempo todo

    Às vezes, o botão de ação não é vital o suficiente para ser visto o tempo todo. Em casos como esse, ocultá-lo na rolagem ou ao rolar para baixo pode fazer sentido. Se e como você faz isso depende do conteúdo e do design, nenhuma resposta é verdadeira para todos os aplicativos.

    As diretrizes atualizadas do Google mostram uma versão da animação do botão para dentro e para fora, escalando tudo em vez de deslizar como na imagem abaixo.

Imagem de Ação flutuante .


8

Pode ser um pouco simplista e não a solução mais elegante, mas: adicione uma entrada 'fictícia' vazia ao final da lista, para que o usuário possa rolar além da última entrada.


1
Isso pode ser considerado a solução "oficial", porque o aplicativo Gmail a usa.
Vicky Chijwani

1
Além disso, você pode chamá-lo de "preenchimento na parte inferior da lista" em vez de uma entrada fictícia (que, como você aponta, parece deselegante).
Vicky Chijwani


2

Ressaltando a idéia "Realocar o botão" na resposta aceita, as técnicas de Rolagem, parte das diretrizes de design de material, têm uma implementação possível dessa idéia.

Ou seja, o botão de ação flutuante quebra a borda entre o conteúdo e uma barra de aplicativos com espaço flexível. Ao rolar:

O espaço flexível diminui até que apenas a barra de ferramentas permaneça. Ao rolar para o topo da página, o espaço flexível cresce novamente no lugar.

O botão de ação flutuante é animado na tela como uma peça de material em expansão.

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

fabuloso entre a barra de aplicativos e o conteúdo


1

Usei isso no método onBindViewHolder de RecyclerView.Adapter para definir a margem inferior do último item da lista como 72dp, para que ele role acima do botão de ação flutuante.

Isso não requer uma entrada fictícia na 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 mim :).
OWADVL
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.