it-swarm.com.de

Android L - Floating Action Button (FAB)

Hat Google bereits einen definierten Stil oder eine Komponente für diese neue kreisförmige FAB-Schaltfläche veröffentlicht oder sollte ich das Design selbst implementieren?

Die Schaltfläche wird hier beschrieben: Google Design | Floating Action Buttons

EDIT (05/2015): Aktivieren Sie Lukas 'Antwort / Gabrieles Antwort und zeigen Sie, wie Sie diese auf einfache Weise mit der Design Support Library implementieren können.

47
yannickpulver

[~ # ~] Update [~ # ~] : Es gibt jetzt ein offizielles Widget für FAB: FloatingActionButton. Ausführliche Informationen finden Sie in der Antwort von Gabriele Mariotti.

Laut Adam Powell und Chet Haase haben sie kein Widget für die FAB-Schaltfläche erstellt, da diese Komponente sehr einfach zu reproduzieren ist.

Es gab eine Frage in der Rede von Google IO 2014 "Google I/O 2014 - Materialwissenschaft: Entwicklung Android Anwendungen mit Materialdesign") am Ende von In der Rede (gegen 37:50 Uhr) gab es genau diese Frage, die Sie hier hören können: https://www.youtube.com/watch?v=lSH9aKXjgt8#t=228

Chet Haase sagt, dass es ein RoundedBitmapDrawable gibt (ich habe nicht überprüft, ob das der Name ist), das bereits die Aufgabe übernehmen sollte, die Gliederung zu definieren.

Sie können dies jedoch mit Ihrem eigenen Zeichenprogramm tun, eine Höhe festlegen und programmgesteuert einen Kreisumriss definieren.

Dies sollte Ihnen den runden Knopf mit Schatten auf L-Freigabe geben. Aber ich denke, Sie müssen den Shadow Pre-L selbst bauen.

Ich sollte den Code für CardView überprüfen, um zu sehen, wie er den Schatten vor L reproduziert. Ich werde das wahrscheinlich tun, aber ich habe jetzt keine Zeit. Wenn niemand mit den Details vorbeikommt, mache ich das, nachdem ich die Zeit gefunden habe, es zu überprüfen.

BEARBEITEN:

Gabriele Mariotti (siehe seine Antwort unten, danke) hat einen Code hinzugefügt, der Ihnen zeigt, wie es geht.

Dank @shomeser-Kommentaren hat er eine Bibliothek geschrieben, um den Fab-Button zu erstellen:

https://github.com/shamanland/floating-action-button

Um es zu benutzen:

dependencies {
    compile 'com.shamanland:fab:0.0.3'
}

Sie können auch seine Antwort auf eine andere Frage lesen: Wie kann ich den neuen "Floating Action Button" zwischen zwei Widgets/Layouts einfügen?

23
Daniele Segato

AKTUALISIERT: 16/08/2019 mit den offiziellen Materialkomponenten für Android Bibliothek

Mit dem neuen Materialkomponenten für Android addieren Sie zu Ihrem build.gradle:

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

Dann fügen Sie in Ihrem Layout hinzu:

<com.google.Android.material.floatingactionbutton.FloatingActionButton
      Android:id="@+id/floating_action_button"
      Android:layout_width="wrap_content"
      Android:layout_height="wrap_content"
      Android:layout_gravity="bottom|right"
      Android:layout_margin="16dp"
      app:srcCompat="@drawable/ic_plus_24"/>

Und benutze es:

FloatingActionButton floatingActionButton =
    (FloatingActionButton) findViewById(R.id.floating_action_button);    
floatingActionButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        // Handle the click.
    }
});

Wenn Sie ein Materialdesign wie Theme.MaterialComponents Verwenden, übernimmt Ihr FAB den Materialstil. Ansonsten einfach den Stil @style/Widget.MaterialComponents.FloatingActionButton Anwenden.

<com.google.Android.material.floatingactionbutton.FloatingActionButton
    ....
    style="@style/Widget.MaterialComponents.FloatingActionButton"
    ..../>

Mehr Infos hier .

AKTUALISIERT: 30/05/2015 mit der offiziellen Design Support Library

Es gibt jetzt ein offizielles Widget.

