FloatingActionButton-Beispiel mit Support Library

Kürzlich habe ich diese Beiträge gelesen:

Android Design Support-Bibliothek

Android Support Library, Version 22.2.0

FloatingActionButton

Aber keiner von ihnen gibt mir ein detailliertes Beispiel für das Erstellen eines neuen FloatingActionButton. So schwer zu verstehen, stelle ich diese Frage.

Kann mir jemand ein Beispiel geben?

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

BEARBEITEN

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

Fügen Sie in Ihrer build.gradleDatei 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. Um AndroidX zu verwenden, stellen Sie zunächst sicher , haben Sie Ihre aktualisierte gradle.propertiesDatei , bearbeitet , build.gradleum Satz compileSdkVersionzu 28(oder höher), und verwenden Sie die folgende Zeile anstelle der bisherigen compileein.

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

Stellen Sie als Nächstes in Ihrem themes.xmloder einem anderen styles.xmlElement sicher, dass Sie dies festlegen - es ist die Akzentfarbe Ihrer App - und die Farbe Ihres FAB, sofern Sie diese nicht überschreiben (siehe unten):

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

Im 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 den Dokumenten (Materialdokumente hier) ( setRippleColorusw.), aber eine der Anmerkungen ist:

    app:fabSize="mini"

Ein weiteres interessantes: 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 in einer "Naht" haben, die zwei Ansichten (z. B. mithilfe eines RelativeLayout) mit beispielsweise einem negativen unteren Layoutrand teilt, um den Rand zu überlappen, werden Sie ein Problem feststellen: Die Größe des FAB ist tatsächlich ganz anders auf Lutscher gegen Pre-Lutscher. Sie können dies tatsächlich im visuellen Layout-Editor von AS sehen, wenn Sie zwischen APIs wechseln - es "bläht plötzlich auf", wenn Sie zu Pre-Lollipop wechseln. Der Grund für die zusätzliche Größe scheint zu sein, dass der Schatten die Größe der Ansicht in alle Richtungen erweitert. Sie müssen dies also berücksichtigen, wenn Sie die Ränder des FAB anpassen, wenn es in der Nähe anderer Dinge liegt.

• 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, selbst nachdem die Ansicht aufgeblasen war, wie es schien. Stattdessen habe ich einen ViewTreeObserver verwendet, um die Höhe erst nach dem Anlegen 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 mir 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 die FAB auf einer „Naht“ möchten , können Sie verwenden , layout_anchorund layout_anchorGravityhier ist 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 einbinden .

Mehr:

• Google Design Support Library-Seite
• die FloatingActionButton-Dokumente
• Vortrag "Material Now" von Google I / O 2015 - Support Design Library um 17:22 Uhr vorgestellt
• Beispiel / Schaufenster der Design Support Library

Ich habe gerade einige Probleme mit FAB gefunden und möchte eine weitere Antwort verbessern.

setRippleColor-Problem

Das Problem tritt also auf, sobald Sie die Welligkeitsfarbe (FAB-Farbe auf gedrückt) programmgesteuert eingestellt haben setRippleColor. Wir haben jedoch noch eine alternative Möglichkeit, dies festzulegen, indem wir Folgendes anrufen:

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

Ihr Projekt muss folgende Struktur haben:

/res/color/fab_ripple_color.xml

Und der Code von fab_ripple_color.xmlist:

<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 zum Schluss Ihr 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 24 dp ein:

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

Konstruktionsanleitungen für FloatingActionButton

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

• Durch diese Attribute einstellen, müssen Sie nicht auf Set layout_marginTopund layout_marginRightwieder (nur auf Pre-Lollipop). Android platziert es automatisch auf der rechten Corned-Seite des Bildschirms, was dem normalen FAB in Android Lollipop entspricht.

      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"

Oder Sie können dies verwenden in CoordinatorLayout:

        android:layout_gravity="end|bottom"

• Laut dieser Anleitung von Google benötigen Sie 6dp elevationund 12dp .pressedTranslationZ

FloatingActionButtonerstreckt sich ImageView. Es ist also so einfach wie das Einfügen eines ImageViewin 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" wird als Problemumgehung für Höhenprobleme hinzugefügt.

für AndroidX wie verwenden

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

Wenn Sie bereits alle Bibliotheken hinzugefügt haben und es immer noch nicht funktioniert, verwenden Sie:

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

anstatt:

<android.support.design.widget.FloatingActionButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:srcCompat="@drawable/ic_add"
 />

Und alles wird gut funktionieren :)