it-swarm.com.de

Android Design Support Library erweiterbares Floating Action Button (FAB) -Menü

Weiß jemand, wie man ein erweitertes Fab-Menü damit implementiert, wie die Fab in der Inbox-App, nachdem die Android Design Support-Bibliothek veröffentlicht wurde?

Sollte so aussehen:

enter image description here

156
EkKoZ

Derzeit ist kein Widget in der Designbibliothek verfügbar. Der einzige Weg dies zu tun schnell und einfach ist die Verwendung von Bibliotheken von Drittanbietern.

Sie können dies natürlich auch mit der Designbibliothek tun, aber es wird eine große Arbeit sein und viel Zeit in Anspruch nehmen. Ich habe einige nützliche Bibliotheken erwähnt, die Ihnen dabei helfen können.

  1. Rapid Floating Button (Wangjiegulu)
  2. Floating Action Button (Clans)
  3. Floating Action Button (makovkastar)
  4. Android Floating Action Button (zukünftig einfach)

Ich benutze die 4..

139
Aritra Roy

Es ist ein bisschen spät, dies zu beantworten, aber ich habe einen besseren Ansatz, um das animierende FAB-Menü zu implementieren, ohne eine Bibliothek zu verwenden oder großen XML-Code für Animationen zu schreiben. Ich hoffe, dass dies in Zukunft für jemanden hilfreich sein wird, der eine einfache Möglichkeit zur Implementierung benötigt.

So ist es ziemlich einfach, nur mit der Funktion animate (). TranslationY (), können Sie die FAB nach oben oder unten animieren, wie ich es in meinem folgenden Code getan habe, Vollständigen Code in Github prüfen .

definieren Sie zuerst alle Ihre FABs an derselben Stelle, sodass sie sich überlappen. Denken Sie daran, dass die FABs so sein sollten, dass Sie auf sie klicken und andere anzeigen möchten. z.B:

    <Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab3"
    Android:layout_width="@dimen/standard_45"
    Android:layout_height="@dimen/standard_45"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/standard_21"
    app:srcCompat="@Android:drawable/ic_btn_speak_now" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab2"
    Android:layout_width="@dimen/standard_45"
    Android:layout_height="@dimen/standard_45"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/standard_21"
    app:srcCompat="@Android:drawable/ic_menu_camera" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab1"
    Android:layout_width="@dimen/standard_45"
    Android:layout_height="@dimen/standard_45"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/standard_21"
    app:srcCompat="@Android:drawable/ic_dialog_map" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@Android:drawable/ic_dialog_email" />

Jetzt definieren Sie in Ihrer Java Klasse einfach Ihren gesamten FAB und führen den unten gezeigten Klick aus:

 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab1 = (FloatingActionButton) findViewById(R.id.fab1);
    fab2 = (FloatingActionButton) findViewById(R.id.fab2);
    fab3 = (FloatingActionButton) findViewById(R.id.fab3);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if(!isFABOpen){
                showFABMenu();
            }else{
                closeFABMenu();
            }
        }
    });

Verwenden Sie jetzt die animation (). TranslationY (), um Ihr FAB zu animieren. Ich bevorzuge die Verwendung des Attributs dieser Methode in DP, da nur die Verwendung eines int die Anzeigekompatibilität mit höherer oder niedrigerer Auflösung beeinträchtigt. Wie nachfolgend dargestellt:

 private void showFABMenu(){
    isFABOpen=true;
    fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_55));
    fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_105));
    fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_155));
}

private void closeFABMenu(){
    isFABOpen=false;
    fab1.animate().translationY(0);
    fab2.animate().translationY(0);
    fab3.animate().translationY(0);
}

Definieren Sie nun die oben genannte Dimension in res-> values-> dimens.xml wie folgt:

    <dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>

Das ist alles Hoffnung, dass diese Lösung den Menschen in Zukunft helfen wird, die nach einer einfachen Lösung suchen.

BEARBEITET

Wenn Sie eine Beschriftung über das FAB hinzufügen möchten, nehmen Sie einfach ein horizontales LinearLayout und platzieren Sie das FAB mit der Textansicht als Beschriftung. Animieren Sie die Layouts, wenn dabei ein Problem auftritt. Sie können meinen Beispielcode in github überprüfen. Ich habe alle Abwärtskompatibilität behandelt Probleme in diesem Beispielcode. überprüfe meinen Beispielcode für FABMenu in Github

um das FAB in Backpress zu schließen, überschreiben Sie onBackPress () wie unten gezeigt:

    @Override
public void onBackPressed() {
    if(!isFABOpen){
        this.super.onBackPressed();
    }else{
        closeFABMenu();
    }
}

Der Screenshot hat auch den Titel mit dem FAB, da ich ihn aus meinem Beispiel App Ingithub vorhanden nehme

enter image description here

