带有支持库的 FloatingActionButton 示例

Question

最近，我看了这些帖子：

但是，其中 none 为我提供了有关创建新 FloatingActionButton 的详细示例。太难懂了，所以才问这个问题。

谁能给我举个例子吗？

编辑

我刚刚在 FloatingActionButton (FAB) 上发现了一些问题，我想改进另一个答案。请参阅下面我的回答。

Answer 1

FloatingActionButton 扩展 ImageView。所以，就像在布局中引入 ImageView 一样简单。这是一个 XML 示例。

<android.support.design.widget.FloatingActionButton   xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/somedrawable"
    android:layout_gravity="right|bottom"
    app:borderWidth="0dp"
    app:rippleColor="#ffffff"/>

app:borderWidth="0dp" 添加为海拔问题的解决方法。

Answer 2

所以在你的 build.gradle 文件中，添加：

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

AndroidX 注： Google 正在引入新的 AndroidX extension libraries to replace the older Support Libraries. To use AndroidX, first make sure you've updated your gradle.properties file，编辑 build.gradle 将 compileSdkVersion 设置为 28（或更高版本），并使用以下行代替之前的 compile 行。

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

接下来，在您的 themes.xml 或 styles.xml 或其他任何内容中，确保您设置了这个 - 这是您应用的强调色 - 以及您的 FAB 的颜色，除非您覆盖它（见下文） :

        <item name="colorAccent">@color/floating_action_button_color</item>

布局中的XML:

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <android.support.design.widget.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

或者，如果您使用的是上面的 AndroidX material 库，则应改为使用：

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:srcCompat="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

您可以在 docs (material docs here)（setRippleColor 等）中看到更多选项，但注意事项之一是：

    app:fabSize="mini"

另一个有趣的——要改变一个 FAB 的背景颜色，添加：

    app:backgroundTint="#FF0000"

（比如把它改成红色）到上面的XML。

无论如何，在代码中，在 Activity/Fragment 的视图被膨胀后....

    FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
    myFab.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            doMyThing();
        }
    });

观察：

如果您有一个 "seam" 拆分两个视图的按钮（例如，使用 RelativeLayout）具有负底布局边距与边框重叠，您会注意到一个问题： FAB 的尺寸在棒棒糖和棒棒糖上实际上非常不同前棒棒糖。你实际上可以在 AS 的可视化布局编辑器中看到这一点当你在 API 之间切换时——它突然 "puffs out" 当你切换到前棒棒糖。额外尺寸的原因似乎是阴影在各个方向扩展视图的大小。所以你必须如果您在调整 FAB 的边距时考虑到这一点，如果它接近其他东西。

这是一种删除或如果填充太多，请更改填充：

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
    RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
    p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
    myFab.setLayoutParams(p);
}

此外，我打算以编程方式将 FAB 放在 "seam" 通过获取 FAB 的高度，在 RelativeLayout 的两个区域之间，除以二，并将其用作边距偏移量。但 myFab.getHeight() 返回零，即使在视图膨胀之后，它似乎。相反，我使用 ViewTreeObserver 仅获取高度布置好后，然后设置位置。看到这个提示 here。它看起来像这样：

    ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
    if (viewTreeObserver.isAlive()) {
        viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                    closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
                // not sure the above is equivalent, but that's beside the point for this example...
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
                params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
                closeButton.setLayoutParams(params);
            }
        });
    }

不确定这是否是正确的方法，但它似乎有效。

看来你可以让按钮的阴影-space变小降低海拔。

如果你想要 "seam" 上的 FAB，你可以使用 layout_anchor 和 layout_anchorGravity 这里是一个例子：

<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/ic_discuss"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"/>

请记住，您可以在 Snackbar comes up by wrapping it in a CoordinatorLayout 时自动让按钮跳开。

更多：

Google's Design Support Library Page
the FloatingActionButton docs
"Material Now" talk from Google I/O 2015 - Support Design Library introduced at 17m22s
Design Support Library sample/showcase

Answer 3

我刚刚在 FAB 上发现了一些问题，我想补充另一个答案。

设置波纹颜色问题

因此，一旦您通过 setRippleColor 以编程方式设置波纹颜色（按下时的 FAB 颜色），问题就会出现。但是，我们还有另一种方法来设置它，即调用：

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color);
fab.setBackgroundTintList(rippleColor);

您的项目需要具有以下结构：

/res/color/fab_ripple_color.xml

来自 fab_ripple_color.xml 的代码是：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/fab_color_pressed" />
    <item android:state_focused="true" android:color="@color/fab_color_pressed" />
    <item android:color="@color/fab_color_normal"/>
</selector>

最后，稍微改变你的FAB：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_add"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    app:fabSize="normal"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:rippleColor="@android:color/transparent"/> <!-- set to transparent color -->

对于 API 级别 21 及更高级别，将右边距和底部边距设置为 24dp：

...
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp" />

FloatingActionButton 设计指南

正如您在上面的 FAB xml 代码中看到的那样，我设置了：

        ...
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        ...

通过设置这些属性，您不需要再次设置layout_marginTop和layout_marginRight（仅适用于pre-Lollipop）。 Android 会自动将其放置在屏幕的右侧，与 Android Lollipop 中的普通 FAB 相同。
```
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
```

或者，您可以在 CoordinatorLayout:

中使用它

        android:layout_gravity="end|bottom"

根据 Google.

this guide

elevation

pressedTranslationZ

Answer 4

对于 AndroidX 使用喜欢

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" />

Answer 5

如果您已经添加了所有库，但它仍然不起作用使用：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" 
/>

而不是：

<android.support.design.widget.FloatingActionButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:srcCompat="@drawable/ic_add"
 />

一切都会正常进行:)

带有支持库的 FloatingActionButton 示例

FloatingActionButton example with Support Library

android

android-support-library

floating-action-button

android-design-library

编辑

设置波纹颜色问题

FloatingActionButton 设计指南