堆栈内存溢出
  简体   繁体   English

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

[英]How to preserve drawable default color in a Floating Action Button FAB in Android

 原文  2021-11-18 08:27:08  6   1    android/ android-layout/ android-theme/ floating-action-button/ android-vectordrawable

问题描述

I am trying to find a way so that app:tint values does not affect a specific sub path color of a drawable that is placed within a fab.我正在尝试找到一种方法，以便app:tint值不会影响放置在 fab 中的可绘制对象的特定子path颜色。 The drawable svg is:可绘制的 svg 是：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="20dp"
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>

The drawable looks like this:可绘制对象如下所示：

指南针可绘制

However, when setting app:backgroundTint or app:tint for the drawable itself, the colors are overridden and the outcome looks like:但是，当为可绘制对象本身设置 app:backgroundTint 或 app:tint 时，colors 将被覆盖，结果如下所示：

错误的颜色

or when i set app:tint for the drawable again, it overrides then red color that exist in the compass and shows as:或者当我再次为可绘制对象设置 app:tint 时，它会覆盖罗盘中存在的红色并显示为：

又错了

Is there a way to leave the drawable partially unaffected by these values or by theme?有没有办法让drawable部分不受这些值或主题的影响？ I want to preserve the last part of the drawable specifically this:我想特别保留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" />

(there is also a theme applied in the layout but I need it for other buttons. （布局中还应用了一个主题，但我需要它用于其他按钮。

1 个解决方案

解决方案1
 1  2021-11-18 12:35:58

You can do this with a layer list and a decomposed compass drawable.您可以使用图层列表和分解的罗盘可绘制对象来做到这一点。 Here is the decomposed vector drawable.这是分解的矢量drawable。

compass_arrow.xml compass_arrow.xml
Notice that the red arrow path is removed and the tint is applied at the top.请注意，红色箭头路径已被删除，并且在顶部应用了色调。

<vector 
    android:width="20dp"
    android:height="20dp"
    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 compass_red_arrow.xml
This is just the red arrow in its own file.这只是它自己文件中的红色箭头。

<vector 
    android:width="20dp"
    android:height="20dp"
    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 This puts it all together. compass_layer_list.xml这将它们放在一起。

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

Here is what the final drawable looks like as the background of an ImageView with a rotation of 45 degrees:以下是最终可绘制对象作为ImageView旋转 45 度的背景的样子：

在此处输入图像描述

You won't be able to tint from the layout XML, but you can tint the drawable without the red arrow using a theme attribute.您将无法从布局 XML 进行着色，但您可以使用主题属性为不带红色箭头的可绘制对象着色。

(I missed that this is a FAB. You may have to set app:tint="@null" on the FAB to override its inherent tinting.) （我错过了这是一个 FAB。您可能必须在 FAB 上设置app:tint="@null"以覆盖其固有的着色。）

Update: Here is the technique in a FAB.更新：这是 FAB 中的技术。 The tint is set to orange in compass_arrow.xml . compass_arrow.xml中的色调设置为橙色。 You can pull the color from the theme if you need to do that.如果需要，您可以从主题中提取颜色。

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

在此处输入图像描述

Second update: Actually, there is no need to split the drawable.第二次更新：实际上，没有必要拆分drawable。 We can set the colors we want in the drawable XML from the theme and set app:tint="@null" to stop inherent tinting.我们可以在主题的可绘制 XML 中设置我们想要的 colors 并设置app:tint="@null"以停止固有着色。 In the following code, the FAB tint is coming from ?attr/colorOnSecondary and is no longer hard-coded.在下面的代码中，FAB 色调来自?attr/colorOnSecondary并且不再是硬编码的。 I believe that this is the default tint that FABs use if no explicit tint is set.我相信如果没有设置明确的色调，这是 FAB 使用的默认色调。

Either of the preceding ways work, but this is simpler and maintains the tinting aspect of the FAB.上述任何一种方式都有效，但这更简单，并且保持了 FAB 的着色方面。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 浮动操作按钮 (FAB) 默认以矩形显示 - Android Studio - Floating Action Button (FAB) appears in rectangle shape by default - Android Studio 如何在android上更改浮动操作按钮（FAB）的形状？ - How to change the shape of Floating Action Button (FAB) on android? Android - 可移动/可拖动的浮动操作按钮 (FAB) - Android - Movable/Draggable Floating Action Button (FAB) 滚动/粘性FAB浮动操作按钮android - Scrolling / sticky FAB floating action button android Android L - 浮动操作按钮（FAB） - Android L - Floating Action Button (FAB) Android：具有ExpandableListView的浮动操作按钮（fab） - Android: Floating Action Button (fab) with ExpandableListView 在android中将drawable设置为浮动操作按钮ImageView - Setting drawable to floating action button ImageView in android Android：素材设计的浮动操作按钮（FAB）和移动视图 - Android: material design's Floating Action Button (FAB) and shifting views Android 设计支持库可扩展浮动操作按钮 (FAB) 菜单 - Android Design Support Library expandable Floating Action Button(FAB) menu android：从代码中动态更改FAB（浮动操作按钮）图标 - android: dynamically change FAB(Floating Action Button) icon from code
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM