Android學習筆記18：自訂Seekbar拖動條式樣

SeekBar拖動條可以由使用者控制，進行拖動操作。比如，應用程式中使用者需要對音量進行控制，就可以使用拖動條來實現。

1.SeekBar控制項的使用

1.1SeekBar常用屬性

　　SeekBar的常用屬性有以下一些：

android:max[integer]//設定拖動條的最大值

android:progress[integer]//設定當前的進度值

android:secondaryProgress[integer]//設定第二進度，通常用做顯示視頻等的緩衝效果

android:thumb[drawable]//設定滑塊的圖樣

android:progressDrawable[drawable]//設定進度條的圖樣

1.2SeekBar事件監聽器

　　在使用SeekBar時，我們可以通過設定事件監聽器setOnSeekBarChangeListener來擷取SeekBar的目前狀態。在SeekBar中通常需要監聽以下3個事件：

public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser);

public void onStartTrackingTouch(SeekBar seekBar);

public void onStopTrackingTouch(SeekBar seekBar);

　　其中，onProgressChanged()用於監聽SeekBar進度值的改變；onStartTrackingTouch()用於監聽SeekBar開始拖動；onStopTrackingTouch()用於監聽SeekBar停止拖動。

1.3執行個體

　　在本執行個體中，實現了一個簡單的SeekBar案例，設定了拖動條的最大值為100，當前進度值為30，第二進度為50。設定了SeekBar的事件監聽器，對SeekBar進度值的改變、SeekBar開始拖動、SeekBar停止拖動進行了監聽，並將結果分別顯示在兩個TextView控制項中。

　　在xml布局檔案中，實現了對一個SeekBar控制項和兩個TextView控制項的布局設定，具體原始碼如下：

xml布局檔案
 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:orientation="vertical"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent" >
 6
 7     <SeekBar
 8         android:id="@+id/seekbar"
 9         android:layout_width="match_parent"
10         android:layout_height="wrap_content"
11         android:max="100"
12         android:progress="30"
13         android:secondaryProgress="50">       
14     </SeekBar>
15    
16     <TextView
17         android:id="@+id/textview1"
18         android:layout_width="match_parent"
19         android:layout_height="wrap_content"    >       
20     </TextView>
21    
22     <TextView
23         android:id="@+id/textview2"
24         android:layout_width="match_parent"
25         android:layout_height="wrap_content"    >       
26     </TextView>
27 </LinearLayout>
　　在java代碼中，實現了對SeekBar進度值的改變、SeekBar開始拖動、SeekBar停止拖動的監聽，具體原始碼如下：

java代碼
 1 package com.example.android_seekbar;
 2
 3 import android.os.Bundle;
 4 import android.widget.SeekBar;
 5 import android.widget.SeekBar.OnSeekBarChangeListener;
 6 import android.widget.TextView;
 7 import android.app.Activity;
 8
 9 public class MainActivity extends Activity implements OnSeekBarChangeListener {
10
11     SeekBar mSeekBar;                      //SeekBar對象，用於顯示進度條
12     TextView mTextView1;               //TextView對象，用於顯示當前進度值
13     TextView mTextView2;               //TextView對象，用於顯示拖動狀態
14    
15     @Override
16     public void onCreate(Bundle savedInstanceState) {
17         super.onCreate(savedInstanceState);
18         setContentView(R.layout.activity_main);                          //載入布局檔案
19        
20         //載入控制項
21         mSeekBar = (SeekBar)this.findViewById(R.id.seekbar);
22         mTextView1 = (TextView)this.findViewById(R.id.textview1);
23         mTextView2 = (TextView)this.findViewById(R.id.textview2);
24        
25         mSeekBar.setOnSeekBarChangeListener(this);          //設定SeekBar的監聽器
26     }
27
28     //進度值改變事件監聽
29     public void onProgressChanged(SeekBar seekBar, int progress,
30             boolean fromUser) {
31         mTextView1.setText("當前值：" + progress);
32     }
33
34     //開始拖動事件監聽
35     public void onStartTrackingTouch(SeekBar seekBar) {
36         mTextView2.setText("正在調節");
37     }
38
39     //停止拖動事件監聽
40     public void onStopTrackingTouch(SeekBar seekBar) {
41         mTextView2.setText("停止調節");
42     }
43 }
　　執行個體運行後的效果1所示。

 

 

圖1 Seekbar

2.自訂SeekBar式樣

　　Android提供的預設SeekBar式樣很單一，並不能完全滿足開發的需要，如何來定製自己的SeekBar式樣呢？

　　不難看出，一個SeekBar是由滑塊和滑竿兩部分組成的。所以，要實現自訂的SeekBar式樣，只需要分別實現自訂的滑塊和滑竿就可以了。

2.1自訂滑塊的實現

　　通過觀察可以看出，滑塊有兩種狀態：押下狀態和未押下狀態。當押下滑塊時，滑塊為高亮顯示狀態；當未押下滑塊時，滑塊為置灰狀態。

　　所以，在我們自訂的Seekbar中，可以使用兩張圖片來分別表示滑塊的押下和未押下狀態。具體可以在工程的res/drawable目錄下建立thumb.xml檔案，來載入這兩種張圖片，並通過設定android:state_pressed屬性來選擇顯示哪張圖片。

　　具體的thumb.xml原始碼如下：

thumb.xml原始碼
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 3    
 4     <!--  滑塊未壓下時 -->
 5     <item
 6         android:state_pressed="false"
 7         android:drawable="@drawable/thumb_grey"    >     
 8     </item>
 9    
10     <!-- 滑塊壓下時 -->
11     <item
12         android:state_pressed="true"
13         android:drawable="@drawable/thumb_green"    >     
14     </item>
15    
16 </selector>
2.2自訂滑竿的實現

　　要實現自訂的滑竿式樣，可以通過設定滑竿背景、進度條式樣以及第二進度條式樣來實現。具體可以在工程的res/drawable目錄下建立seekbarbackground.xml檔案，並通過設定android:drawable屬性來載入三張圖片分別表示滑竿背景、進度條式樣以及第二進度條式樣。

　　具體的seekbarbackground.xml原始碼如下：

seekbarbackground.xml原始碼
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 3    
 4     <!-- 滑竿背景 -->
 5     <item
 6         android:id="@android:id/background"
 7         android:drawable="@drawable/seekbar_background"    >    
 8     </item>
 9    
10     <!-- 第二進度條式樣 -->
11     <item
12         android:id="@android:id/secondaryProgress"   
13         android:drawable="@drawable/seekbar_secondaryprogress"    > 
14     </item>
15 
16     <!-- 進度條式樣 -->
17     <item
18         android:id="@android:id/progress"
19         android:drawable="@drawable/seekbar_progress"    > 
20     </item>
21 </layer-list>
2.3自訂SeekBar式樣的效果

　　定義好了自己的滑塊和滑竿式樣之後，就可以在main.xml檔案中載入自己定義的滑塊和滑竿式樣了。載入方法如下：

android:thumb="@drawable/thumb"

android:progressDrawable="@drawable/seekbarbackground"

　　運行後就可以看到自己定義的Seekbar式樣了，2和圖3所示。其中，圖2是滑塊未押下時的Seekbar式樣，圖3是滑塊押下並滑動時的Seekbar式樣。

 

圖2 自訂SeekBar1

 

圖3 自訂SeekBar2