Question

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

此处描述了按钮：Google Design | Floating Action Buttons

编辑（05/2015）：检查Lukas' answer / Gabriele's answer，了解使用设计支持库实现它的简便方法。

Answer 1

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

现在有一个官方小部件。

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

即可

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

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

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

并使用它：

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

文档：

Android documentation。

更新时间：2014年12月2日，Android 5代码

您还可以在按钮中添加 stateListAnimator ：

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

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是

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

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

查看Daniele的答案。

关于Daniele提到的大纲。将提升属性添加到Button，并通过代码设置提纲：

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

关于大纲：

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

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并以编程方式定义圆形轮廓。

这应该会给你带有L版本阴影的圆形按钮。但我认为你必须自己制作暗影前L。

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

编辑：

Gabriele Mariotti（请参阅下面的答案，谢谢）添加了一些代码，告诉您如何操作。

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

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

使用它：

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

您还可以阅读他对另一个问题的回答：How can I add the new "Floating Action Button" between two widgets/layouts

Answer 3

Google现在提供了一个名为设计库的官方库，包含Fab按钮。只需添加以下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应用程序中）添加到这个真棒library随意使用它：

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>

享受！

Android L - 浮动操作按钮（FAB）

4 个答案:

文档：