Wie verhindere ich, dass meine schwebende Aktionstaste andere Komponenten blockiert?

Das neue Material Design von Google empfiehlt die Verwendung schwebender Aktionsschaltflächen, um den Benutzer auf die Hauptaktion auf diesem Bildschirm aufmerksam zu machen. In einer Listenansicht gibt es ziemlich viele Beispiele dafür.

Angenommen, Ihre Listenansicht enthält gerade genug Elemente, um den Bildschirm auszufüllen, sodass kein Bildlauf möglich ist. Wenn Ihre Listenelemente eine bestimmte Komponente enthalten, mit der der Benutzer interagieren kann, z. B. einen Schalter oder einen Lieblingsstern, blockiert die schwebende Aktionsschaltfläche möglicherweise diese Komponente. Wie sollen wir mit diesem Fall umgehen?

BEARBEITEN: Dies geschieht eigentlich immer mit dem letzten Punkt der Liste. Hier ist ein Beispiel, in dem der "Lieblingsstern" nicht richtig verwendet werden kann. Es blockiert auch Inhalte wie die Uhrzeit in diesem Beispiel.

Es gibt verschiedene Möglichkeiten, wie Sie damit umgehen können.

1. Platzieren Sie keine wichtigen Inhalte unter der Schaltfläche

   Dies ist der naheliegendste und wahrscheinlich allgemeinste Ansatz. Strukturieren Sie Ihr Design nach Möglichkeit so, dass sich unter der Aktionsschaltfläche keine wichtigen Elemente wie andere Schaltflächen, Hauptinhalte usw. befinden.

   Sie können zusätzlichen Speicherplatz hinzufügen, indem Sie Auffüllen oder einen leeren Eintrag verwenden und den Inhalt so formatieren, dass sich die nicht so wichtigen Elemente nicht dort befinden, wo sich die Schaltfläche befindet.

2. Bewegen Sie den Knopf

   Die Aktionsschaltfläche muss nicht unten rechts sein. Abhängig von Ihrem Design kann es sinnvoller sein, es an einem anderen Ort zu platzieren. Ich denke, die folgenden Beispiele machen es ziemlich gut.

   Google hat gerade seinen Leitfaden zum Materialdesign aktualisiert und eine Seite nur für die schwebende Aktionsschaltfläche erstellt, auf der neben einer Animation (siehe unten) auch die Verwendung an verschiedenen Orten und die Größenänderung dargestellt werden.

_{Erstes Bild von Reddit News Pro . Zweites Bild von Mark DiSciullo .}

3. Zeigen Sie den Knopf nicht die ganze Zeit

   Manchmal ist die Aktionsschaltfläche nicht so wichtig, dass sie ständig angezeigt werden muss. In solchen Fällen kann es sinnvoll sein, es beim Scrollen oder beim Scrollen nach unten auszublenden. Ob und wie Sie dies tun, hängt vom Inhalt und vom Design ab, und es gibt keine einheitliche Antwort für alle Anwendungen.

   In den aktualisierten Richtlinien von Google wird eine Version zum Ein- und Ausblenden der Schaltfläche angezeigt, bei der das Ganze skaliert wird, anstatt wie im folgenden Bild verschoben zu werden.

_{Bild von der sich hin- und herbewegenden Tätigkeit .}

Es mag ein bisschen simpel und nicht die eleganteste Lösung sein, aber: Fügen Sie einen leeren 'Dummy'-Eintrag am Ende der Liste hinzu, damit der Benutzer weiter als bis zum letzten Eintrag scrollen kann.

Das funktioniert bei mir. Fügen Sie dem RecyclerView das untere Polster hinzu

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

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

Wenn Sie die Idee "Relocate the button" in der akzeptierten Antwort aufgreifen, enthält der Teil "Scrolltechniken" der Materialdesign-Richtlinien eine mögliche Implementierung dieser Idee.

Die schwebende Aktionsschaltfläche unterbricht nämlich die Kante zwischen dem Inhalt und einer App-Leiste mit flexiblem Platz. Beim Scrollen:

Der flexible Bereich wird kleiner, bis nur noch die Symbolleiste angezeigt wird. Wenn Sie zum oberen Rand der Seite scrollen, wächst der flexible Bereich wieder ein.

Die schwebende Aktionstaste wird als expandierendes Materialstück auf dem Bildschirm animiert.

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

Ich habe dies in der onBindViewHolder-Methode eines RecyclerView.Adapters verwendet, um den unteren Rand des letzten Elements in der Liste auf 72dp festzulegen, sodass ein Bildlauf über der schwebenden Aktionsschaltfläche ausgeführt wird.

Dies erfordert keinen Dummy-Eintrag in der Liste.

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