Android L - 浮动操作按钮(FAB)

Question

Google是否已经为这个新的循环FAB按钮发布了已定义的样式或组件,还是应该自行实现该设计？

按钮在此处描述:Google Design | 浮动动作按钮

编辑(05/2015):检查Lukas的回答/Gabriele的答案显示了使用设计支持库实现它的简单方法.

Answer 1

更新时间:2015年5月30日,官方设计支持库

现在有一个官方小部件.

只需将此依赖项添加到您的 build.gradle

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

将此视图添加到您的布局:

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

并使用它:

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

文档:

• Android文档.

更新时间:2014年12月2日,Android 5代码

您还可以向Button 添加和stateListAnimator:

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

anim.xml在哪里:

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

Dimens.xml是

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

检查Daniele的答案.

关于Daniele提到的大纲.将elevation属性添加到Button,并通过代码设置Outline:

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

关于大纲:

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

Answer 2

更新:FAB现在有一个官方小部件:FloatingActionButton,请参阅Gabriele Mariotti回复以获取全部信息.

根据Adam Powell和Chet Haase的说法,他们没有为FAB按钮创建一个小部件,因为它是一个非常容易重现的组件.

Google IO 2014演讲中有一个问题"Google I/O 2014 - 材料科学:开发具有材料设计的Android应用程序",在演讲结束时(大约37:50)确实存在这个问题,您可以听到它在这里:https: //www.youtube.com/watch？v = lSH9aKXjgt8#t = 2280

Chet Haase说有一个RoundedBitmapDrawable(我没有检查这是否是名字)应该已经完成​​了定义Outline的工作.

但是你可以使用自己的drawable来实现它,为它设置Elevation并以编程方式定义一个Circle Outline.

这应该会给你带有L版本阴影的圆形按钮.但我认为你必须自己构建Shadow pre-L.

我应该检查CardView的代码,看看它如何重现阴影pre-L.我可能会这样做,但现在没有时间.如果没有人弹出详细信息,我会在找到时间后再进行检查.

编辑:

Gabriele Mariotti(见下面的答案,谢谢)添加了一些代码来告诉你如何做到这一点.

感谢@shomeser评论,他写了一个库来制作fab按钮:

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

要使用它:

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

您还可以阅读他对另一个问题的回答:如何在两个小部件/布局之间添加新的"浮动操作按钮"

Answer 3

Google现在提供了一个名为设计库的官方库,其中包含Fab Button.只需添加以下Gradle依赖项:

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

之后你可以像这样使用fab按钮:

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

更多信息可以在他们的公告中找到

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

或者在javadoc页面上

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

Answer 4

由于标签FAB功能(如在Evernote或Inbox应用程序中)被添加到这个很棒的库中,可以随意使用它:

Gradle依赖:

    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>

请享用!