安卓L - 悬浮操作按钮（FAB）

Question

安卓L - 悬浮操作按钮（FAB）

javaandroidandroid-5.0-lollipopmaterial-designandroid-design-library

49

谷歌已经发布了新的圆形浮动操作按钮的定义样式或组件吗？还是我需要自己实现这个设计？

该按钮在此处描述：Google 设计 | 浮动操作按钮

编辑（05/2015）：请查看Lukas 的答案/Gabriele 的答案，介绍了使用设计支持库轻松实现它的方法。

- yannickpulver

我该如何在这个按钮上添加材质选择效果？ - Sandra

1

@Sandra 当将背景属性设置为“ripple”类型的可绘制对象时，此效果将自动添加。 - yannickpulver

啊哈，我不知道，谢谢。那么ripple.xml和drawables应该在哪里创建呢？ - Sandra

好的，我已经让它工作了，谢谢你指引我 :) - Sandra

没有setOutline()这样的方法... - Odaym

4个回答

24

更新: 现在有一个官方的小部件可用于 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（我没有检查它是否是这个名称）可以完成定义轮廓的工作。

但是你可以使用自己的 drawable，将其设置为 Elevation，并以编程方式定义一个圆形轮廓。

这应该会给你带来 L 版本上带阴影的圆形按钮。但我认为你需要在早期版本上自行构建阴影。

我应该检查 CardView 的代码，看看它如何在早期版本上复制阴影。我可能会这样做，但现在没有时间。如果没有人详细说明，我找到时间去检查它之后会做的。

编辑:

Gabriele Mariotti（请参见他下面的答案，谢谢）添加了一些代码以显示如何执行此操作。

多亏了 @shomeser 的评论，他编写了一个库来制作 fab 按钮：

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

要使用它:

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

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

- Daniele Segato

2

虽然这个小部件非常简单，但我已经发布了包含此小部件的库：com.shamanland:fab:0.0.3，请查看我的帖子：https://dev59.com/L2Af5IYBdhLWcg3wnDwI#25098626 - Oleksii K.

21

谷歌现在提供了一个官方库，名为设计库，其中包含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

- Lukas

7

自从标签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>

享受！

- Roman

1

太棒了 :) 谢谢分享！ - Kuba Spatny

@Roman 我只使用这个库。但是，我无法通过你在这里提供的方法获得涟漪效果。请给出一些建议。 - hellodear

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriele Mariotti · Accepted Answer

更新时间：2021年8月26日

使用Material components for android可以添加到您的build.gradle中：

implementation 'com.google.android.material:material:1.x.x'

然后在你的布局中加入：

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

如果您正在使用 Theme.MaterialComponents.* 主题，您的浮动操作按钮（FAB）将继承 Material 风格。否则，请只应用样式 @style/Widget.MaterialComponents.FloatingActionButton

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

更多信息在此处。

使用Jetpack Compose 1.0.x：

//Simple FAB
FloatingActionButton(onClick = { /* .. */ } ) {
    Icon(Icons.Filled.Add,"contentDescription")
}

//FAB custom color
FloatingActionButton(
    onClick = { /* .. */ },
    backgroundColor = Color.Blue,
    contentColor = Color.White
){
    Icon(Icons.Filled.Add,"contentDescription")
}

更新：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 文档.

更新于：2014年2月12日，附有 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提到的Outline。将elevation属性添加到您的按钮，并通过代码设置Outline：

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

输入图像描述