webentwicklung-frage-antwort-db.com.de

FloatingActionButton Beispiel mit Support Library

Kürzlich habe ich diese Beiträge gelesen:

Android Design Support Library

Android Support Library, Version 22.2.

FloatingActionButton

Aber keines von ihnen gibt mir ein detailliertes Beispiel zum Erstellen eines neuen FloatingActionButton. So schwer zu verstehen, ich stelle diese Frage.

Kann mir jemand ein Beispiel geben?

Jede Hilfe wird sehr geschätzt. Danke im Voraus.

[~ # ~] edit [~ # ~]

Ich habe gerade einige Probleme bei FloatingActionButton (FAB) gefunden und möchte eine andere Antwort verbessern. Siehe meine Antwort unten.

125
Anggrayudi H

Fügen Sie also in Ihrer build.gradle - Datei Folgendes hinzu:

compile 'com.Android.support:design:27.1.1'

AndroidX Hinweis: Google führt neue AndroidX-Erweiterungsbibliotheken ein, um die älteren Support-Bibliotheken zu ersetzen. Stellen Sie zur Verwendung von AndroidX zunächst sicher, dass Sie haben Ihre gradle.properties - Datei aktualisiert , build.gradle Bearbeitet und compileSdkVersion auf 28 Gesetzt haben ( oder höher), und verwenden Sie die folgende Zeile anstelle der vorherigen compile.

implementation 'com.google.Android.material:material:1.0.0'

Stellen Sie als Nächstes in Ihrem themes.xml Oder styles.xml Oder was auch immer sicher, dass Sie dies einstellen - es ist die Akzentfarbe Ihrer App - und die Farbe Ihres FAB, es sei denn, Sie überschreiben es (siehe unten):

        <item name="colorAccent">@color/floating_action_button_color</item>

In der XML des Layouts:

<RelativeLayout
 ...
 xmlns:app="http://schemas.Android.com/apk/res-auto">

       <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/myFAB"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:src="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

Wenn Sie die oben genannte AndroidX-Materialbibliothek verwenden, verwenden Sie stattdessen Folgendes:

<RelativeLayout
 ...
 xmlns:app="http://schemas.Android.com/apk/res-auto">

       <com.google.Android.material.floatingactionbutton.FloatingActionButton
            Android:id="@+id/myFAB"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:srcCompat="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

Weitere Optionen finden Sie in docs(wichtige Dokumente hier) (setRippleColor, usw.). Beachten Sie jedoch Folgendes:

    app:fabSize="mini"

Ein weiteres interessantes Beispiel: Um die Hintergrundfarbe von nur einem FAB zu ändern, fügen Sie Folgendes hinzu:

    app:backgroundTint="#FF0000"

(zum Beispiel, um es in rot zu ändern) in das obige XML.

Wie auch immer, im Code, nachdem die Ansicht der Aktivität/des Fragments aufgeblasen wurde ....

    FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
    myFab.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            doMyThing();
        }
    });

