android - 带有支持库的 FloatingActionButton 示例

Question

最近，我阅读了这些帖子：

• Android 设计支持库
• Android 支持库，修订版 22.2.0
• 浮动动作按钮

但是，他们都没有给我一个关于创建一个新的FloatingActionButton. 这很难理解，这就是我问这个问题的原因。

谁能给我一个例子吗？

编辑

我刚刚在（FAB）上发现了一些问题FloatingActionButton，我想改进另一个答案。请看下面我的回答。

Answer 1

因此，在您的build.gradle文件中，添加以下内容：

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

AndroidX 注意： Google 正在引入新的AndroidX 扩展库来替换旧的支持库。要使用 AndroidX，首先确保您已更新gradle.properties文件，编辑build.gradle为设置compileSdkVersion为28（或更高），并使用以下行而不是前compile一行。

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

接下来，在您的themes.xmlorstyles.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 材质库，则可以改用：

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

您可以在文档 （此处的材料文档）（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();
        }
    });

观察：

• 如果您有一个位于“接缝”上的按钮之一，它拆分两个视图（例如，使用 RelativeLayout），例如，负底部布局边距与边框重叠，您会注意到一个问题：FAB 的大小实际上是棒棒糖与前棒棒糖非常不同。当您在 API 之间切换时，您实际上可以在 AS 的可视化布局编辑器中看到这一点——当您切换到 pre-lollipop 时，它会突然“膨胀”。额外尺寸的原因似乎是阴影在各个方向上扩大了视图的尺寸。因此，当您调整 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 的高度，除以 2 并将其用作边距偏移，以编程方式将 FAB 放置在 RelativeLayout 中两个区域之间的“接缝”上。但是 myFab.getHeight() 似乎返回了零，即使在视图被夸大之后也是如此。相反，我使用 ViewTreeObserver 仅在布局后获取高度，然后设置位置。请在此处查看此提示 。它看起来像这样：

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

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

• 看来您可以通过降低高度来缩小按钮的阴影空间。

• 如果您想在“接缝”上使用 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出现时，您可以通过将按钮包装在CoordinatorLayout中来自动让按钮跳出。

更多的：

• Google 的设计支持库页面
• FloatingActionButton 文档
• Google I/O 2015 的“Material Now”演讲- 17 分22 秒介绍的支持设计库
• 设计支持库示例/展示

Answer 2

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

---

setRippleColor 问题

因此，一旦您通过setRippleColor. 但是，我们还有另一种设置方法，即调用：

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再次设置（仅在棒棒糖之前）。Android 会自动将其放置在屏幕的右侧，这与 Android Lollipop 中的普通 FAB 相同。

      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
  

或者，您可以在以下位置使用它CoordinatorLayout：

        android:layout_gravity="end|bottom"

• 根据谷歌的这份指南，你需要有 6dpelevation和 12dp 。pressedTranslationZ

Answer 3

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

一切都会正常工作:)