如何在Android上更改浮动操作按钮(FAB)的形状? [英] How to change the shape of Floating Action Button (FAB) on android?

问题描述

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

In our android app we need to create a floating action button which isn't the default circle but a square with with three rounded corners. The fab looks like in the image below:

我设法创建了这样的表格，但是不知道如何将其应用于我的晶圆厂，或者甚至不可能.形状的xml文件如下所示:

I managed to create such a form but don't know how to apply it to my fab, or if it's even possible. The xml file for the shape looks like this:

   <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，但我不知道如何.

but this changes only the icon inside my button. I think I need to extend FloatingActionButton but I have no idea how.

有没有办法改变晶圆厂的形状?如果有人已经做到这一点，我将很高兴看到一个示例.

Is there a way to change the shape of the fab? If someone has already achieved this I would appreciate to see a sample.

推荐答案

支持库提供的FloatingActionButton不能扩展，因为需要替换的方法设置为private. 材料组件(这是支持库的AndroidX官方替代品)具有

The FloatingActionButton provided by the support libraries can not be extended as the methods that would need to be replaced are set to private. Material Components (which is the official AndroidX replacement for the support library) has Shape Theming on the roadmap for ~October-December, which will let you do just that officially and easily (without having to extend the view).

但是它尚不可用，因此与此同时，我通过robertlevonyan分叉了 customFloatingActionButton 进行一些细微的修改，它使您可以使用自己的自定义形状.源代码可在此处使用.

But it's not available just yet, so in the meantime, I forked customFloatingActionButton by robertlevonyan, and with some slight modifications, it allows you to use your own custom shape. The source code is available here.

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

To add it to your project with Gradle, you'll need to use jitpack. You can add it like this:

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

然后实施我的叉子:

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

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

Next we'll create the shape, the one you created should work fine.

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

然后最后将其添加到您的布局中(更多的FAB选项在Github存储库中列出):

Then finally add it to your layout (more FAB options are listed in the Github repo):

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

这是它的外观:

这篇关于如何在Android上更改浮动操作按钮(FAB)的形状?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！