Beobachtungen:

  • Wenn Sie eine dieser Schaltflächen auf einer "Naht" haben, die zwei Ansichten aufteilt (z. B. mit einem RelativeLayout), mit einem negativen unteren Layoutrand zum Überlappen des Rahmens, werden Sie ein Problem bemerken: Die Größe des FAB ist tatsächlich sehr anders auf Lollipop vs. Pre-Lollipop. Sie können dies tatsächlich im visuellen Layout-Editor von AS sehen, wenn Sie zwischen den APIs wechseln - es "bläht" plötzlich auf, wenn Sie zu Pre-Lollipop wechseln. Der Grund für die zusätzliche Größe scheint darin zu liegen, dass der Schatten die Größe der Ansicht in alle Richtungen vergrößert. Sie müssen dies berücksichtigen, wenn Sie die Ränder des FAB anpassen, wenn es in der Nähe von anderen Dingen ist.
  • Hier ist eine Möglichkeit, die Polsterung zu entfernen oder zu ändern, wenn zu viel vorhanden ist:

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Lollipop) {
        RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
        p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
        myFab.setLayoutParams(p);
    }
    
  • Außerdem wollte ich das FAB programmgesteuert auf der "Naht" zwischen zwei Bereichen in einem RelativeLayout platzieren, indem ich die Höhe des FAB ergriff, durch zwei teilte und diese als Randversatz verwendete. Aber myFab.getHeight () gab Null zurück, auch nachdem die Ansicht aufgeblasen war. Stattdessen habe ich einen ViewTreeObserver verwendet, um die Höhe erst nach dem Layout zu ermitteln und dann die Position festzulegen. Siehe diesen Tipp hier . Es sah so aus:

        ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
        if (viewTreeObserver.isAlive()) {
            viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                        closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                    } else {
                        closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    }
                    // not sure the above is equivalent, but that's beside the point for this example...
                    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
                    params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
                    closeButton.setLayoutParams(params);
                }
            });
        }
    

    Ich bin nicht sicher, ob dies der richtige Weg ist, aber es scheint zu funktionieren.

  • Es scheint, dass Sie den Schattenraum der Schaltfläche verkleinern können, indem Sie die Höhe verringern.
  • Wenn Sie den FAB auf einer "Naht" haben möchten, können Sie layout_anchor Und layout_anchorGravity Verwenden. Hier ein Beispiel:

    <Android.support.design.widget.FloatingActionButton
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        Android:src="@drawable/ic_discuss"
        Android:layout_margin="@dimen/fab_margin"
        Android:clickable="true"/>
    

Denken Sie daran, dass Sie die Schaltfläche automatisch aus dem Weg springen lassen können, wenn eine Snackbar angezeigt wird, indem Sie sie in ein CoordinatorLayout einwickeln.

Mehr:

267
fattire

Ich habe gerade einige Probleme bei FAB gefunden und möchte eine andere Antwort verbessern.


setRippleColor Problem

Das Problem tritt also auf, wenn Sie die Ripple-Farbe (FAB-Farbe bei gedrückter Taste) programmgesteuert über setRippleColor einstellen. Wir haben jedoch noch eine alternative Möglichkeit, dies festzulegen, d. H. Durch Aufrufen von:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color);
fab.setBackgroundTintList(rippleColor);

Ihr Projekt muss diese Struktur haben:

/res/color/fab_ripple_color.xml

enter image description here

Und der Code von fab_ripple_color.xml Ist:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:color="@color/fab_color_pressed" />
    <item Android:state_focused="true" Android:color="@color/fab_color_pressed" />
    <item Android:color="@color/fab_color_normal"/>
</selector>

Ändern Sie schließlich Ihre FAB leicht:

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/ic_action_add"
    Android:layout_alignParentBottom="true"
    Android:layout_alignParentRight="true"
    app:fabSize="normal"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:rippleColor="@Android:color/transparent"/> <!-- set to transparent color -->

Stellen Sie für API-Level 21 und höher den Rand rechts und unten auf 24dp ein:

...
Android:layout_marginRight="24dp"
Android:layout_marginBottom="24dp" />

FloatingActionButton-Designleitfäden

Wie Sie oben in meinem FAB-XML-Code sehen können, habe ich Folgendes festgelegt:

        ...
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        ...
  • Wenn Sie diese Attribute festlegen, müssen Sie layout_marginTop Und layout_marginRight Nicht erneut festlegen (nur vor Lollipop). Android platziert es automatisch auf der rechten Seite des Bildschirms. Dies entspricht dem normalen FAB in Android Lollipop.

        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"
    

Oder Sie können dies in CoordinatorLayout verwenden:

        Android:layout_gravity="end|bottom"
  • Sie müssen 6dp elevation und 12dp pressedTranslationZ haben, laut diese Anleitung von Google.

FAB rules

48
Anggrayudi H

FloatingActionButton erweitert ImageView. Es ist also so einfach wie das Einfügen eines ImageView in Ihr Layout. Hier ist ein XML-Beispiel.

<Android.support.design.widget.FloatingActionButton   xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/somedrawable"
    Android:layout_gravity="right|bottom"
    app:borderWidth="0dp"
    app:rippleColor="#ffffff"/>

app:borderWidth="0dp" wurde als Problemumgehung für Höhenprobleme hinzugefügt.

12
siriscac

für AndroidX verwenden wie

<com.google.Android.material.floatingactionbutton.FloatingActionButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" />
3
Dan Alboteanu