Die Anleitung zu Android FloatingActionButton

View more Tutorials:

1- Android FloatingActionButton

FloatingActionButton ist ein spezielle Button, die oft als Kreisform mit einem Symbol in der Mitte angezeigt wird. Es schwebt auf der Oberfläche der Interface, damit der Benutzer darauf klicken kann, um eine Aktion auszuführen.
Der FloatingActionButton wird für verschiedene Kontexte geeignet angezeigt.
FloatingActionButton ist eine Unterklasse von  ImageButton und ein Nachkomme von  ImageView, sodass Sie das Symbol dafür über das Attribut  android:srcCompat festlegen können.
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    app:srcCompat="@drawable/icon_new" ... />
Die Bibliothek  FloatingActionButton ist im  Android SDK nicht verfügbar. Sie müssen sie daher über die  Palette des Design-Fensters in Ihrem Projekt installieren oder die Bibliothek manuell zum Projekt hinzufügen.
Nach der Installation über  Palette wurde die Bibliothek in  build.gradle (Module: app) ​​​​​​​deklariert.

implementation 'com.google.android.material:material:1.0.0'
Schauen Sie sich die neueste Version dieser Bibliothek in   mvnrepository.com:

2- FAB und CoordinatorLayout

FloatingActionButton (FAB) wird normalerweise in einem  CoordinatorLayout plaziert, in dem FloatingActionButton entsprechend dem Kontext ausgeblendet/angezeigt werden und der Übergang der   View innerhalb des  CoordinatorLayout erfolgt. Dies verbessert die Benutzererfahrung.
In diesem Artikel erwähne ich nur die Funktionen von  FAB anstelle seiner Beziehung zu  CoordinatorLayout. Wenn Sie die Funktionen von  FAB verstehen, können Sie sie mit einem  CoordinatorLayout. Und der folgende Artikel wird Ihnen nützlich sein:
  • TODO Link!

3- Die Situationen benutzen FloatingActionButton

Normalerweise hängt es vom Kontext ab,  FloatingActionButton (FAB) zu verwenden, und  FAB ist die primäre Aktion, die dem Benutzer gegeben wird. Sie befinden sich beispielweise auf dem Bildschirm, um eine Email-Liste anzuzeigen. Ein  FAB kann angezeigt werden, damit der Benutzer eine neue Email erstellen kann (wenn angenommen wird, dass diese Aktion oft vom Benutzer verwendet wird) ...

4- ZUm Beispeil: FAB và ConstraintLayout

Wie oben erwähnt, sollte  FloatingActionButton (FAB) in einem  CoordinatorLayout platziert werden, um die Benutzererfahrung zu verbessern. In einigen einfachen Anwendungen ist  CoordinatorLayout jedoch nicht erforderlich. In diesen Beispiel füge ich einen  FloatingActionButton (fab) in ein  ConstraintLayout ein und verankere ihn in der unteren rechten Ecke des  Layouts. Wenn der Benutzer auf diese Button klickt, werden drei weitere Buttons ( fab1, fab2, fab3) neben der  fab angezeigt oder aus den Augen des Benutzer entfernt.  der Benutzer auf diese Schaltfläche klickt, werden drei weitere Schaltflächen ( fab1, fab2, fab3) neben der Fab angezeigt oder aus den Augen des Benutzers entfernt.
OK, Auf  Android Studio erstellen Sie ein neues Projekt:
  • File > New > New Project > Empty Activity
    • Name: SimpleFABExample
    • Package name: org.o7planning.simplefabexample
    • Language: Java
Der Komponent  FloatingActionButton ist in  SDK vom  Android nicht verfügbar. Deshalb sollen Sie sie in Ihrem Projekt installieren zu verwenden.
Oder deklarieren Sie die Bibliothek mit  FAB in die Datei  build.gradle (Module: app).
....
dependencies {    
    ...    
   implementation 'com.google.android.material:material:1.0.0
}


 
Kopieren Sie einige Bild-Datein in dem Verzeichnis  "drawable":
icon_new.png icon_mail.png icon_camera.png icon_microphone.png
Zunächst entwerfen Sie die Interface der Anwendung:
Richten Sie die Position von  FAB in die Interface ein:
Legen Sie  ID für  FAB ​​​​​​​fest:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="24dp"
        android:clickable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/icon_new" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="24dp"
        android:clickable="true"
        app:layout_constraintBottom_toTopOf="@+id/fab"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/icon_mail" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="20dp"
        android:clickable="true"
        app:layout_constraintBottom_toTopOf="@+id/fab1"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/icon_camera" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="24dp"
        android:clickable="true"
        app:layout_constraintBottom_toTopOf="@+id/fab2"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/icon_microphone" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.simplefabexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;

import com.google.android.material.floatingactionbutton.FloatingActionButton;

public class MainActivity extends AppCompatActivity {

    private FloatingActionButton fab;
    private FloatingActionButton fab1;
    private FloatingActionButton fab2;
    private FloatingActionButton fab3;

    private boolean isFABOpen;

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

        this.fab = (FloatingActionButton) findViewById(R.id.fab);
        this.fab1 = (FloatingActionButton) findViewById(R.id.fab1);
        this.fab2 = (FloatingActionButton) findViewById(R.id.fab2);
        this.fab3 = (FloatingActionButton) findViewById(R.id.fab3);

        this.fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(!isFABOpen){
                    showFABMenu();
                } else{
                    closeFABMenu();
                }
            }
        });
    }

    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);
    }

}
dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="standard_55">255dp</dimen>
    <dimen name="standard_105">2105dp</dimen>
    <dimen name="standard_155">2155dp</dimen>
</resources>

View more Tutorials: