如何改变android上浮动动作按钮（FAB）的形状？

Question

在我们的android应用程序中，我们需要创建一个浮动操作按钮，它不是默认的圆形，而是一个带有三个圆角的正方形。fab如下图所示：

我设法创建了这样一个表单，但不知道如何将其应用于我的fab，或者是否可能。形状的xml文件如下所示：

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
    <solid android:color="@color/red" />
    <corners
      android:topLeftRadius="90dp"
      android:topRightRadius="90dp"
      android:bottomRightRadius="90dp"/>
   </shape>

我试图改变表格

android:src="@drawable/my_shape"

但这只会更改我的按钮内的图标。我想我需要扩展FloatingActionButton，但我不知道如何扩展。

有办法改变晶圆厂的形状吗？如果有人已经做到了这一点，我会很高兴看到一个样本。

Answer 1

无需更新任何外部库，即可从

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

到

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

这将为您提供访问

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

然后，您可以像普通按钮一样更改其属性

Answer 2

使用材质组件库，您可以使用形状PearanceOverlay：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    app:shapeAppearanceOverlay="@style/fab_3_rounded"
    .../>

使用:

<style name="fab_3_rounded">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
    <item name="cornerSizeBottomLeft">0dp</item>
</style>

Answer 3

支持库提供的FloatingActionButton无法扩展，因为需要替换的方法被设置为private。Material Components(官方AndroidX对支持库的替代)已经在大约10月到12月的路线图上塑造了主题化，这将让你正式而轻松地做到这一点(无需扩展视图)。

但它目前还不可用，所以与此同时，我分叉了robertlevonyan的customFloatingActionButton，并且经过一些轻微的修改，它允许您使用自己的自定义形状。源代码可在此处获取。

要用Gradle将它添加到您的项目中，您需要使用jitpack。你可以这样添加它:

allprojects {
   repositories {
       ...
       maven { url 'https://jitpack.io' }
   }
}

然后实现我的分叉：

implementation 'com.github.JediBurrell:customFloatingActionButton:-SNAPSHOT'

接下来，我们将创建形状，您创建的形状应该可以正常工作。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners
        android:topLeftRadius="@dimen/fab_circle_radius"
        android:topRightRadius="@dimen/fab_circle_radius"
        android:bottomRightRadius="@dimen/fab_circle_radius" />
    <solid android:color="@color/colorAccent" />
</shape>

最后将其添加到布局中（Github 存储库中列出了更多 FAB 选项）：

<com.jediburrell.customfab.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:fabType="custom"
    app:fabShape="@drawable/fab_teardrop"
    app:fabIcon="@drawable/ic_add_24dp"
    app:fabColor="@color/red" />

看起来是这样的：