Android界面开发之拖动条及自定义SeekBar

  拖动条（SeekBar）类似进度条，不同的是用户可以控制，比如，应用程序中用户可以对音效进行控制，这就可以使用拖动条SeekBar来实现。由于拖动条可以被用户控制，所以需要对其进行事件监听，这就需要实现SeekBar.OnSeekBarChangeListener接口。在SeekBar中共需要监听3个事件，分别是:数值的改在如(onProgressChanged)、开始拖动(onStartTrackingTouch)、停止拖动(onStopTrackingTouch)。在onProgressChanged中我们可以得到当前数值的大小。下面我们来看看示例的运行效果，如图所示用户正在拖动，停止调节



首先需要在布局文件中声明SeekBar，代码如下所示：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

 

    <SeekBar android:id="@+id/seek"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:max="100"

        android:progress="50"

        android:secondaryProgress="75" />

        

    <SeekBar android:id="@+id/seek2"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:max="100"

        android:progress="50"

        android:secondaryProgress="80" />

 

    <TextView android:id="@+id/progress1"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" />

 

    <TextView android:id="@+id/tracking1"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" />

        

    <TextView android:id="@+id/progress2"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" />

 

    <TextView android:id="@+id/tracking2"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" />

        

</LinearLayout>

代码中通过“android:max="100"”设置了最大值、"progress="50"“设置了当前值等属性。因此在使用时就只需要监听其事件井处理即可，处理代码如下所示：

package com.demo.app;

import android.app.Activity;

import android.os.Bundle;

import android.widget.SeekBar;

import android.widget.SeekBar.OnSeekBarChangeListener;

import android.widget.TextView;

 

public class AppTestActivity extends Activity {

    //声明SeekBar对象

    SeekBar     mSeekBar1,mSeekBar2;

    TextView    mProgressText1,mTrackingText1,mProgressText2,mTrackingText2;

    /** Called when the activity is first created.

     * author:wang

     * date:2012.7.15

     * */

    @Override

    protected void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

 

        setContentView(R.layout.main);

        //取得SeekBar对象

        

        mProgressText1 =(TextView)findViewById(R.id.progress1);

        mTrackingText1 =(TextView)findViewById(R.id.tracking1);

        mProgressText2=(TextView) findViewById(R.id.progress2);

        mTrackingText2=(TextView) findViewById(R.id.tracking2);

        initSeekBar();

    }

    

    
public void initSeekBar() {
mSeekBar1 = (SeekBar) findViewById(R.id.seek);

        mSeekBar2=(SeekBar) findViewById(R.id.seek2);

        mSeekBar1.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

public void onStopTrackingTouch(SeekBar seekBar) {
mTrackingText1.setText("停止调节");

}

public void onStartTrackingTouch(SeekBar seekBar) {
mTrackingText1.setText("正在调节");

}

public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
mProgressText1.setText("当前值："+progress);

}
});

        mSeekBar2.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

public void onStopTrackingTouch(SeekBar seekBar) {
 mTrackingText2.setText("停止调节");

}

public void onStartTrackingTouch(SeekBar seekBar) {
 mTrackingText2.setText("正在调节");

}

public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
 mProgressText2.setText("当前值："+progress);

}
});
}

}

如果觉得默认的形式不好看，我们可以自定义样式，具体方法如下：

自定义SeekBar

xml属性

<SeekBar android:id="@android:id/progress"  

        style="?android:attr/progressBarStyleHorizontal"  

        android:progressDrawable="@drawable/seekbar_style"  
  

        android:thumb="@drawable/thumb"  

        android:layout_width="fill_parent"  

        android:layout_height="23dip"  

        android:paddingLeft="25dip"  

        android:paddingRight="25dip"  
                android:paddingBottom="4dip />  

其实最最关键的就是：

android:progressDrawable="@drawable/seekbar_style"  
  

android:thumb="@drawable/thumb"  
seekbar_style.xml：

