如何在 Android 的浮动操作按钮 FAB 中保留可绘制的默认颜色

Posted 2023-04-18

技术标签:

【中文标题】如何在 Android 的浮动操作按钮 FAB 中保留可绘制的默认颜色【英文标题】：How to preserve drawable default color in a Floating Action Button FAB in Android 【发布时间】：2021-12-29 03:42:44 【问题描述】：

我正在尝试找到一种方法，使app:tint 值不会影响放置在晶圆厂内的可绘制对象的特定子path 颜色。可绘制的 svg 是：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:
android:
android:viewportWidth="20"
android:viewportHeight="20">
<group>
    <clip-path android:pathData="M0,0h20v20h-20z" />
    <path
        android:fillAlpha="0.12"
        android:fillColor="#000000"
        android:pathData="M10.0025,16.625L11.7326,10.5318L8.2723,10.5318L10.0025,16.625Z" />
    <path
        android:fillAlpha="0.87"
        android:fillColor="#ffffff"
        android:pathData="M3.909,3.9123C4.4355,3.3858 3.4576,2.4079 2.9311,2.9344C2.4045,3.461 3.3824,4.4389 3.909,3.9123Z" />
    <path
        android:fillAlpha="0.87"
        android:fillColor="#ffffff"
        android:pathData="M3.1568,16.0986C2.2541,17.0013 3.3824,17.5278 3.7586,17.1517C4.586,16.1738 3.6081,15.6472 3.1568,16.0986Z" />
    <path
        android:fillAlpha="0.87"
        android:fillColor="#ffffff"
        android:pathData="M1.4265,10.0055C1.4265,9.2533 0.0725,9.2533 0.0725,10.0055C0.0725,10.7577 1.4265,10.7577 1.4265,10.0055Z" />
    <path
        android:fillAlpha="0.87"
        android:fillColor="#ffffff"
        android:pathData="M16.3213,2.9342C15.4187,3.8369 16.547,4.3635 16.9984,3.9121C17.7506,3.0094 16.6975,2.5581 16.3213,2.9342Z" />
    <path
        android:fillAlpha="0.87"
        android:fillColor="#ffffff"
        android:pathData="M19.4052,10.532C20.007,10.532 20.3831,9.4036 19.1795,9.4036C18.5025,9.4788 18.2016,10.532 19.4052,10.532Z" />
    <path
        android:fillAlpha="0.87"
        android:fillColor="#ffffff"
        android:pathData="M16.0951,16.0986C15.5686,16.6252 16.5465,17.6031 17.073,17.0765C17.5996,16.55 16.6217,15.5721 16.0951,16.0986Z" />
    <path
        android:fillAlpha="0.87"
        android:fillColor="#ffffff"
        android:pathData="M10.0022,0.8281C9.7013,0.8281 9.5508,0.9786 9.4756,1.2043C9.1747,2.4078 6.8428,9.7046 6.918,10.0807L9.4756,18.6563C9.7013,19.1828 10.3783,19.258 10.5288,18.6563L13.0864,10.0807C13.2368,9.6294 10.8297,2.2574 10.604,1.129C10.4535,0.9786 10.2279,0.9034 10.0022,0.8281ZM10.0022,16.6252L8.272,10.532L11.7323,10.532L10.0022,16.6252ZM11.7323,9.4789L8.272,9.4789L10.0022,3.3858L11.7323,9.4789Z" />
    <path
        android:fillAlpha="1.0"
        android:fillColor="@color/red"
        android:pathData="M11.7326,9.4789L10.0025,3.3857L8.2723,9.4789L11.7326,9.4789Z" />
</group>

drawable 看起来像这样：

但是，当为可绘制对象本身设置 app:backgroundTint 或 app:tint 时，颜色会被覆盖，结果如下所示：

或者当我再次为可绘制对象设置 app:tint 时，它会覆盖罗盘中存在的红色并显示为：

有没有办法让drawable部分不受这些值或主题的影响？我想特别保留drawable的最后一部分：

<path
        android:fillAlpha="1.0"
        android:fillColor="@color/red"
        android:pathData="M11.7326,9.4789L10.0025,3.3857L8.2723,9.4789L11.7326,9.4789Z" />

（布局中还应用了一个主题，但我需要它用于其他按钮。

【问题讨论】：

