為什么 Material FAB 在禁用時不會改變顏色？

Question

我正在禁用 Material Floating Action 按鈕，但是當禁用設置為 true 時顏色不會改變。 我認為 Material 有一個 FAB 的主題，禁用時它應該變成淺灰色。 我不想在每次啟用/禁用時添加代碼來更改背景。

我目前使用的是材質版本：1.1.0

在代碼中，我只是通過fab.isEnabled = false將 fab 設置為禁用

這是xml

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/save_reservation_fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/keyline_2"
                app:backgroundTint="@color/color_primary"
                android:src="@drawable/ic_save_black_72dp"
                app:tint="@color/color_on_primary"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"/>

這是禁用/啟用的晶圓廠的樣子：

它應該是這樣的：

Answer 1

我懷疑這是罪魁禍首：

 app:backgroundTint="@color/color_primary"

無論其狀態如何，這都會為您的 FAB 着色。

您可以通過將色調設置為ColorStateList而不是原始顏色值來解決此問題。 也就是說，在res/color/目錄中創建一個名為fab_color.xml的文件，並包含以下內容：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="your gray here"/>
    <item android:color="@color/color_primary"/>
</selector>

並將您的色調改為：

app:backgroundTint="@color/fab_color"

或者，您可以調整 Activity 的主題，使 FAB 的默認顏色是您想要的顏色（ @color/color_primary ），然后完全刪除app:backgroundTint attr。

Answer 2

1.2.0版本在FloatingActionButton 引入了對啟用/禁用狀態的支持。

現在默認樣式支持禁用狀態，並且背景顏色基於禁用時的colorOnSurface ：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorSecondary" android:state_enabled="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>

您可以使用帶有自定義選擇器的app:backgroundTint屬性或使用：

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android:theme="@style/ThemeOverlay.Custom.FloatingActionButton"
      ../>

和：

<style name="ThemeOverlay.Custom.FloatingActionButton" parent="">
    <item name="colorOnSurface">@color/....</item>
</style>