安县建设局网站全网营销式网站

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

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

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

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

直接上代码

xml里面的布局

                <SeekBarandroid: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"/><itemandroid: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"/><itemandroid: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() {@Overridepublic 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;}}}@Overridepublic void onStartTrackingTouch(SeekBar seekBar) {}@Overridepublic 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);}

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