查看这个答案***.com/a/54086747/6478047 @Manohar 不，这不是我想要的。例如，当fab 的状态设置为activated 时，我希望色彩能够真正影响drawable 的某些部分。我使用app:tint="@null" 作为可绘制颜色，但是当fab 设置为Activated 时，可绘制颜色被覆盖，如图所示。好吧，我不认为这是可能的。我会以任何方式重新打开标志，因为它略有不同。您正在应用 tinr，但您不希望 tint 起作用？为什么首先使用色调？ @cutiko 实际上应用了色调，但指南针可绘制对象在某处有红色，被色调覆盖，因此它没有显示为红色。这是主要问题。找不到解决方法.... 【参考方案1】：

您可以使用图层列表和分解的罗盘可绘制对象来做到这一点。这是分解后的矢量drawable。

compass_arrow.xml 请注意，红色箭头路径已被移除，并且在顶部应用了色调。

<vector 
    android:
    android:
    android:tint="@color/black"
    android:viewportWidth="20"
    android:viewportHeight="20">
    <group>
        <clip-path android:pathData="M0,0h20v20h-20z" />
        <path
            android:fillAlpha="0.12"
            android:fillColor="#000000"
            android:pathData="M10.0025,16.625L11.7326,10.5318L8.2723,10.5318L10.0025,16.625Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="#ffffff"
            android:pathData="M3.909,3.9123C4.4355,3.3858 3.4576,2.4079 2.9311,2.9344C2.4045,3.461 3.3824,4.4389 3.909,3.9123Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="#ffffff"
            android:pathData="M3.1568,16.0986C2.2541,17.0013 3.3824,17.5278 3.7586,17.1517C4.586,16.1738 3.6081,15.6472 3.1568,16.0986Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="#ffffff"
            android:pathData="M1.4265,10.0055C1.4265,9.2533 0.0725,9.2533 0.0725,10.0055C0.0725,10.7577 1.4265,10.7577 1.4265,10.0055Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="#ffffff"
            android:pathData="M16.3213,2.9342C15.4187,3.8369 16.547,4.3635 16.9984,3.9121C17.7506,3.0094 16.6975,2.5581 16.3213,2.9342Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="#ffffff"
            android:pathData="M19.4052,10.532C20.007,10.532 20.3831,9.4036 19.1795,9.4036C18.5025,9.4788 18.2016,10.532 19.4052,10.532Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="#ffffff"
            android:pathData="M16.0951,16.0986C15.5686,16.6252 16.5465,17.6031 17.073,17.0765C17.5996,16.55 16.6217,15.5721 16.0951,16.0986Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="#ffffff"
            android:pathData="M10.0022,0.8281C9.7013,0.8281 9.5508,0.9786 9.4756,1.2043C9.1747,2.4078 6.8428,9.7046 6.918,10.0807L9.4756,18.6563C9.7013,19.1828 10.3783,19.258 10.5288,18.6563L13.0864,10.0807C13.2368,9.6294 10.8297,2.2574 10.604,1.129C10.4535,0.9786 10.2279,0.9034 10.0022,0.8281ZM10.0022,16.6252L8.272,10.532L11.7323,10.532L10.0022,16.6252ZM11.7323,9.4789L8.272,9.4789L10.0022,3.3858L11.7323,9.4789Z" />
    </group>
</vector>

compass_red_arrow.xml 这只是它自己文件中的红色箭头。

<vector 
    android:
    android:
    android:viewportWidth="20"
    android:viewportHeight="20">
    <group>
        <clip-path android:pathData="M0,0h20v20h-20z" />
        <path
            android:fillAlpha="1.0"
            android:fillColor="@android:color/holo_red_dark"
            android:pathData="M11.7326,9.4789L10.0025,3.3857L8.2723,9.4789L11.7326,9.4789Z" />
    </group>
</vector>

compass_layer_list.xml 这将所有内容放在一起。

<layer-list>
    <item android:drawable="@drawable/compass_arrow" />
    <item android:drawable="@drawable/compass_red_arrow" />
</layer-list>

这是最终的可绘制对象作为 ImageView 的背景的样子，旋转 45 度：

您将无法从布局 XML 中着色，但您可以使用主题属性为不带红色箭头的可绘制对象着色。

（我错过了这是一个 FAB。您可能必须在 FAB 上设置 app:tint="@null" 以覆盖其固有的着色。）

