FloatingActionButton mit Mehreren Aktionen

Ich bin mit FloatingActionsButton (FAB), die sich aus der design-support-Bibliothek (com.android.Unterstützung:design:22.2.0).

In meiner Anwendung habe ich zwei Haupt-Funktionalitäten, die die erste ist, um die Synchronisation der Daten alle X-Minuten (die einen service startet und aktualisiert die Daten alle X-Minuten) und der zweite ist der sync einmal (das anfordern von Daten vom server und aktualisiert das UI).

Will ich mit FAB für diese wichtigsten Funktionen und Fragen, was und wie ich es machen kann:

Der erste Ansatz ist die Verwendung eines FAB, dass, wenn geklickt wird, wechselt der button zeigt zwei neue FABs eine für jede Funktion.

Der zweite Ansatz ist die Anzeige immer zwei FABs in der Benutzeroberfläche, die die sync alle X Minuten FAB größer sein wird als das update bei FAB.

Ich interessant, der erste Ansatz und Frage mich, wie kann ich das implementieren dieses Verhalten? Ich schaute mich um aber diese Ansicht ist neu und ich konnte Sie nicht finden, ein Beispiel.

Dank.

Mehrere FABs angezeigt side-by-side ist ein no-no, nach Material-Design-Specs, aber eine Erweiterung der FAB-Menü mit mehreren Schaltflächen ausbau aus einem Haupt-FAB zu sein scheint-konform.

InformationsquelleAutor galvan | 2015-06-13

  1. 17

    Ich bin mit diesem github-Bibliothek ist es sehr einfach und löste meine Probleme:

    https://github.com/Clans/FloatingActionButton

    Hinzufügen einer Abhängigkeit zu Ihr zu bauen.gradle:

    dependencies {
    compile 'com.github.clans:fab:1.6.4'
}

    Fügen Sie diese an den Anfang der xml:

    xmlns:fab="http://schemas.android.com/apk/res-auto"

    Nun fügen Sie einfach Ihre buttons, Beispiel:

    <com.github.clans.fab.FloatingActionMenu
    android:id="@+id/floatingMenu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    fab:menu_labels_ellipsize="end"
    fab:menu_labels_singleLine="true"
    fab:menu_fab_label="Cancel"
    fab:menu_backgroundColor="#ccffffff"
    fab:menu_animationDelayPerItem="0"
    fab:menu_colorNormal="#00C29F"
    fab:menu_colorPressed="#00C29F"
    fab:menu_colorRipple="#00C29F"
    android:padding="8dp">

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fabEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_edit_white"
        fab:fab_size="mini"
        fab:fab_label="Edit Category"/>

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fabAddProduct"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/fab_add"
        fab:fab_size="mini"
        fab:fab_label="Add product"/>

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fabAddSubcategory"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/fab_add"
        fab:fab_size="mini"
        fab:fab_label="Subcategory"/>

</com.github.clans.fab.FloatingActionMenu>

    InformationsquelleAutor Duan Bressan

Schreibe einen Kommentar