Suche…


Einführung

Die schwebende Aktionsschaltfläche wird für eine spezielle Art von Aktionen verwendet, die standardmäßig als expandierendes Material auf dem Bildschirm angezeigt wird. Das Symbol darin kann animiert sein, auch FAB kann sich aufgrund ihrer relativen Bedeutung anders als andere Elemente der Benutzeroberfläche bewegen. Eine schwebende Aktionsschaltfläche stellt die Hauptaktion in einer Anwendung dar, die einfach eine Aktion auslösen oder irgendwo navigieren kann.

Parameter

Parameter Detail
android.support.design:elevation Höhenwert für die FAB. Kann eine Referenz auf eine andere Ressource sein, in der Form "@ [+] [package:] type / name" oder ein Designattribut in der Form "? [Package:] type / name".
android.support.design:fabSize Größe für die FAB.
android.support.design:rippleColor Wellenfarbe für die FAB.
android.support.design:useCompatPadding Compat-Auffüllung aktivieren

Bemerkungen

Schwimmende Aktionsschaltflächen werden für eine spezielle Art von Aktionsaktionen verwendet. Sie werden durch ein eingekreistes Symbol über der Benutzeroberfläche unterschieden und weisen ein spezielles Bewegungsverhalten auf, das sich auf das Morphing, das Starten und den Übergabepunkt bezieht.

Es wird nur eine Floating-Aktionstaste pro Bildschirm empfohlen, um die am häufigsten verwendete Aktion darzustellen.

Bevor Sie den FloatingActionButton , müssen Sie die Abhängigkeit der Entwurfsunterstützungsbibliothek in der Datei build.gradle :

dependencies {
    compile 'com.android.support:design:25.1.0'
}

Offizielle Dokumentation:

https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

Material Design Spezifikationen:

https://material.google.com/components/buttons-floating-action-button.html

So fügen Sie die FAB zum Layout hinzu

Um einen FloatingActionButton zu verwenden, fügen Sie die Abhängigkeit in der build.gradle Datei hinzu, wie im Abschnitt "Anmerkungen" beschrieben.

Dann fügen Sie das Layout hinzu:

 <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"
        android:src="@drawable/my_icon" />

Ein Beispiel:

Geben Sie hier die Bildbeschreibung ein

Farbe

Die Hintergrundfarbe dieser Ansicht ist standardmäßig der colorAccent Ihres Themas.

Wenn das src im obigen Bild nur auf das Symbol + (standardmäßig 24x24 dp) zeigt, können Sie die Hintergrundfarbe des Vollkreises verwenden, app:backgroundTint="@color/your_colour" Sie app:backgroundTint="@color/your_colour"

Wenn Sie die Farbe im Code ändern möchten, können Sie

myFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));

Wenn Sie die Farbe von FAB im gepressten Zustand ändern möchten, verwenden Sie

mFab.setRippleColor(your color in int);

Positionierung

Es wird empfohlen, mindestens 16 dB vom Rand des Mobilgeräts und mindestens 24 dB vom Tablet / Desktop aus zu platzieren.

Hinweis : Wenn Sie einen SRC eingestellt haben, mit Ausnahme, dass der gesamte Bereich von FloatingActionButton abgedeckt wird, stellen Sie sicher, dass Sie die richtige Größe des Bildes haben, um das beste Ergebnis zu erzielen.

Die Standardkreisgröße beträgt 56 x 56 dB

Geben Sie hier die Bildbeschreibung ein

Minikreisgröße: 40 x 40 dp

Wenn Sie nur das Innensymbol ändern möchten, verwenden Sie ein 24 x 24-dB-Symbol für die Standardgröße

FloatingActionButton beim Swipe anzeigen und ausblenden

Um einen FloatingActionButton mit der Standardanimation ein- und auszublenden, rufen Sie einfach die Methoden show() und hide() . Es empfiehlt sich, einen FloatingActionButton im Aktivitätslayout zu belassen, anstatt ihn in ein Fragment zu setzen. Dadurch können die Standardanimationen beim Anzeigen und Ausblenden funktionieren.

Hier ist ein Beispiel mit einem ViewPager :

  • Drei Registerkarten
  • FloatingActionButton für die erste und dritte Registerkarte anzeigen
  • Blenden Sie den FloatingActionButton auf der mittleren Registerkarte aus
public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab;
    ViewPager viewPager;

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

        fab = (FloatingActionButton) findViewById(R.id.fab);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        // ...... set up ViewPager ............

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                if (position == 0) {
                    fab.setImageResource(android.R.drawable.ic_dialog_email);
                    fab.show();
                } else if (position == 2) {
                    fab.setImageResource(android.R.drawable.ic_dialog_map);
                    fab.show();
                } else {
                    fab.hide();
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageScrollStateChanged(int state) {}
        });

        // Handle the FloatingActionButton click event:
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = viewPager.getCurrentItem();
                if (position == 0) {
                    openSend();
                } else if (position == 2) {
                    openMap();
                }
            }
        });

    }
}

Ergebnis:

Geben Sie hier die Bildbeschreibung ein

FloatingActionButton beim Blättern anzeigen und ausblenden

Beginnend mit der Support Library Version 22.2.1 ist es möglich, ein FloatingActionButton- Verhalten mithilfe einer FloatingActionButton.Behavior Unterklasse, die die Methoden show() und hide() nutzt, vor dem Bildlaufverhalten anzuzeigen und hide() .

Beachten Sie, dass dies nur mit einem CoordinatorLayout in Verbindung mit inneren Ansichten funktioniert, die Nested Scrolling unterstützen, wie z. B. RecyclerView und NestedScrollView .

Diese ScrollAwareFABBehavior Klasse stammt aus den Android-Guides für Codepath (cc-wiki mit Attribution erforderlich).

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                                       final View directTargetChild, final View target, final int nestedScrollAxes) {
        // Ensure we react to vertical scrolling
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                               final View target, final int dxConsumed, final int dyConsumed,
                               final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            // User scrolled down and the FAB is currently visible -> hide the FAB
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            // User scrolled up and the FAB is currently not visible -> show the FAB
            child.show();
        }
    }
}

app:layout_behavior in der FloatingActionButton-Layout-XML die app:layout_behavior mit dem vollständig qualifizierten Klassennamen von ScrollAwareFABBehavior :

app:layout_behavior="com.example.app.ScrollAwareFABBehavior"

Zum Beispiel mit diesem Layout:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="6dp">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll|enterAlways"
            />

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            app:tabMode="fixed"
            android:layout_below="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:elevation="0dp"
            app:tabTextColor="#d3d3d3"
            android:minHeight="?attr/actionBarSize"
            />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:layout_behavior="com.example.app.ScrollAwareFABBehavior"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

Hier ist das Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Einstellungsverhalten von FloatingActionButton

Sie können das Verhalten der FAB in XML festlegen.

Zum Beispiel:

<android.support.design.widget.FloatingActionButton    
   app:layout_behavior=".MyBehavior" />

Oder Sie können programmgesteuert einstellen mit:

CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setBehavior(xxxx);
fab.setLayoutParams(p);


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow