Jak mogę zapobiec blokowaniu przez mój pływający przycisk innych elementów?


22

Nowy projekt materiałowy Google zaleca stosowanie pływających przycisków akcji, aby zwrócić uwagę użytkownika na główną akcję na tym ekranie. Jest wiele przykładów tego w widoku listy.

Załóżmy teraz, że widok listy zawiera wystarczającą liczbę elementów do wypełnienia ekranu, co uniemożliwia przewijanie. Jeśli elementy listy zawierają określony element, z którym użytkownik może wchodzić w interakcje, na przykład przełącznik lub ulubioną gwiazdę, możliwe, że przycisk akcji swobodnej blokuje ten element. Jak powinniśmy poradzić sobie z tą sprawą?

EDYCJA: Tak naprawdę dzieje się tak zawsze z ostatnim elementem listy. Oto przykład, w którym „ulubiona gwiazda” nie może być właściwie użyta. Blokuje również zawartość, na przykład czas w tym przykładzie.

przykład pływającego przycisku blokującego interfejs użytkownika

Odpowiedzi:


14

Istnieje kilka różnych sposobów radzenia sobie z tym.

  1. Nie umieszczaj istotnych treści pod przyciskiem

    Jest to najbardziej oczywiste i prawdopodobnie najbardziej ogólne podejście. O ile to możliwe, opracuj strukturę projektu, aby upewnić się, że pod przyciskiem akcji nie ma nic istotnego, jak inne przyciski, główna zawartość itp.

    Możesz dodać dodatkowe miejsce za pomocą dopełnienia lub pustego wpisu, formatując zawartość, aby nieistotne rzeczy nie znajdowały się w miejscu, w którym będzie przycisk, lub coś innego - zależy to od zawartości i pożądanego projektu.

  2. Zmień położenie przycisku

    Przycisk akcji nie musi znajdować się w prawym dolnym rogu. W zależności od projektu, sensowniejsze może być umieszczenie go w innym miejscu. Myślę, że poniższe przykłady robią to całkiem dobrze.

    Google właśnie zaktualizowało swój przewodnik projektowania materiałów i stworzyło stronę tylko dla pływającego przycisku akcji, który pokazuje, że jest on używany w różnych lokalizacjach i zmienia rozmiar oprócz animacji (o której mowa poniżej).

Pierwsze zdjęcie z Reddit News Pro . Drugi obraz Marka DiSciullo .

  1. Nie pokazuj przycisku cały czas

    Czasami przycisk akcji nie jest na tyle ważny, że trzeba go cały czas widzieć. W takich przypadkach ukrywanie go na przewijaniu lub podczas przewijania w dół może mieć sens. Jeśli i jak to robisz, zależy od treści i projektu, żadna odpowiedź nie jest prawdziwa dla wszystkich aplikacji.

    Zaktualizowane wytyczne Google pokazują wersję animacji przycisku do środka i na zewnątrz poprzez skalowanie całości zamiast przesuwania się jak na poniższym obrazku.

Obraz z akcji swobodnej .


8

Może to być nieco uproszczone i nie jest najbardziej eleganckim rozwiązaniem, ale: dodaj pusty „obojętny” wpis na końcu listy, aby użytkownik mógł przewijać dalej niż ostatni wpis.


1
Można to uznać za „oficjalne” rozwiązanie, ponieważ korzysta z niego aplikacja Gmail.
Vicky Chijwani

1
Możesz też nazwać to „dopełnieniem u dołu listy” zamiast fikcyjnego wpisu (który, jak zauważyłeś, brzmi nieelegancko).
Vicky Chijwani,


2

Odrzucając pomysł „Zmień położenie przycisku” w zaakceptowanej odpowiedzi, część Techniki przewijania w wytycznych dotyczących projektowania materiałów ma jedną możliwą implementację tego pomysłu.

Mianowicie, pływający przycisk akcji przełamuje krawędź między zawartością a paskiem aplikacji dzięki elastycznej przestrzeni. Podczas przewijania:

Elastyczna przestrzeń kurczy się, aż pozostanie tylko pasek narzędzi. Podczas przewijania na górę strony elastyczna przestrzeń ponownie rośnie na swoim miejscu.

Pływający przycisk akcji animuje się na ekranie jako rozszerzający się materiał.

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

super między paskiem aplikacji a zawartością


1

Użyłem tego w metodzie onBindViewHolder RecyclerView.Adapter, aby ustawić dolny margines ostatniego elementu na liście na 72dp, aby przewinął się w górę nad przyciskiem akcji swobodnej.

To nie wymaga fikcyjnego wpisu na liście.

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

Pracuje dla mnie :).
OWADVL
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.