如何在 android 上更改浮动操作按钮 (FAB) 的形状?

Posted

技术标签:

【中文标题】如何在 android 上更改浮动操作按钮 (FAB) 的形状?【英文标题】:How to change the shape of Floating Action Button (FAB) on android? 【发布时间】:2018-08-21 23:35:59 【问题描述】:

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

我设法创建了这样一个表单,但不知道如何将它应用到我的工厂,或者是否可能。形状的 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 但我不知道怎么做。

有没有办法改变工厂的形状?如果有人已经实现了这一点,我会很高兴看到一个示例。

【问题讨论】:

你找到解决办法了吗? 虽然我找到了另一种解决方案,但我认为@JediBurrell 提供的答案是更好的方法并且效果很好。 【参考方案1】:

支持库提供的 FloatingActionButton 无法扩展,因为需要替换的方法设置为私有。 Material Components(它是支持库的官方 AndroidX 替代品)在 ~10 月至 12 月期间在 roadmap 上有 Shape Theming,这将使您可以正式轻松地做到这一点(无需扩展视图)。

但它现在还不可用,所以与此同时,我通过 robertlevonyan 分叉了customFloatingActionButton,并稍作修改,它允许您使用自己的自定义形状。源代码在here.

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

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

然后实现我的fork:

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_
    android:layout_
    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" />

这就是它的样子:

【讨论】:

实际上,正如我所读到的,现在应该可以了:issuetracker.google.com/issues/133389626。 developer.android.com/reference/com/google/android/material/… github.com/material-components/material-components-android/blob/… .问题是,我没有看到太多关于它的示例和教程。你知道如何使用它吗?你能告诉我如何制作一些基本的东西,比如圆角水平 FAB(比如在联系人详细信息屏幕中)吗?【参考方案2】:

借助材料组件库,您可以使用 shapeAppearanceOverlay

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

【讨论】:

【参考方案3】:

无需更新任何外部库更新您的 Gradle 文件

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_
        android:layout_ />

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

【讨论】:

【参考方案4】:

您正在寻找的是更改按钮的背景

android:background="@drawable/my_shape"

【讨论】:

您应该编辑您的答案以格式化示例代码部分。

以上是关于如何在 android 上更改浮动操作按钮 (FAB) 的形状?的主要内容,如果未能解决你的问题,请参考以下文章

如何更改xml文件中浮动操作按钮的颜色或以编程方式[重复]

如何更改主题更改时浮动操作按钮的颜色?

如何更改浮动操作按钮的颜色?

如何在浮动操作按钮中将图像设置为居中裁剪

关闭浮动操作按钮 Android

视图创建时浮动操作按钮锚点更改