自定义SeekBar

墨蓝 2022-08-27 11:55 137阅读 0赞

只有一个SeekBar控件，注意它的 android:progressDrawable="@drawable/seekbar\_img" 以及android:thumb="@drawable/thumb" 它们分别对应的是 进度条的图片以及拖动滑块的图片，这里的图片也可以是我们自定义的drawable中的xml文件，可以理解成这两个属性应该如何显示的意思,而@drawable/seekbar\_img和@drawable/thumb它们分别对应着 drawable 文件夹中的文件seekbar\_img.xml和thumb.xml，它们表示着如何去显示进度条与滑块  
  
当初我想的是在网上找SeekBar的原始样式文件是如何定义，这样就可以照搬代码，修改一些我需要的图片以及颜色和大小就行了，于是就开始搜索,这里要用到的是Android的系统源码，具体下载办法网上很多，需要用到cygwin,大家可以参考[http://tech.it168.com/a2009/0529/579/000000579026.shtml][http_tech.it168.com_a2009_0529_579_000000579026.shtml]   
  
  
  
下好源代以后，可以在 C:\\cygwin\\home\\android\\frameworks\\base\\core\\res\\res\\drawable 这个路径下找到很多图片与android的原始控件样式（即xml文件)  
找一下，哈哈，好东西可不少，以后要改样式全靠它们了  
我们可以在这是里面找到seek\_thumb.xml，内容如下

Xml代码   ![收藏代码][icon_star.png]

它定义的是seekbar的滑块样式，内容很简单，大家应该看得懂，分别对应着按下，选中，以及获得焦点时滑块的图片  
  
  
另外，我们还可以找到 progress\_horizontal.xml,内容如下

Xml代码   ![收藏代码][icon_star.png]

1.  **<?****xml** version="1.0" encoding="utf-8"**?>**  
2.  <!-- Copyright (C) 2008 The Android Open Source Project  
3.    
4.       Licensed under the Apache License, Version 2.0 (the "License");  
5.       you may not use this file except in compliance with the License.  
6.       You may obtain a copy of the License at  
7.    
8.            http://www.apache.org/licenses/LICENSE-2.0  
9.    
10.      Unless required by applicable law or agreed to in writing, software  
11.      distributed under the License is distributed on an "AS IS" BASIS,  
12.      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  
13.      See the License for the specific language governing permissions and  
14.      limitations under the License.  
15. \--**>**  
16.   
17. **<****layer-list** xmlns:android="http://schemas.android.com/apk/res/android"**>**  
18.       
19.     **<****item** android:id="@android:id/background"**>**  
20.         **<****shape****>**  
21.             **<****corners** android:radius="5dip" **/>**  
22.             **<****gradient**  
23.                     android:startColor="\#ff9d9e9d"  
24.                     android:centerColor="\#ff5a5d5a"  
25.                     android:centerY="0.75"  
26.                     android:endColor="\#ff747674"  
27.                     android:angle="270"  
28.             **/>**  
29.         **</****shape****>**  
30.     **</****item****>**  
31.       
32.     **<****item** android:id="@android:id/secondaryProgress"**>**  
33.         **<****clip****>**  
34.             **<****shape****>**  
35.                 **<****corners** android:radius="5dip" **/>**  
36.                 **<****gradient**  
37.                         android:startColor="\#80ffd300"  
38.                         android:centerColor="\#80ffb600"  
39.                         android:centerY="0.75"  
40.                         android:endColor="\#a0ffcb00"  
41.                         android:angle="270"  
42.                 **/>**  
43.             **</****shape****>**  
44.         **</****clip****>**  
45.     **</****item****>**  
46.       
47.     **<****item** android:id="@android:id/progress"**>**  
48.         **<****clip****>**  
49.             **<****shape****>**  
50.                 **<****corners** android:radius="5dip" **/>**  
51.                 **<****gradient**  
52.                         android:startColor="\#ffffd300"  
53.                         android:centerColor="\#ffffb600"  
54.                         android:centerY="0.75"  
55.                         android:endColor="\#ffffcb00"  
56.                         android:angle="270"  
57.                 **/>**  
58.             **</****shape****>**  
59.         **</****clip****>**  
60.     **</****item****>**  
61.       
62. **</****layer-list****>**

有了这两个文件的源代码，我们就可以依样画葫芦了  
首先在自己的工程下drawable文件夹中建立seek\_bar.xml文件与thumb.xml文件  
我写的两个文件内容如下  
seekbar\_img.xml

Xml代码   ![收藏代码][icon_star.png]

1.  **<?****xml** version="1.0" encoding="utf-8"**?>**  
2.  **<****layer-list** xmlns:android="http://schemas.android.com/apk/res/android"**>**  
3.        
4.      **<****item** android:id="@+android:id/background" android:drawable="@drawable/bg" **/>**  
5.        
6.      **<****item** android:id="@+android:id/SecondaryProgress"  
7.          android:drawable="@drawable/bg" **/>**  
8.        
9.      **<****item** android:id="@+android:id/progress" android:drawable="@drawable/bg2" **/>**  
10. **</****layer-list****>**

thumb.xml

Xml代码   ![收藏代码][icon_star.png]

1.  **<?****xml** version="1.0" encoding="UTF-8"**?>**  
2.  **<****selector** xmlns:android="http://schemas.android.com/apk/res/android"**>**  
3.        
4.      **<****item** android:state\_pressed="true" android:drawable="@drawable/bg3" **/>**  
5.    
6.        
7.      **<****item** android:state\_focused="false" android:state\_pressed="false"  
8.          android:drawable="@drawable/bg4" **/>**  
9.  **</****selector****>**

这时运行程序，我的截图如下，丑了点，但是目的达到了  
![10101921243bfbb7ca1713017f.jpg][]

这是根据自己要求修改样式比较简单的做法  
下面是这个工程的源代码

[http_tech.it168.com_a2009_0529_579_000000579026.shtml]: http://tech.it168.com/a2009/0529/579/000000579026.shtml
[icon_star.png]: /images/20220824/a3760ff55544427ebbe03d08990d4a48.png
[10101921243bfbb7ca1713017f.jpg]: /images/20220824/6cad80f66d4a4e55b8c7be77275a3a37.png