如何自定义 Floating Action Button 以在 Android 中启用和禁用 FAB 状态时具有不同的外观？

Question

禁用或启用 FAB 在外观上没有区别。如何通过 xml 为启用和禁用的 FAB 实现不同的外观？

Answer 1

当按钮是 enabled/disabled 时，您可以更改图标吗？例如，如果您的 FAB 有一张 "plus" 的图片，禁用时将其更改为红色 "plus"，启用时更改为绿色。

为此，您需要跟踪 FAB 的状态。

private var fabEnabled = true

override fun onCreate(savedInstanceState: Bundle?) {
...

fab.setOnClickListener { view ->
    if (fabEnabled) {
        fab.setImageResource(R.drawable.ic_green_plus)
    } else {
        fab.setImageResource(R.drawable.ic_red_plus)
    }
}

根据需要更改 fabEnabled，例如通过另一个按钮。

注意这个答案是在 Koltin 中。请告诉我你是否愿意 java.

Answer 2

我能够为 FAB 带来不同的外观和感觉。我采取的步骤是 -

1) 在 /res/drawable 创建了一个可绘制对象 custom_fab.xml，内容如下：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/fab_disabled"
        android:state_enabled="false" />
    <item android:drawable="@drawable/fab_enabled"
        android:state_enabled="true" />
</selector>

这是为了在启用和禁用状态下使用不同的图像。

2) 在 /res/color 创建了颜色选择器 custom_fab_color.xml，内容如下：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorFabDisabled" 
        android:state_enabled="false" />
    <item android:color="@color/colorFabEnabled" android:state_enabled="true" /> 
</selector>

这是为了使 FAB 的启用和禁用状态具有不同的背景颜色。

3) 在 res/values/colors 中添加了启用和禁用状态所需的颜色。xml

<resources>
    ...
    <color name="colorFabEnabled">#03DAC5</color>
    <color name="colorFabDisabled">#6DABF9</color>>
</resources>

4) 更新了定义 FAB 的 xml 文件。将 src 和 backgroundTint 指向新的可绘制对象和颜色选择器。

<com.google.android.material.floatingactionbutton.FloatingActionButton
        ...

        android:backgroundTint="@color/custom_fab_color"
        android:src="@drawable/custom_fab" />

如何自定义 Floating Action Button 以在 Android 中启用和禁用 FAB 状态时具有不同的外观？

How to customise Floating Action Button to have different look and feel for enabled and disabled FAB state in Android?

android

styles

floating-action-button