Android 图层列表、 LayerDrawable 、 layer-list \ 改变 seekbar thumb 滑块的颜色

android 官网：图层列表 LayerDrawable / layer-list

LayerDrawable 是管理其他可绘制对象数组的可绘制对象。列表中的每个可绘制对象均按照列表顺序绘制。列表中的最后一个可绘制对象绘于顶部。

每个可绘制对象均由单个 <layer-list> 元素内的 <item> 元素表示。

文件位置：

res/drawable/filename.xml

文件名即为资源 ID

编译后的资源数据类型：

指向 LayerDrawable 的资源指针

资源引用：

在 Java 中：R.drawable.filename
在 XML 中：@[package:]drawable/filename

语法：

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</layer-list>

元素：

<layer-list>
必需。该元素必须是根元素。包含一个或多个 <item> 元素。
属性：
    xmlns:android
    字符串。必需。
    定义 XML 命名空间，该命名空间必须为 "http://schemas.android.com/apk/res/android"。


<item>
定义放于图层可绘制对象中的可绘制对象，位置由其属性定义。
必须为 <layer-list> 元素的子项。接受子级 <bitmap> 元素。
属性：
    android:drawable
    可绘制资源。必需。引用可绘制资源。
    android:id
    资源 ID。此可绘制对象的唯一资源 ID。
    如要为此项创建新的资源 ID，请使用以下形式："@+id/name"。
    加号表示其是作为新 ID 创建的。
    您可以使用此 ID 检索和修改拥有 View.findViewById() 
    或 Activity.findViewById() 的可绘制对象。
    android:top
    尺寸。顶部偏移量，采用尺寸值或尺寸资源的形式。
    android:right
    尺寸。右侧偏移量，采用尺寸值或尺寸资源的形式。
    android:bottom
    尺寸。底部偏移量，采用尺寸值或尺寸资源的形式。
    android:left
    尺寸。左侧偏移量，采用尺寸值或尺寸资源的形式。

默认情况下，所有可绘制项都会缩放以适应所包含视图的大小。
因此，将图像放在图层列表中的不同位置可能会增大视图的大小，并且有些图像会相应地缩放。

为避免缩放列表中的项，请在 <item> 元素内使用 <bitmap> 元素指定可绘制对象，
并且针对某些不缩放的项（例如 "center"）定义重心。
例如，以下 <item> 定义了缩放以适应其容器视图的项：

<item android:drawable="@drawable/image" />

为避免缩放，以下示例使用重心居中的 <bitmap> 元素：

<item>
  <bitmap android:src="@drawable/image"
          android:gravity="center" />
</item>

示例：

保存在 res/drawable/layers.xml 的 XML 文件：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap android:src="@drawable/android_red"
        android:gravity="center" />
    </item>
    <item android:top="10dp" android:left="10dp">
      <bitmap android:src="@drawable/android_green"
        android:gravity="center" />
    </item>
    <item android:top="20dp" android:left="20dp">
      <bitmap android:src="@drawable/android_blue"
        android:gravity="center" />
    </item>
</layer-list>

此示例使用嵌套的 <bitmap> 元素为每个具有 "center" 重心的项定义可绘制资源。
这可确保不会有图像为适应容器的大小而缩放，因为偏移图像会造成大小调整。

此布局 XML 会将可绘制对象应用到视图：

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/layers" />

结果是一堆不断偏移的图像：

在这里插入图片描述

demo1 ：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--    圆环  -->
    <item>
        <shape
            android:dither="true"
            android:shape="oval">
            <solid android:color="@color/white" />
            <stroke
                android:width="1dp"
                android:color="@android:color/holo_blue_dark" />
        </shape>
    </item>

    <!--    圆心  -->
    <item
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        android:top="20dp">
        <shape android:shape="oval">
            <solid android:color="@android:color/holo_blue_dark" />
            <size
                android:width="30dp"
                android:height="30dp" />
        </shape>
    </item>
</layer-list>

效果：

在这里插入图片描述

demo2 : 可更新seekbar thumb的颜色

定义 icon_thumb.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/layer_drawable_1">
        <bitmap
            android:gravity="center"
            android:src="@drawable/slider_color" />
    </item>

    <item android:id="@+id/layer_drawable_2">
        <bitmap
            android:gravity="center"
            android:src="@drawable/slider_border" />
    </item>
</layer-list>

drawable-xhdpi/slider_color :

在这里插入图片描述

