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

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.

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

3. 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 .}

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.

To działa dla mnie. Dodaj dolne wypełnienie do RecyclerView

<android.support.v7.widget.RecyclerView 
android:id="@+id/my_recycler_view" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:clipToPadding="false" 
android:paddingBottom="30dp" 
android:scrollbars="vertical"/>

Ref: /programming/27768495/not-able-to-add-empty-view-below-recyclerview

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

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