Android自定義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 自定義SeekBar效果圖1

 

圖3 自定義SeekBar效果圖2