SeekBar的使用

Posted 2020-09-24 gali

方法一

1. 需求：需要改变其默认颜色，样式

2.滑竿样式

seekbar.xml

<?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:height="5dp">
        <shape>
            <corners android:radius="5dp"/>
            <solid android:color="#C9C7C7"/>           <!--  颜色-->
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress" android:height="5dp">
        <clip>
            <shape>
                <corners android:radius="5dp"/>
                <solid android:color="#C9C7C7"/>            <!-- 颜色-->
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress" android:height="5dp">
        <clip>
            <shape>
                <corners android:radius="5dp"/>
                <solid android:color="@color/colorPrimary"/>   <!--  颜色-->
            </shape>
        </clip>
    </item>
</layer-list>

3. 滑块样式

select_seekbar.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下状态-->
    <item  android:state_pressed="true"  android:drawable="@drawable/shape1"/>

    <!-- 有焦点状态 -->
    <item  android:state_focused="true"  android:drawable="@drawable/shape"/>

    <!-- 普通状态 -->
    <item android:drawable="@drawable/shape" />
</selector>

 

shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <solid android:color="@color/colorPrimary"></solid>  <!-- 颜色-->
    <size
        android:width="12dp"
        android:height="12dp"></size>
</shape>

shap1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <solid android:color="@color/colorAccent"></solid> <!-- 颜色-->
    <size
        android:width="14dp"
        android:height="14dp"></size>
</shape>

4.布局引用

<SeekBar
    android:id="@+id/seekbar"
    android:layout_width="368dp"
    android:maxHeight="6dip"
    android:minHeight="6dip"
    android:layout_height="40dp"
    android:max="100"
    android:progressDrawable="@drawable/seekbar"
    android:thumb="@drawable/select_seekbar"
    android:progress="30" />

<!--maxHeight
    minHeight可以控制滑竿粗线-- >

方法二

5.不利用xml，直接修改

 public void setSeekBarColor(SeekBar seekBar, int color){
        LayerDrawable layerDrawable = (LayerDrawable)        
seekBar.getProgressDrawable();
        Drawable dra=layerDrawable.getDrawable(2);
        dra.setColorFilter(color, PorterDuff.Mode.SRC);
        Drawable dra2=seekBar.getThumb();
        seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
        seekBar.invalidate();
    }

 

6.效果图

 

 

 

 

二 实现seekbar颜色渐变

1. 效果

 

 

    <SeekBar
                android:id="@+id/vSeekBarECHO"
                android:layout_width="@dimen/dp_160"
                android:layout_height="wrap_content"
                android:maxHeight="@dimen/dp_13"
                android:minHeight="@dimen/dp_13"
                android:translationX="@dimen/dp_m_51"
                android:rotation="270"
                android:translationY="@dimen/dp_70"
                android:paddingStart="0dp"
                android:saveEnabled="false"
                android:progressDrawable="@drawable/seekbar_progress_color"
                android:splitTrack="false"
                android:thumb="@drawable/icon_seek_block_25"
                android:thumbOffset="0dp" />

seekbar_progress_color.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    
    <!-- 背景图 -->
    <item android:id="@android:id/background">
        <shape>
            <stroke  android:width="@dimen/dp_1" android:color="#E5E5E5"/>
            <corners android:radius="@dimen/dp_5" />
            <!--
            
                android:endColor="#FBFBFB"
                android:centerColor="#9E9D9D"
                android:startColor="#626060"-->
            <solid android:color="#FAFAFA"/>
            
            <gradient
                android:angle="0"
                android:endColor="#FBFBFB"
                android:centerColor="#FBFBFB"
                android:startColor="#FBFBFB" />
        
        
        </shape>
    </item>
    
    
    <!-- 第二进度条的背景色 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="@color/colorSingerName" />
            </shape>
        </clip>
    </item>
    
    
    <!-- <item android:id="@+android:id/background" android:drawable="@drawable/bar_dn" /> -->
    <!-- 可拖动的进度条颜色 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <stroke  android:width="@dimen/dp_1" android:color="#E5E5E5"/>
                <corners android:radius="@dimen/dp_5" />
                <gradient
                    android:angle="0"
                    android:centerColor="@color/colorSeekBarPro50"
                    android:endColor="@color/colorSeekBarPro100"
                    android:startColor="@color/colorSeekBarPro0" />
            </shape>
        </clip>
    </item>
    
</layer-list>

icon_seek_block_25