737      阿裏雲  技術社區[雲棲]

Android下修改SeekBar樣式

SeekBar配置文件：

Xml代碼  

1. <SeekBar   
2.          android:id="@+id/player_seekbar"  
3.          android:layout_width="245px"  
4.          android:layout_height="25px"  
5.          android:progressDrawable="@drawable/seekbar_style"  
6.          android:thumb="@drawable/thumb"  
7.          android:paddingLeft="16px"  
8.          android:paddingRight="15px"  
9.          android:paddingTop="5px"  
10.          android:paddingBottom="5px"  
11.          android:progress="0"  
12.          android:max="0"  
13.          android:secondaryProgress="0"  
14.          />    

 android:progressDrawable="@drawable/seekbar_style"背景條

seekbar_style配置如下:

Xml代碼  

1. <?xml version="1.0" encoding="UTF-8"?>  
2.   
3. <layer-list xmlns:android="https://schemas.android.com/apk/res/android">  
4.   
5.      <item android:id="@android:id/background">  
6.          <shape>  
7.              <corners android:radius="5dip" />  
8.              <gradient  
9.                      android:startColor="#ff9d9e9d"  
10.                      android:centerColor="#ff5a5d5a"  
11.                      android:centerY="0.75"  
12.                      android:endColor="#ff747674"  
13.                      android:angle="270"  
14.              />  
15.          </shape>  
16.      </item>  
17.   
18.      <item android:id="@android:id/secondaryProgress">  
19.          <clip>  
20.              <shape>  
21.                  <corners android:radius="5dip" />  
22.                  <gradient  
23.                          android:startColor="#80ffd300"  
24.                          android:centerColor="#80ffb600"  
25.                          android:centerY="0.75"  
26.                          android:endColor="#a0ffcb00"  
27.                          android:angle="270"  
28.                  />  
29.              </shape>  
30.          </clip>  
31.      </item>  
32.   
33.      <item android:id="@android:id/progress">  
34.          <clip>  
35.              <shape>  
36.                  <corners android:radius="5dip" />  
37.                  <gradient  
38.                          android:startColor="#ff0099CC"  
39.                          android:centerColor="#ff3399CC"  
40.                          android:centerY="0.75"  
41.                          android:endColor="#ff6699CC"  
42.                          android:angle="270"  
43.                  />  
44.              </shape>  
45.          </clip>  
46.      </item>  
47.   
48.  </layer-list>  

 或者：用圖片如下：

Xml代碼  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <layer-list xmlns:android="https://schemas.android.com/apk/res/android">  
3.       
4.     <item android:id="@android:id/background"   
5.           android:drawable="@drawable/progress_bg" />  
6.        
7.     <item android:id="@android:id/secondaryProgress"  
8.           android:drawable="@drawable/second_progress">  
9.     </item>     
10.       
11.     <item android:id="@android:id/progress"  
12.           android:drawable="@drawable/first_progress">  
13.           
14.     </item>   
15. </layer-list>  

 方形

Xml代碼  

1. <layer-list xmlns:android="https://schemas.android.com/apk/res/android">   
2.   
3.   
4.     <item android:id="@android:id/background"   
5.     android:drawable="@drawable/progress_bg" />   
6.   
7.   
8.     <item android:id="@android:id/secondaryProgress">   
9.      <clip android:drawable="@drawable/second_progress" />   
10.     </item>   
11.   
12.   
13.     <item android:id="@android:id/progress">   
14.          <clip android:drawable="@drawable/first_progress" />   
15.     </item>   
16.   
17.   
18. </layer-list>  

 android:thumb="@drawable/thumb"就是那個會動的球

  配置如下：

Xml代碼  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <selector xmlns:android="https://schemas.android.com/apk/res/android">       
3.       
4.     <!-- 按下狀態-->  
5.     <item   
6.         android:state_focused="true"   
7.         android:state_pressed="true"   
8.         android:drawable="@drawable/thumb_pressed" />       
9.     <!-- 普通無焦點狀態 -->  
10.     <item   
11.         android:state_focused="false"   
12.         android:state_pressed="false"  
13.         android:drawable="@drawable/thumb_normal" />             
14.     <!-- 有焦點狀態-->  
15.     <item   
16.         android:state_focused="true"   
17.         android:state_pressed="false"             
18.         android:drawable="@drawable/thumb_focused" />        
19.     <!-- 有焦點 -->  
20.     <item   
21.         android:state_focused="true"             
22.         android:drawable="@drawable/thumb_focused" />    
23. </selector>  

最後更新：2017-04-03 08:26:14

  上一篇： Inside ARC — to see the code inserted by the compiler

  下一篇： 淺學設計模式之觀察者&lt;Observer&gt;模式及在android中的應用