Seekbar自定义样式及使用

seekbar的使用

    "@+id/seekBar"
        style="@style/Widget.AppCompat.SeekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxHeight="32dp"
        android:minHeight="32dp"
        android:paddingTop="16dp"
        android:paddingBottom="16dp"
        android:max="100"
        android:progress="80"  
        android:scaleType="center" />

style属性设置seekbar的风格
minHeight属性设置seekbar的高度
paddingTop、paddingBottom可以拓宽seekbar的触摸区域
seekbar的layout_height属性若不设置成wrap_content，那么thumb就不会区中显示

---

若要设置进度条的样式需要添加属性 android:progressDrawable=”@drawable/seekbar_style”
其中seekbar_style.xml可写成如下：
法一：

               
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">     
           
        <item android:id="@android:id/background">     
            <shape>     
                <corners android:radius="5dip" />     
                <gradient     
                        android:startColor="#ffffffff"    
                        android:centerColor="#fffffff0"    
                        android:centerY="0.75"    
                        android:endColor="#fffffafa"    
                        android:angle="270"    
                />     
            shape>     
        item>     
             
        <item android:id="@android:id/secondaryProgress">     
            <clip>     
                <shape>     
                    <corners android:radius="5dip" />     
                    <gradient     
                            android:startColor="#8000cdcd"    
                            android:centerColor="#8000bfff"    
                            android:centerY="0.75"    
                            android:endColor="#a000b2ee"    
                            android:angle="270"    
                    />     
                shape>     
            clip>     
        item>     
             
        <item android:id="@android:id/progress">     
            <clip>     
                <shape>     
                    <corners android:radius="5dip" />     
                    <gradient     
                            android:startColor="#ff00ffff"    
                            android:centerColor="#ff00ced1"    
                            android:centerY="0.75"    
                            android:endColor="#ff00f5ff"    
                            android:angle="270"    
                    />     
                shape>     
            clip>     
        item>     

法二：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/sv_volume_seekbar_gray" />
    
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/sv_volume_seekbar_blue_small" />
    item>
layer-list>

注意：第一进度条里使用了clip标签会使图片拉伸，不使用clip标签的背景中则是对图片进行拼接。

---

若要设置滑块的样式需要添加属性android:thumb=”@drawable/thumb”
其中thumb.xml可写成如下：

      
    <selector xmlns:android="http://schemas.android.com/apk/res/android">  
          
          
        <item android:drawable="@drawable/menu_bg" android:state_pressed="true"/>  
          
        <item android:drawable="@drawable/menu_bg" android:state_focused="false" android:state_pressed="false"/>    
    selector>  

若要将thumb去掉并且不留下点击的波纹效果，设置属性如下：

android:thumb="@null"
android:background="@null"

---

通过设置事件监听器setOnSeekBarChangeListener来获取SeekBar的当前状态，通常要监听以下3个事件

1. public voidonProgressChanged(SeekBar seekBae,int progress,boolean fromUser); 用于监听SeekBar进度值的改变
2. public voidonStartTrackingTouch(SeekBar seekBar);用于监听SeekBar开始拖动
3. public voidonStopTrackingTouch(SeekBar seekBar);用于监听SeekBar停止拖动

---

设置seekbar调节范围为-6 到 +6可如下
设置属性android:max=”12”
然后在回调把值减去6即可，如下

            @Override
            public void onProgressChanged(SeekBar seekBar, final int progress, boolean fromUser) {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        value.setText("" + (progress - 6));
                    }
                });
            }