drawable-xhdpi/slider_border :

在这里插入图片描述

引用：

<SeekBar
    android:id="@+id/seekbar1"
    android:layout_width="368dp"
    android:layout_height="44dp"
    android:layout_marginVertical="20dp"
    android:background="@drawable/bg_color127"
    android:max="126"
    android:progress="0"
    android:progressDrawable="@android:color/transparent"
    android:thumb="@drawable/icon_thumb"
    android:thumbOffset="23dp" />

改变thumb的图层颜色

注意：如果单纯改变整个thumb，直接 seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_ATOP); 即可

下面是改变thumb的图层中某层的颜色：

SeekBar seekBar = (SeekBar) this.findViewById(R.id.seekbar1);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        String colorStr = AmbientUtil.COLORS_127[progress];
        int color = Color.parseColor(colorStr);
        Drawable thumb = seekBar.getThumb();
        if (thumb instanceof LayerDrawable) {
            LayerDrawable thumb1 = (LayerDrawable) thumb;
            int numberOfLayers = thumb1.getNumberOfLayers();
            Drawable drawableByLayerId1 = thumb1.findDrawableByLayerId(R.id.layer_drawable_1);
            drawableByLayerId1.setColorFilter(color, PorterDuff.Mode.SRC_IN);
            Log.e(TAG, "onProgressChanged: =================" + numberOfLayers);
        }
		//int color = Color.parseColor(colorStr);
		//Drawable thumb = mColorPickerSeekbar.getThumb();
		//if (thumb instanceof LayerDrawable) {
		//		LayerDrawable layerDrawable = (LayerDrawable) thumb;
		//		Drawable drawable = layerDrawable.findDrawableByLayerId(R.id.layer_drawable_1);
		//		drawable.setColorFilter(new SimpleColorFilter(color));
		//}
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {

    }
});

效果：

在这里插入图片描述

其他：

public class AmbientUtil {

    public static final String[] COLORS_127 = new String[]{
            "#FFDF85FF", "#FFD869FF", "#FFD253FF", "#FFD038FF", "#FFB123DD", "#FFA24DD7", "#FF8B4FE3", "#FF8A20F9", "#FF7544D8", "#FF5C39DB",
            "#FF4520E0", "#FF0024EC", "#FF193AFF", "#FF225CFE", "#FF0277F8", "#FF008BFE", "#FF3690FC", "#FF2A99FE", "#FF00A3FE", "#FF02A7FF",
            "#FF19ADFF", "#FF0CB2FC", "#FF04B4F2", "#FF0AB7F3", "#FF03C2EF", "#FF01CFF1", "#FF02D7F4", "#FF02DBFE", "#FF22DFFE", "#FF44E8FE",
            "#FF02F0FC", "#FF01FEFF", "#FF38FFFE", "#FF19FDFE", "#FF01FCFF", "#FF44FBFE", "#FF76FEFE", "#FF90FEFB", "#FF8FFFF4", "#FFA0FFF5",
            "#FF8BFFF9", "#FF75FFFC", "#FF85FFF6", "#FF9DFFF9", "#FFAAFFF0", "#FFAAFFE6", "#FFAAFFDC", "#FFA8FAD0", "#FF96F2C0", "#FF7EF6BA",
            "#FF6EEFB1", "#FF6EEEA1", "#FF32ED96", "#FF2BED7E", "#FF15E658", "#FF18E032", "#FF53F204", "#FF6AFB29", "#FF94FF43", "#FFAAFB68",
            "#FFC0F987", "#FFC8FD8D", "#FFD2FA78", "#FFDFF974", "#FFE6FF74", "#FFF2FF74", "#FFF8FF8D", "#FFFFFD9B", "#FFFDFF96", "#FFFFFC87",
            "#FFFFF596", "#FFFFE28C", "#FFFEE687", "#FFFEF086", "#FFFCF588", "#FFFEFC85", "#FFFFFF82", "#FFFCFA66", "#FFFCFC64", "#FFFCFE4F",
            "#FFFFFC4F", "#FFFCFC55", "#FFFCFA6D", "#FFFFF654", "#FFFEF200", "#FFFAE800", "#FFF2D144", "#FFF1C91E", "#FFF1BD29", "#FFF1B934",
            "#FFF3B34B", "#FFF9A845", "#FFFBA04B", "#FFFB964B", "#FFFB8B4B", "#FFFB864D", "#FFFB7F4E", "#FFFC7B4F", "#FFFB774F", "#FFFF724F",
            "#FFFF6C4E", "#FFFF4B4E", "#FFFF364E", "#FFFF0048", "#FFFF0C52", "#FFFF2563", "#FFFA3871", "#FFF7387A", "#FFFA4B7A", "#FFFF587D",
            "#FFFC6587", "#FFFD718A", "#FFFF8599", "#FFFF9FAF", "#FFFFC9D2", "#FFFFFFFF", "#FFFBFFFF", "#FFF3FEFF", "#FFEBFEFF", "#FFEAFDFF",
            "#FFD9FAFF", "#FFC9F7FF", "#FFB3FAFF", "#FFAEF8FF", "#FF97F5FF", "#FF75F2FF", "#FF65F0FF",
    };
}