更新：这是 FAB 中的技术。 compass_arrow.xml 中的色调设置为橙色。如果需要，您可以从主题中提取颜色。

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_
    android:layout_
    android:layout_gravity="center"
    app:fabSize="normal"
    android:layout_marginStart="150dp"
    app:tint="@null"
    android:src="@drawable/compass_layer_list"
    android:rotation="45" />

第二次更新：其实没有必要拆分drawable。我们可以在主题的可绘制 XML 中设置我们想要的颜色，并设置 app:tint="@null" 以停止固有着色。在下面的代码中，FAB 色调来自?attr/colorOnSecondary，不再是硬编码的。我相信如果没有设置明确的色调，这是 FAB 使用的默认色调。

上述任何一种方式都可以工作，但这更简单，并且保持了 FAB 的着色方面。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:
    android:
    android:viewportWidth="20"
    android:viewportHeight="20">
    <group>
        <clip-path android:pathData="M0,0h20v20h-20z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="@android:color/holo_red_dark"
            android:pathData="M10.0025,16.625L11.7326,10.5318L8.2723,10.5318L10.0025,16.625Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="?attr/colorOnSecondary"
            android:pathData="M3.909,3.9123C4.4355,3.3858 3.4576,2.4079 2.9311,2.9344C2.4045,3.461 3.3824,4.4389 3.909,3.9123Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="?attr/colorOnSecondary"
            android:pathData="M3.1568,16.0986C2.2541,17.0013 3.3824,17.5278 3.7586,17.1517C4.586,16.1738 3.6081,15.6472 3.1568,16.0986Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="?attr/colorOnSecondary"
            android:pathData="M1.4265,10.0055C1.4265,9.2533 0.0725,9.2533 0.0725,10.0055C0.0725,10.7577 1.4265,10.7577 1.4265,10.0055Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="?attr/colorOnSecondary"
            android:pathData="M16.3213,2.9342C15.4187,3.8369 16.547,4.3635 16.9984,3.9121C17.7506,3.0094 16.6975,2.5581 16.3213,2.9342Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="?attr/colorOnSecondary"
            android:pathData="M19.4052,10.532C20.007,10.532 20.3831,9.4036 19.1795,9.4036C18.5025,9.4788 18.2016,10.532 19.4052,10.532Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="?attr/colorOnSecondary"
            android:pathData="M16.0951,16.0986C15.5686,16.6252 16.5465,17.6031 17.073,17.0765C17.5996,16.55 16.6217,15.5721 16.0951,16.0986Z" />
        <path
            android:fillAlpha="0.87"
            android:fillColor="?attr/colorOnSecondary"
            android:pathData="M10.0022,0.8281C9.7013,0.8281 9.5508,0.9786 9.4756,1.2043C9.1747,2.4078 6.8428,9.7046 6.918,10.0807L9.4756,18.6563C9.7013,19.1828 10.3783,19.258 10.5288,18.6563L13.0864,10.0807C13.2368,9.6294 10.8297,2.2574 10.604,1.129C10.4535,0.9786 10.2279,0.9034 10.0022,0.8281ZM10.0022,16.6252L8.272,10.532L11.7323,10.532L10.0022,16.6252ZM11.7323,9.4789L8.272,9.4789L10.0022,3.3858L11.7323,9.4789Z" />
    </group>
</vector>

【讨论】：

好吧，如果我必须在 fab 按钮中使用compass_layer_list.xml，我仍然必须使用app:tint，因此它也会覆盖compass_red_arrow 和compass_arrow，对吧？为什么需要使用app:tint？将其设置为@null 并在drawable 中应用色调。效果是一样的。 @RandomType 刚刚发布了第二种更简单的方法。 @RandomType 那么，您对解决方案有何决定？我找到了一种解决方法，只需在晶圆厂上添加和删除色调。我认为另一种解决方案是动态更改 fab 上的可绘制对象，但我没有对该方法进行太多搜索。

以上是关于如何在 Android 的浮动操作按钮 FAB 中保留可绘制的默认颜色的主要内容，如果未能解决你的问题，请参考以下文章

android：从代码动态更改FAB（浮动操作按钮）图标

Android设计支持库可扩展的浮动操作按钮（FAB）菜单

未聚焦时Android隐藏FAB菜单

Android L - 浮动操作按钮 (FAB)

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

Android FloatingActionButton（浮动动作按钮的动画）使用详情