140
HAXM
  • Erstellen Sie zuerst die Menü-Layouts in der XML-Datei Ihres Aktivitäts-Layouts. Für z.B. Ein lineares Layout mit horizontaler Ausrichtung und einer Textansicht als Beschriftung sowie einer schwebenden Aktionsschaltfläche neben der Textansicht.

  • Erstellen Sie die Menü-Layouts gemäß Ihren Anforderungen und Ihrer Nummer.

  • Erstellen Sie eine schwebende Basis-Aktionsschaltfläche, und ändern Sie durch Klicken darauf die Sichtbarkeit der Menü-Layouts.

Bitte überprüfen Sie den folgenden Code für die Referenz und für weitere Informationen, mein Projekt von Github

Checkout-Projekt von Github

<Android.support.constraint.ConstraintLayout
            Android:id="@+id/activity_main"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            tools:context="com.app.fabmenu.MainActivity">

            <Android.support.design.widget.FloatingActionButton
                Android:id="@+id/baseFloatingActionButton"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="16dp"
                Android:layout_marginEnd="16dp"
                Android:layout_marginRight="16dp"
                Android:clickable="true"
                Android:onClick="@{FabHandler::onBaseFabClick}"
                Android:tint="@Android:color/white"
                app:fabSize="normal"
                app:layout_constraintBottom_toBottomOf="@+id/activity_main"
                app:layout_constraintRight_toRightOf="@+id/activity_main"
                app:srcCompat="@drawable/ic_add_black_24dp" />

            <LinearLayout
                Android:id="@+id/shareLayout"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="12dp"
                Android:layout_marginEnd="24dp"
                Android:layout_marginRight="24dp"
                Android:gravity="center_vertical"
                Android:orientation="horizontal"
                Android:visibility="invisible"
                app:layout_constraintBottom_toTopOf="@+id/createLayout"
                app:layout_constraintLeft_toLeftOf="@+id/createLayout"
                app:layout_constraintRight_toRightOf="@+id/activity_main">

                <TextView
                    Android:id="@+id/shareLabelTextView"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginEnd="8dp"
                    Android:layout_marginRight="8dp"
                    Android:background="@drawable/shape_fab_label"
                    Android:elevation="2dp"
                    Android:fontFamily="sans-serif"
                    Android:padding="5dip"
                    Android:text="Share"
                    Android:textColor="@Android:color/white"
                    Android:typeface="normal" />


                <Android.support.design.widget.FloatingActionButton
                    Android:id="@+id/shareFab"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:clickable="true"
                    Android:onClick="@{FabHandler::onShareFabClick}"
                    Android:tint="@Android:color/white"
                    app:fabSize="mini"
                    app:srcCompat="@drawable/ic_share_black_24dp" />

            </LinearLayout>

            <LinearLayout
                Android:id="@+id/createLayout"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="24dp"
                Android:layout_marginEnd="24dp"
                Android:layout_marginRight="24dp"
                Android:gravity="center_vertical"
                Android:orientation="horizontal"
                Android:visibility="invisible"
                app:layout_constraintBottom_toTopOf="@+id/baseFloatingActionButton"
                app:layout_constraintRight_toRightOf="@+id/activity_main">

                <TextView
                    Android:id="@+id/createLabelTextView"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginEnd="8dp"
                    Android:layout_marginRight="8dp"
                    Android:background="@drawable/shape_fab_label"
                    Android:elevation="2dp"
                    Android:fontFamily="sans-serif"
                    Android:padding="5dip"
                    Android:text="Create"
                    Android:textColor="@Android:color/white"
                    Android:typeface="normal" />

                <Android.support.design.widget.FloatingActionButton
                    Android:id="@+id/createFab"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:clickable="true"
                    Android:onClick="@{FabHandler::onCreateFabClick}"
                    Android:tint="@Android:color/white"
                    app:fabSize="mini"
                    app:srcCompat="@drawable/ic_create_black_24dp" />

            </LinearLayout>

        </Android.support.constraint.ConstraintLayout>

Dies sind die Animations-

Eröffnungsanimation des FAB-Menüs:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fillAfter="true">
<scale
    Android:duration="300"
    Android:fromXScale="0"
    Android:fromYScale="0"
    Android:interpolator="@Android:anim/linear_interpolator"
    Android:pivotX="50%"
    Android:pivotY="50%"
    Android:toXScale="1"
    Android:toYScale="1" />
<alpha
    Android:duration="300"
    Android:fromAlpha="0.0"
    Android:interpolator="@Android:anim/accelerate_interpolator"
    Android:toAlpha="1.0" />

</set>

Abschlussanimation des FAB-Menüs:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fillAfter="true">
<scale
    Android:duration="300"
    Android:fromXScale="1"
    Android:fromYScale="1"
    Android:interpolator="@Android:anim/linear_interpolator"
    Android:pivotX="50%"
    Android:pivotY="50%"
    Android:toXScale="0.0"
    Android:toYScale="0.0" />
<alpha
    Android:duration="300"
    Android:fromAlpha="1.0"
    Android:interpolator="@Android:anim/accelerate_interpolator"
    Android:toAlpha="0.0" />
