当前位置：首页 > news >正文

一个滑块可变色的Seekbar

news 来源：原创 2025/5/19 19:34:45

因项目需要，做一个如下图的滑动条，要求如下：

1、滑块跟着进度条改变颜色

2、滑块有白色边和内部颜色组成

大体思路，就是背景需要UI按照需求提供，然后变色时，根据滑动回调动态设置对应的颜色。

直接上代码

xml里面的布局

                <SeekBar
                    android:id="@+id/atmosphere_lamp_progress_color_seekbar"
                    style="@style/atmosphere_lamp_progress_color_horizontal"
                    android:layout_width="@dimen/dimen578dp"
                    android:layout_height="@dimen/dimen32dp"
                    android:layout_marginStart="@dimen/dimen4dp"
                    android:layout_marginTop="@dimen/dimen98dp"
                    android:background="@null"
                    android:max="63"
                    android:paddingVertical="@dimen/dimen7dp"
                    android:paddingStart="@dimen/dimen16dp"
                    android:paddingEnd="@dimen/dimen16dp"
                    android:splitTrack="false" />

使用到的style

    <style name="atmosphere_lamp_progress_color_horizontal">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:thumb">@drawable/atmosphere_thumb_bg</item>
        <item name="android:progressDrawable">@drawable/bg_color_palette</item><!-- 滑动条颜色-->
        <item name="android:indeterminateDrawable">
            @android:drawable/progress_indeterminate_horizontal
        </item>
        <item name="android:minHeight">@dimen/dimen44dp</item>
        <item name="android:maxHeight">@dimen/dimen44dp</item>
    </style>

如果想让进度条有背景和进度两个滑动条，可以给progressDrawable添加一个layer-list即可

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background" android:drawable="@drawable/slider_ambient_lighting_n_white" />

    <item android:id="@android:id/progress" android:drawable="@drawable/slider_ambient_lighting_f_white" />

</layer-list>

滑块分层我是使用了atmosphere_thumb_bg用到了layer-list

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

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

    <item
        android:width="@dimen/dimen28dp"
        android:height="@dimen/dimen28dp"
        android:top="@dimen/dimen2dp"
        android:left="@dimen/dimen2dp"
        android:drawable="@drawable/seekbar_thumb_in"/>

</layer-list>

seekbar_thumb_out如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!--设置大小-->
    <size android:width="@dimen/dimen32dp"
        android:height="@dimen/dimen32dp"/>

    <!--设置圆角-->
    <corners android:radius="@dimen/dimen18dp"/>

    <!--设置背景颜色-->
    <solid android:color="@color/white"/>

<!--    &lt;!&ndash;设置边框&ndash;&gt;-->
<!--    <stroke android:width="2dp" android:color="@color/colorAccent"/>-->

</shape>

seekbar_thumb_in如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

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

    <item
        android:width="@dimen/dimen28dp"
        android:height="@dimen/dimen28dp"
        android:top="@dimen/dimen2dp"
        android:left="@dimen/dimen2dp"
        android:drawable="@drawable/seekbar_thumb_in"/>

</layer-list>

以上都是布局，要想动态显示还是有如下java代码：

给seekbar注册监听

    //SeekBar回调
    private SeekBar.OnSeekBarChangeListener seekChangeListener = new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            if (fromUser) {
                switch (seekBar.getId()) {
                    case R.id.atmosphere_lamp_progress_color_seekbar://氛围灯颜色
                        LogUtils.d(TAG, "无极调色 == " + progress);
                        setThumbColor(seekBar, progress + 1, 255);
                        break;
                    default:
                        break;

                }
            }
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
            switch (seekBar.getId()) {
                case R.id.atmosphere_lamp_progress_color_seekbar:
                    LogUtils.i(TAG, "氛围灯———颜色 抬手 == " + lampBrightnessValue);
                    break;
                default:
                    break;
            }
        }
    };

封装的setThumbColor设置动态颜色

    //设置无极变色滑块颜色
    private void setThumbColor(SeekBar seekBar, int value, int alphaValue) {
        LayerDrawable layerDrawable = (LayerDrawable) seekBar.getThumb();
        GradientDrawable gradientDrawable = (GradientDrawable) layerDrawable.getDrawable(1);
        GradientDrawable gradientDrawable0 = (GradientDrawable) layerDrawable.getDrawable(0);
        gradientDrawable.setColor(Myapplication.getApplication().getResources().getColor(atmosphereLampHelp.valueToColor(value), null));
        gradientDrawable.setAlpha(alphaValue);
        gradientDrawable0.setAlpha(alphaValue);
    }

里面的颜色值，可以按照自己要求一一对应即可。