Seekbar自定义样式及使用

seekbar的使用

    <SeekBar
        android:id="@+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可写成如下：
法一：

    <?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>     
                <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>     

法二：

<?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/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可写成如下：

    <?xml version="1.0" encoding="UTF-8"?>  
    <selector xmlns:android="http://schemas.android.com/apk/res/android">  
        <!-- seekbar的滑块样式 -->  
        <!-- 按下状态 -->  
        <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));
                    }
                });
            }