学步园

  系统自带的SeekBar组件的样式较为老土，已经不能满足广大开发者的需求了，这里给大家介绍一个简单快捷的定制自己的SeekBar样式的方法，不必重写哦！

  1.准备几张个性化的图片，一张是拖动条背景图，一张是进度条图，一张是拖动条图。

    这里给几张示范图：

   ：拖动条背景图

  ：进度条图
 
  ：拖动条图
 

  2.在res/drawable 目录下新建一个xml文件 ，配置信息如下：

seekbar_progress.xml

Java代码
 

1. <?xml version="1.0" encoding="utf-8"?>   
2. <layer-list   
3.   xmlns:android="http://schemas.android.com/apk/res/android">   
4.     <item android:id="@android:id/background"> // 背景项
     
5.         <nine-patch android:src="@drawable/progress_background" /> // 背景图 // 这里使用9文件，因此这么配置如果使用的是普通图片可直接使用<drawable />标签，或者使用<shape />标签，自定义图形
     
6.     </item>   
7.     <item android:id="@android:id/progress"> // 进度项
     
8.         <clip>   
9.             <nine-patch android:src="@drawable/progress_progress" /> // 进度图
     
10.         </clip>   
11.     </item>   
12. </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"> // 背景项
        <nine-patch android:src="@drawable/progress_background" /> // 背景图 // 这里使用9文件，因此这么配置如果使用的是普通图片可直接使用<drawable />标签，或者使用<shape />标签，自定义图形
    </item>
    <item android:id="@android:id/progress"> // 进度项
        <clip>
            <nine-patch android:src="@drawable/progress_progress" /> // 进度图
        </clip>
    </item>
</layer-list>

  3.接下来<SeekBar ...        />标签中添加如下参数：

Java代码
 

1. android:progressDrawable="@drawable/seekbar_progress"  
2. android:thumb="@drawable/thumb_drawable"  

				android:progressDrawable="@drawable/seekbar_progress"
				android:thumb="@drawable/thumb_drawable"

好了，经过上面的三个步骤，就可以轻松的实现自定义的SeekBar视图了。看下效果吧！

附：这里再贴一个使用<shape  />标签为SeekBar设置背景和进度的xml配置文件，注意和上面的使用9文件的比对：

Java代码
 

1. <?xml version="1.0" encoding="utf-8"?>   
2. <!-- ChenJianLi Code: View: Seekbar    
3.         滑动时的背景效果 -->   
4.   
5. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">   
6.   <!--  背景  -->   
7.     <item android:id="@android:id/background">   
8.         <shape>   
9.             <corners android:radius="5dip" />   
10.             <gradient   
11.                     android:startColor="#ffffffff"  
12.                     android:centerColor="#fffffff0"  
13.                     android:centerY="0.75"  
14.                     android:endColor="#fffffafa"  
15.                     android:angle="270"  
16.             />   
17.         </shape>   
18.     </item>   
19.     <!--  第二进度条  -->   
20.     <item android:id="@android:id/secondaryProgress">   
21.         <clip>   
22.             <shape>   
23.                 <corners android:radius="5dip" />   
24.                 <gradient   
25.                         android:startColor="#8000cdcd"  
26.                         android:centerColor="#8000bfff"  
27.                         android:centerY="0.75"  
28.                         android:endColor="#a000b2ee"  
29.                         android:angle="270"  
30.                 />   
31.             </shape>   
32.         </clip>   
33.     </item>   
34.     <!--  第一进度条  -->   
35.     <item android:id="@android:id/progress">   
36.         <clip>   
37.             <shape>   
38.                 <corners android:radius="5dip" />   
39.                 <gradient   
40.                         android:startColor="#ff00ffff"  
41.                         android:centerColor="#ff00ced1"  
42.                         android:centerY="0.75"  
43.                         android:endColor="#ff00f5ff"  
44.                         android:angle="270"  
45.                 />   
46.             </shape>   
47.         </clip>   
48.     </item>   
49.        
50. </layer-list>  

<?xml version="1.0" encoding="utf-8"?>
<!-- ChenJianLi Code: View: Seekbar 
        滑动时的背景效果 -->

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