</set>

In meiner Aktivität habe ich dann einfach die obigen Animationen verwendet, um das FAB-Menü ein- und auszublenden:

Fab Menu anzeigen:

  private void expandFabMenu() {

    ViewCompat.animate(binding.baseFloatingActionButton).rotation(45.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start();
    binding.createLayout.startAnimation(fabOpenAnimation);
    binding.shareLayout.startAnimation(fabOpenAnimation);
    binding.createFab.setClickable(true);
    binding.shareFab.setClickable(true);
    isFabMenuOpen = true;

}

Fab Menu schließen:

private void collapseFabMenu() {

    ViewCompat.animate(binding.baseFloatingActionButton).rotation(0.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start();
    binding.createLayout.startAnimation(fabCloseAnimation);
    binding.shareLayout.startAnimation(fabCloseAnimation);
    binding.createFab.setClickable(false);
    binding.shareFab.setClickable(false);
    isFabMenuOpen = false;

}

Hier ist die Aktivitätsklasse -

package com.app.fabmenu;

import Android.databinding.DataBindingUtil;
import Android.os.Bundle;
import Android.support.design.widget.Snackbar;
import Android.support.v4.view.ViewCompat;
import Android.support.v7.app.AppCompatActivity;
import Android.view.View;
import Android.view.animation.Animation;
import Android.view.animation.AnimationUtils;
import Android.view.animation.OvershootInterpolator;

import com.app.fabmenu.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

private ActivityMainBinding binding;
private Animation fabOpenAnimation;
private Animation fabCloseAnimation;
private boolean isFabMenuOpen = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    binding = DataBindingUtil.setContentView(this,    R.layout.activity_main);
    binding.setFabHandler(new FabHandler());

    getAnimations();


}

private void getAnimations() {

    fabOpenAnimation = AnimationUtils.loadAnimation(this, R.anim.fab_open);

    fabCloseAnimation = AnimationUtils.loadAnimation(this, R.anim.fab_close);

}

private void expandFabMenu() {

    ViewCompat.animate(binding.baseFloatingActionButton).rotation(45.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start();
    binding.createLayout.startAnimation(fabOpenAnimation);
    binding.shareLayout.startAnimation(fabOpenAnimation);
    binding.createFab.setClickable(true);
    binding.shareFab.setClickable(true);
    isFabMenuOpen = true;


}

private void collapseFabMenu() {

    ViewCompat.animate(binding.baseFloatingActionButton).rotation(0.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start();
    binding.createLayout.startAnimation(fabCloseAnimation);
    binding.shareLayout.startAnimation(fabCloseAnimation);
    binding.createFab.setClickable(false);
    binding.shareFab.setClickable(false);
    isFabMenuOpen = false;

}


public class FabHandler {

    public void onBaseFabClick(View view) {

        if (isFabMenuOpen)
            collapseFabMenu();
        else
            expandFabMenu();


    }

    public void onCreateFabClick(View view) {

        Snackbar.make(binding.coordinatorLayout, "Create FAB tapped", Snackbar.LENGTH_SHORT).show();

    }

    public void onShareFabClick(View view) {

        Snackbar.make(binding.coordinatorLayout, "Share FAB tapped", Snackbar.LENGTH_SHORT).show();

    }


}

@Override
public void onBackPressed() {

    if (isFabMenuOpen)
        collapseFabMenu();
    else
        super.onBackPressed();
}
}

Hier sind die Screenshots

Floating Action Menu with Label Textview in new Cursive Font Family of Android

Floating Action Menu with Label Textview in new Roboto Font Family of Android

29
Prashant

Eine weitere Bibliothek, die Kurzwahl aus den Material Design-Richtlinien implementiert:

https://github.com/leinardi/FloatingActionButtonSpeedDial

enter image description here

15

Als ich versuchte, etwas zu erstellen, das mit der schwebenden Aktion "Posteingang" vergleichbar ist, dachte ich darüber nach, eine eigene benutzerdefinierte Komponente zu erstellen.

Es wäre ein einfaches Rahmenlayout mit fester Höhe (um ein erweitertes Menü zu enthalten), das eine FAB-Taste und drei weitere unter der FAB-Taste enthält. Wenn Sie auf FAB klicken, animieren Sie einfach andere Schaltflächen, um sie unter dem FAB nach oben zu übersetzen.

Es gibt einige Bibliotheken, die dies tun (zum Beispiel https://github.com/futuresimple/Android-floating-action-button ), aber es macht immer mehr Spaß, wenn Sie es selbst erstellen :)

7
rwojcik

Sie können die FloatingActionMenu-Bibliothek oder hier klicken verwenden, um eine schrittweise Anleitung zu erhalten. Ausgabe des Tutorials:

enter image description here

7

Ich benutze diese Bibliothek, um dies zu tun: https://github.com/futuresimple/Android-floating-action-button

Ziemlich einfach zu bedienen;)

enter image description here

3