bg_color127 :

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="368dp"
    android:height="40dp"
    android:viewportWidth="368"
    android:viewportHeight="40">
    <path android:pathData="
    M0,5
    L368,5
    L368,35
    L0,35
    L0,5">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endX="368"
                android:endY="40"
                android:startX="0"
                android:startY="40"
                android:type="linear">

                <item
                    android:color="#FFDF85FF"
                    android:offset="0.040983606557377046" />
                <item
                    android:color="#FFD869FF"
                    android:offset="0.048269581056466296" />
                <item
                    android:color="#FFD253FF"
                    android:offset="0.05555555555555555" />
                <item
                    android:color="#FFD038FF"
                    android:offset="0.06284153005464481" />
                <item
                    android:color="#FFB123DD"
                    android:offset="0.07012750455373407" />
                <item
                    android:color="#FFA24DD7"
                    android:offset="0.07741347905282331" />
                <item
                    android:color="#FF8B4FE3"
                    android:offset="0.08469945355191257" />
                <item
                    android:color="#FF8A20F9"
                    android:offset="0.09198542805100182" />
                <item
                    android:color="#FF7544D8"
                    android:offset="0.09927140255009106" />
                <item
                    android:color="#FF5C39DB"
                    android:offset="0.10655737704918034" />
                <item
                    android:color="#FF4520E0"
                    android:offset="0.11384335154826958" />
                <item
                    android:color="#FF0024EC"
                    android:offset="0.12112932604735882" />
                <item
                    android:color="#FF193AFF"
                    android:offset="0.1284153005464481" />
                <item
                    android:color="#FF225CFE"
                    android:offset="0.13570127504553733" />
                <item
                    android:color="#FF0277F8"
                    android:offset="0.14298724954462658" />
                <item
                    android:color="#FF008BFE"
                    android:offset="0.15027322404371585" />
                <item
                    android:color="#FF3690FC"
                    android:offset="0.1575591985428051" />
                <item
                    android:color="#FF2A99FE"
                    android:offset="0.16484517304189436" />
                <item
                    android:color="#FF00A3FE"
                    android:offset="0.1721311475409836" />
                <item
                    android:color="#FF02A7FF"
                    android:offset="0.17941712204007285" />
                <item
                    android:color="#FF19ADFF"
                    android:offset="0.18670309653916212" />
                <item
                    android:color="#FF0CB2FC"
                    android:offset="0.19398907103825136" />
                <item
                    android:color="#FF04B4F2"
                    android:offset="0.2012750455373406" />
                <item
                    android:color="#FF0AB7F3"
                    android:offset="0.20856102003642987" />
                <item
                    android:color="#FF03C2EF"
                    android:offset="0.21584699453551912" />
                <item
                    android:color="#FF01CFF1"
                    android:offset="0.22313296903460836" />
                <item
                    android:color="#FF02D7F4"
                    android:offset="0.23041894353369763" />
                <item
                    android:color="#FF02DBFE"
                    android:offset="0.23770491803278687" />
                <item
                    android:color="#FF22DFFE"
                    android:offset="0.24499089253187611" />
                <item
                    android:color="#FF44E8FE"
                    android:offset="0.2522768670309654" />
                <item
                    android:color="#FF02F0FC"
                    android:offset="0.25956284153005466" />
                <item
                    android:color="#FF01FEFF"
                    android:offset="0.2668488160291439" />
                <item
                    android:color="#FF38FFFE"
                    android:offset="0.27413479052823314" />
                <item
                    android:color="#FF19FDFE"
                    android:offset="0.2814207650273224" />
                <item
                    android:color="#FF01FCFF"
                    android:offset="0.2887067395264117" />
                <item
                    android:color="#FF44FBFE"
                    android:offset="0.2959927140255009" />
                <item
                    android:color="#FF76FEFE"
                    android:offset="0.30327868852459017" />
                <item
                    android:color="#FF90FEFB"
                    android:offset="0.3105646630236794" />
                <item
                    android:color="#FF8FFFF4"
                    android:offset="0.31785063752276865" />
                <item
                    android:color="#FFA0FFF5"
                    android:offset="0.3251366120218579" />
                <item
                    android:color="#FF8BFFF9"
                    android:offset="0.3324225865209472" />
                <item
                    android:color="#FF75FFFC"
                    android:offset="0.33970856102003644" />
                <item
                    android:color="#FF85FFF6"
                    android:offset="0.3469945355191257" />
                <item
                    android:color="#FF9DFFF9"
                    android:offset="0.3542805100182149" />
                <item
                    android:color="#FFAAFFF0"
                    android:offset="0.36156648451730417" />
                <item
                    android:color="#FFAAFFE6"
                    android:offset="0.3688524590163934" />
                <item
                    android:color="#FFAAFFDC"
                    android:offset="0.3761384335154827" />
                <item
                    android:color="#FFA8FAD0"
                    android:offset="0.38342440801457195" />
                <item
                    android:color="#FF96F2C0"
                    android:offset="0.3907103825136612" />
                <item
                    android:color="#FF7EF6BA"
                    android:offset="0.39799635701275043" />
                <item
                    android:color="#FF6EEFB1"
                    android:offset="0.4052823315118397" />
                <item
                    android:color="#FF6EEEA1"
                    android:offset="0.412568306010929" />
                <item
                    android:color="#FF32ED96"
                    android:offset="0.4198542805100182" />
                <item
                    android:color="#FF2BED7E"
                    android:offset="0.42714025500910746" />
                <item
                    android:color="#FF15E658"
                    android:offset="0.4344262295081967" />
                <item
                    android:color="#FF18E032"
                    android:offset="0.44171220400728595" />
                <item
                    android:color="#FF53F204"
                    android:offset="0.4489981785063752" />
                <item
                    android:color="#FF6AFB29"
                    android:offset="0.4562841530054645" />
                <item
                    android:color="#FF94FF43"
                    android:offset="0.46357012750455373" />
                <item
                    android:color="#FFAAFB68"
                    android:offset="0.470856102003643" />
                <item
                    android:color="#FFC0F987"
                    android:offset="0.4781420765027322" />
                <item
                    android:color="#FFC8FD8D"
                    android:offset="0.48542805100182146" />
                <item
                    android:color="#FFD2FA78"
                    android:offset="0.49271402550091076" />
                <item
                    android:color="#FFDFF974"
                    android:offset="0.5" />
                <item
                    android:color="#FFE6FF74"
                    android:offset="0.5072859744990893" />
                <item
                    android:color="#FFF2FF74"
                    android:offset="0.5145719489981785" />
                <item
                    android:color="#FFF8FF8D"
                    android:offset="0.5218579234972678" />
                <item
                    android:color="#FFFFFD9B"
                    android:offset="0.5291438979963571" />
                <item
                    android:color="#FFFDFF96"
                    android:offset="0.5364298724954463" />
                <item
                    android:color="#FFFFFC87"
                    android:offset="0.5437158469945356" />
                <item
                    android:color="#FFFFF596"
                    android:offset="0.5510018214936249" />
                <item
                    android:color="#FFFFE28C"
                    android:offset="0.558287795992714" />
                <item
                    android:color="#FFFEE687"
                    android:offset="0.5655737704918034" />
                <item
                    android:color="#FFFEF086"
                    android:offset="0.5728597449908925" />
                <item
                    android:color="#FFFCF588"
                    android:offset="0.5801457194899818" />
                <item
                    android:color="#FFFEFC85"
                    android:offset="0.5874316939890711" />
                <item
                    android:color="#FFFFFF82"
                    android:offset="0.5947176684881603" />
                <item
                    android:color="#FFFCFA66"
                    android:offset="0.6020036429872496" />
                <item
                    android:color="#FFFCFC64"
                    android:offset="0.6092896174863388" />
                <item
                    android:color="#FFFCFE4F"
                    android:offset="0.6165755919854281" />
                <item
                    android:color="#FFFFFC4F"
                    android:offset="0.6238615664845174" />
                <item
                    android:color="#FFFCFC55"
                    android:offset="0.6311475409836066" />
                <item
                    android:color="#FFFCFA6D"
                    android:offset="0.6384335154826959" />
                <item
                    android:color="#FFFFF654"
                    android:offset="0.6457194899817851" />
                <item
                    android:color="#FFFEF200"
                    android:offset="0.6530054644808744" />
                <item
                    android:color="#FFFAE800"
                    android:offset="0.6602914389799636" />
                <item
                    android:color="#FFF2D144"
                    android:offset="0.6675774134790529" />
                <item
                    android:color="#FFF1C91E"
                    android:offset="0.6748633879781422" />
                <item
                    android:color="#FFF1BD29"
                    android:offset="0.6821493624772313" />
                <item
                    android:color="#FFF1B934"
                    android:offset="0.6894353369763206" />
                <item
                    android:color="#FFF3B34B"
                    android:offset="0.6967213114754098" />
                <item
                    android:color="#FFF9A845"
                    android:offset="0.7040072859744991" />
                <item
                    android:color="#FFFBA04B"
                    android:offset="0.7112932604735884" />
                <item
                    android:color="#FFFB964B"
                    android:offset="0.7185792349726776" />
                <item
                    android:color="#FFFB8B4B"
                    android:offset="0.7258652094717669" />
                <item
                    android:color="#FFFB864D"
                    android:offset="0.7331511839708561" />
                <item
                    android:color="#FFFB7F4E"
                    android:offset="0.7404371584699454" />
                <item
                    android:color="#FFFC7B4F"
                    android:offset="0.7477231329690347" />
                <item
                    android:color="#FFFB774F"
                    android:offset="0.7550091074681239" />
                <item
                    android:color="#FFFF724F"
                    android:offset="0.7622950819672132" />
                <item
                    android:color="#FFFF6C4E"
                    android:offset="0.7695810564663024" />
                <item
                    android:color="#FFFF4B4E"
                    android:offset="0.7768670309653917" />
                <item
                    android:color="#FFFF364E"
                    android:offset="0.784153005464481" />
                <item
                    android:color="#FFFF0048"
                    android:offset="0.7914389799635702" />
                <item
                    android:color="#FFFF0C52"
                    android:offset="0.7987249544626595" />
                <item
                    android:color="#FFFF2563"
                    android:offset="0.8060109289617486" />
                <item
                    android:color="#FFFA3871"
                    android:offset="0.8132969034608379" />
                <item
                    android:color="#FFF7387A"
                    android:offset="0.8205828779599272" />
                <item
                    android:color="#FFFA4B7A"
                    android:offset="0.8278688524590164" />
                <item
                    android:color="#FFFF587D"
                    android:offset="0.8351548269581057" />
                <item
                    android:color="#FFFC6587"
                    android:offset="0.8424408014571949" />
                <item
                    android:color="#FFFD718A"
                    android:offset="0.8497267759562842" />
                <item
                    android:color="#FFFF8599"
                    android:offset="0.8570127504553734" />
                <item
                    android:color="#FFFF9FAF"
                    android:offset="0.8642987249544627" />
                <item
                    android:color="#FFFFC9D2"
                    android:offset="0.871584699453552" />
                <item
                    android:color="#FFFFFFFF"
                    android:offset="0.8788706739526412" />
                <item
                    android:color="#FFFBFFFF"
                    android:offset="0.8861566484517305" />
                <item
                    android:color="#FFF3FEFF"
                    android:offset="0.8934426229508197" />
                <item
                    android:color="#FFEBFEFF"
                    android:offset="0.900728597449909" />
                <item
                    android:color="#FFEAFDFF"
                    android:offset="0.9080145719489983" />
                <item
                    android:color="#FFD9FAFF"
                    android:offset="0.9153005464480874" />
                <item
                    android:color="#FFC9F7FF"
                    android:offset="0.9225865209471767" />
                <item
                    android:color="#FFB3FAFF"
                    android:offset="0.9298724954462659" />
                <item
                    android:color="#FFAEF8FF"
                    android:offset="0.9371584699453552" />
                <item
                    android:color="#FF97F5FF"
                    android:offset="0.9444444444444445" />
                <item
                    android:color="#FF75F2FF"
                    android:offset="0.9517304189435337" />
                <item
                    android:color="#FF65F0FF"
                    android:offset="0.959016393442623" />

            </gradient>
        </aapt:attr>
    </path>
</vector>