Android SeekBar自定義使用圖片和顏色顯示

案例使用的圖片以下：

                         

1.在res/drawable目錄下新增一個xml風格文件，seekbar_define_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"
		android:drawable="@drawable/hou"/>
	<!-- 中 -->
	<item
		android:id="@android:id/progress"
		android:drawable="@drawable/qian"/>
	<item
		android:id="@android:id/secondaryProgress"
		android:drawable="@drawable/qian"/>
</layer-list>

2.在res/drawable下定義個seekbar_thumb.xml文件

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">        
       
    <!-- 按下狀態-->  
    <item    
        android:state_focused="true"    
        android:state_pressed="true"    
        android:drawable="@drawable/ic_launcher" />        
    <!-- 普通無焦點狀態 -拖動按鈕-->  
    <item    
        android:state_focused="false"    
        android:state_pressed="false"  
        android:drawable="@drawable/orbino_icon_pack_006" />              
    <!-- 有焦點狀態-->  
    <item    
        android:state_focused="true"    
        android:state_pressed="false"              
        android:drawable="@drawable/ios" />         
    <!-- 有焦點 -->  
    <item    
        android:state_focused="true"              
        android:drawable="@drawable/ios"/>
</selector>

3.在res/layut下定義佈局資源文件seekbar_define.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
         android:orientation="vertical"
        >
    <TextView 
	android:id="@+id/seekbar_tetview_one"
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"
	android:text="SeekBar自定義"
	/>
    <TextView 
	android:id="@+id/seekbar_tetview_two"
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"
	android:text="SeekBar拖動時信息提示"
	/>
    <SeekBar
    android:layout_width="321px"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:maxHeight="20px"
    android:minHeight="20px"
    android:paddingLeft="18px"
    android:paddingRight="18px"
    android:max="100"
    android:progressDrawable="@drawable/seekbar_define_style"
    android:thumb="@drawable/seekbar_thumb"
    android:id="@+id/seekBar"/>
 </LinearLayout>
</ScrollView>

4.定義java文件經過 引用佈局文件：

 

package com.test;

import android.R.integer;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;

public class SeekBarDemo_DefineDemo extends Activity {
	private SeekBar seekBar;
	private TextView textView_one, textView_two;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.seekbar_define);

		seekBar = (SeekBar) findViewById(R.id.seekBar);

		textView_one = (TextView) findViewById(R.id.seekbar_tetview_one);

		textView_two = (TextView) findViewById(R.id.seekbar_tetview_two);

		seekBar.setOnSeekBarChangeListener(seekbarChangeListener);

	}

	private OnSeekBarChangeListener seekbarChangeListener = new OnSeekBarChangeListener() {

		// 中止拖動時執行
		@Override
		public void onStopTrackingTouch(SeekBar seekBar) {
			// TODO Auto-generated method stub
			textView_two.setText("中止拖動了！");

		}

		// 在進度開始改變時執行
		@Override
		public void onStartTrackingTouch(SeekBar seekBar) {
			// TODO Auto-generated method stub
			textView_two.setText("進度開始改變");
		}

		// 當進度發生改變時執行
		@Override
		public void onProgressChanged(SeekBar seekBar, int progress,
				boolean fromUser) {
			textView_two.setText("正在進行拖動操做，尚未停下來一直再拖動");
			Message message = new Message();

			Bundle bundle = new Bundle();// 存放數據

			float pro = seekBar.getProgress();

			float num = seekBar.getMax();

			float result = (pro / num) * 100;
			bundle.putFloat("key", result);

			message.setData(bundle);

			message.what = 0;

			handler.sendMessage(message);

		}
	};

	/**
	 * 用Handler來更新UI
	 */
	private Handler handler = new Handler() {
		@Override
		public void handleMessage(Message msg) {
			textView_one.setText("當前拖動位置佔 :       "
					+ msg.getData().getFloat("key") + "/100");

		}

	};

}

最後執行效果：

 

 

 

 二：使用顏色顯示，和尚面是同樣的，只有咱們定義顏色資源來替代圖片資源文件seekbar_define_color_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"
            android:paddingTop="3px" 
         android:paddingBottom="3px">     
      <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"
            android:paddingTop="3px" 
         android:paddingBottom="3px" >     
       <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>

以後再SeekBar標籤使用以下屬性進行引入：其餘保持不變

android:progressDrawable="@drawable/seekbar_define_color_style"

執行效果：

 

因爲SeekBar的屬性thumb引入了自定義的seekbar_thumb.xml文件，拖動圖標是咱們自定義的圖片：除去這個屬性

android:thumb="@drawable/seekbar_thumb"

就回復系統默認狀態效果最後效果以下：

咱們能夠經過顏色值再次休息seekbar_thumb.xml文件，使拖動按鈕設置成自定義顏色：