材质按钮的禁用颜色状态

Posted 2023-02-22

【中文标题】材质按钮的禁用颜色状态

【英文标题】：Disabled color state of Material button

【发布时间】：2019-08-27 23:21:50

【问题描述】：

Material Spec 显示一个禁用的按钮状态，看起来是灰色的。

https://www.material.io/design/components/buttons.html#toggle-button

我正在使用来自 android 的材料组件的 MaterialButton： https://www.material.io/develop/android/components/material-button/

但是，当将按钮设置为禁用时，按钮的颜色/色调不会改变。

<com.google.android.material.button.MaterialButton
    android:id="@+id/disabled_material_button"
    android:layout_
    android:layout_
    android:enabled="false"
    android:text="@string/button_label_disabled"/>

只是默认情况下没有在 Material Android 组件中实现？ Material Components 是否定义了禁用的按钮状态列表？

【参考方案1】：

创建文件夹/res/color（在您的res 目录中）。 在此处添加一个新的颜色资源文件，命名为 color_states_materialbutton.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="@color/colorDisabled"  />
    <item android:color="@color/colorEnabled" />
</selector>

在 styles.xml 中创建一个样式，将 Widget.MaterialComponents.Button 样式之一作为其父样式，并将您的颜色状态列表作为 backgrountTint 标签：

<style name="MaterialButtonStyle" parent="Widget.MaterialComponents.Button.UnelevatedButton">
        <item name="backgroundTint">@color/color_states_materialbutton</item>
</style>

在布局中的 MaterialButton 上设置样式：

<com.google.android.material.button.MaterialButton
    style="@style/MaterialButtonStyle"
    android:id="@+id/disabled_material_button"
    android:layout_
    android:layout_
    android:enabled="false"
    android:text="@string/button_label_disabled"/>

【参考方案2】：

使用默认样式Widget.MaterialComponents.Button，default selector 用作backgroundTint 处理禁用状态而不做任何更改：

这是默认选择器：

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

只需使用：

    <com.google.android.material.button.MaterialButton
        android:enabled="false"
        ..>

如果您想更改禁用的颜色，您可以使用自定义选择器

    <com.google.android.material.button.MaterialButton
        app:backgroundTint="@color/my_selector"
        ..>

或者您可以覆盖默认选择器中使用的颜色：

    <com.google.android.material.button.MaterialButton
        android:theme="@style/button_overlay"
        ..>

与：

    <style name="button_overlay">
       <item name="colorOnSurface">@color/my_color</item>
    </style>

【讨论】：

<item name="colorOnSurface">@color/my_color</item> 对 MaterialButton 有什么影响？

如何区分文本和背景颜色？我不得不制作一个单独的文件。有没有更直接的方法？

【参考方案3】：

在您的 res 文件夹中创建一个新的 Android 资源目录。将其命名为“颜色”（见附图）。 创建一个名为“button_disabled”的颜色资源文件（见附图）。 将以下代码放入button_disabled.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="#FD7E14" android:alpha="0.45"   />
            <item android:color="#FD7E14" />
        </selector>

找到您的 values/styles.xml 并添加以下代码

<style name="AppMaterialButton" parent="Widget.MaterialComponents.Button.UnelevatedButton">  <item name="android:backgroundTint">@color/button_disabled</item> </style>

转到您的 layout/activity_filename.xml 文件并添加此 android:enabled="false" 到您的按钮小部件。

<com.google.android.material.button.MaterialButton
       android:enabled="false"
       android:id="@+id/button_Join"
       style="@style/AppMaterialButton"
       android:layout_
       android:layout_
       android:text="next" 
       app:cornerRadius="0dp" />

Android Resource Directory

【参考方案4】：

您应该使用 ThemeOverlay 并单独应用 Colored 样式

    <style name="AccentButton" parent="ThemeOverlay.AppCompat.Dark">
         <!-- customize colorButtonNormal for the disable color -->
         <!-- customize colorAccent for the enabled color -->
    </style>

    <Button
        android:id="@+id/login_button"
        android:layout_
        android:layout_
        android:text="@string/fragment_login_login_button"
        android:theme="@style/AccentButton"
        style="@style/Widget.AppCompat.Button.Colored"/>