Fügen Sie diese Abhängigkeit einfach zu Ihrem build.gradle

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

Fügen Sie diese Ansicht Ihrem Layout hinzu:

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="end|bottom"
    Android:src="@drawable/ic_done" />

Und benutze es:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               //TODO
            }
        });

Dokumentation:

AKTUALISIERT: 12.02.2014 mit Android 5 Code

Sie können auch einen stateListAnimator zu Ihrem Button hinzufügen:

<Button
 Android:stateListAnimator="@anim/anim"
/>

Wo ist anim.xml:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:state_enabled="true"
        Android:state_pressed="true">
        <objectAnimator
            Android:duration="@Android:integer/config_shortAnimTime"
            Android:propertyName="translationZ"
            Android:valueFrom="@dimen/button_elevation"
            Android:valueTo="@dimen/button_press_elevation"
            Android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            Android:duration="@Android:integer/config_shortAnimTime"
            Android:propertyName="translationZ"
            Android:valueFrom="@dimen/button_press_elevation"
            Android:valueTo="@dimen/button_elevation"
            Android:valueType="floatType" />
    </item>
</selector>

Dimens.xml ist

<resources>
    <dimen name="fab_size">56dp</dimen>

    <dimen name="button_elevation">2dp</dimen>
    <dimen name="button_press_elevation">4dp</dimen>
</resources>

Überprüfen Sie die Antwort von Daniele.

Über Outline von Daniele erwähnt. Fügen Sie das Höhenattribut zu Ihrem Button hinzu und setzen Sie die Kontur per Code :

   <ImageButton
        Android:background="@drawable/ripple"
        Android:stateListAnimator="@anim/anim"
        Android:src="@drawable/ic_action_add"
        Android:elevation="4dp"
        />

Über Gliederung:

public class MainActivity extends Activity {

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

        //Outline: OLD METHOD IN L-PREVIEW
        //int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
        //Outline outline = new Outline();
        //outline.setOval(0, 0, size, size);
        //findViewById(R.id.fab).setOutline(outline);

        Button fab = (Button) findViewById(R.id.fab);
        ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
           @Override
           public void getOutline(View view, Outline outline) {
              // Or read size directly from the view's width/height
              int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
              outline.setOval(0, 0, size, size);
           }
        };
        fab.setOutlineProvider(viewOutlineProvider);
    }

}

enter image description here

57

Google stellt jetzt eine offizielle Bibliothek mit dem Namen "Design Library" bereit, die den Fab-Button enthält. ). Fügen Sie einfach die folgende Gradle-Abhängigkeit hinzu:

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

Anschließend können Sie den Fab-Button wie folgt verwenden:

<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"/>

Weitere Informationen finden Sie in ihrer Ankündigung

http://Android-developers.blogspot.ch/2015/05/Android-design-support-library.html

oder auf der Javadoc-Seite

http://developer.Android.com/reference/Android/support/design/widget/FloatingActionButton.html

20
Lukas

Da die Labels FAB-Funktion (wie in Evernote- oder Inbox-Apps) zu dieser fantastischen Funktion hinzugefügt wurde Bibliothek können Sie sie gerne verwenden:

Gradle-Abhängigkeit:

    compile 'com.getbase:floatingactionbutton:1.3.0'

Layout.xml:

     <com.getbase.floatingactionbutton.FloatingActionsMenu
        Android:id="@+id/multiple_actions"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"
        Android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_labelStyle="@style/menu_labels_style"
        Android:layout_marginBottom="16dp"
        Android:layout_marginRight="16dp"
        Android:layout_marginEnd="16dp">

        <com.getbase.floatingactionbutton.FloatingActionButton
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action A"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action B"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

menu_labels_style.xml:

    <style name="menu_labels_style">
        <item name="Android:background">@drawable/fab_label_background</item>
        <item name="Android:textColor">@color/white</item>
    </style>

fab_label_background.xml:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <solid Android:color="@color/black_semi_transparent"/>
    <padding
        Android:left="16dp"
        Android:top="4dp"
        Android:right="16dp"
        Android:bottom="4dp"/>
    <corners
        Android:radius="2dp"/>
</shape>

Genießen!

7
Roman