<?xml version="1.0" encoding="UTF-8"?>  
  

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
  

  

   <item android:id="@android:id/background">  
  

      <shape>     

         <corners android:radius="10dip" />  
  

         <gradient     

             android:startColor="#ffffffff"  

             android:centerColor="#ff000000"  
  

             android:endColor="#ff808A87" 
  

             android:centerY="0.45"  
  

             android:angle="270"/>  
  

      </shape>     

   </item>     

      

   <item android:id="@android:id/progress">  
  

       <clip>     

          <shape>     

              <corners android:radius="10dip" />  
  

              <gradient     

                  android:startColor="#ffffffff"  

                  android:centerColor="#ffFFFF00"  
  

                  android:endColor="#ffAABD00" 
  

                  android:centerY="0.45"  
  

                  android:angle="270"/>  
  

          </shape>     

       </clip>     

   </item>     

 </layer-list>   
thumb.xml：

<?xml version="1.0" encoding="UTF-8"?>  
  

<selector xmlns:android="http://schemas.android.com/apk/res/android">        
  

    <!-- 按下状态 -->    

    <item       

        android:state_pressed="true"    
  

        android:drawable="@drawable/xxxx" />   
  

                

    <!-- 普通无焦点状态 -->    

    <item       

        android:state_focused="false"    
  

        android:state_pressed="false"  
  

        android:drawable="@drawable/xxx" />
  

  

上面的xxxx是图片   

</selector> 

一、SeekBar教程篇

拖动条（SeekBar）
http://www.eoeandroid.com/thread-62309-1-1.html

自定义SeekBar的背景颜色，进度条颜色，以及滑块的图片
http://www.eoeandroid.com/thread-38866-1-1.html

Android 自定义SeekBar
http://www.eoeandroid.com/thread-70001-1-1.html

Android中SeekBar - 可拖动的进度条控件
http://www.eoeandroid.com/thread-66786-1-1.html

Android进度条(ProgressBar)拖动条(SeekBar)星级滑块(RatingBar)的例子
http://www.eoeandroid.com/thread-97899-1-1.html

Android 让你的SeekBar 也支持长按事件
http://www.eoeandroid.com/thread-32310-1-1.html

Android 音量seekbar制作
http://www.eoeandroid.com/thread-83845-1-1.html

二、SeekBar实例源码篇
竖直SeekBar源码
http://www.eoeandroid.com/thread-34269-1-1.html

Android 中文 API （18） —— AbsSeekBar
http://www.eoeandroid.com/thread-39831-1-1.html

几行代码的进度条
http://www.eoeandroid.com/thread-56616-1-1.html

Android 竖着的SeekBar
http://www.eoeandroid.com/thread-93431-1-1.html

自定义seekbar的样式
http://www.eoeandroid.com/thread-82075-1-1.html

三、SeekBar常见问题与解决篇
如何让SeekBar垂直显示？【已解决】
http://www.eoeandroid.com/thread-5355-1-1.html

请教：如何改变ProgressBar和SeekBar的进度条颜色【已解决】
http://www.eoeandroid.com/thread-5558-1-1.html

SeekBar和AbsSeekBar为什么这样设计?【已解决】
http://www.eoeandroid.com/thread-15267-1-1.html

SeekBar 疑惑，求解【已解决】
http://www.eoeandroid.com/thread-18559-1-1.html

关于SeekBar滑杆问题【已解决】
http://www.eoeandroid.com/thread-148410-1-1.html

向大家请教一个问题，关于seekbar的，请大家进来看看【已解决】
http://www.eoeandroid.com/thread-110862-1-1.html

想做个音量控制，当拖动seekbar的时候，能播放对应的声音【已解决】
http://www.eoeandroid.com/thread-166624-1-1.html

关于seekbar和thread的问题【已解决】
http://www.eoeandroid.com/thread-37756-1-1.html

android  SeekBar的一个帖子，甚是让我心烦[SeekBar特效]【已解决】
http://www.eoeandroid.com/thread-100961-1-1.html

四、SeekBar未解决问题篇

问一个关于Seekbar的问题【未解决】
http://www.eoeandroid.com/thread-170302-1-1.html

seekbar 滑动是使图片放大缩小，点击放大或缩小按钮时seekbar相应改变【未解决】
http://www.eoeandroid.com/thread-157757-1-1.html

请问这样的Seekbar如何实现？【未解决】
http://www.eoeandroid.com/thread-170186-1-1.html

求救各位达人，如何实现一个环形的seekbar，谢谢【未解决】
http://www.eoeandroid.com/thread-153134-1-1.html

SeekBar进度条显示问题【未解决】
http://www.eoeandroid.com/thread-158360-1-1.html