滑動條

SeekBar

參考網頁http://my.oschina.net/amigos/blog/60181

案例使用的圖片如下：

1.在res/drawable目錄下新增一個xml的文件，seekbar_define_style.xml

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="<a href="http://schemas.android.com/apk/res/android" rel="nofollow">http://schemas.android.com/apk/res/android</a>"

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

//停止拖動了

}

// 在進度開始改變時執行

@Override

public void onStartTrackingTouch(SeekBar seekBar) {

// TODO Auto-generated method stub

//進度開始改變了

}

// 當進度發生改變時執行

@Override

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

//正在進行拖動操作，還沒有停下一直再拖動

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) {

System.out.println("當前拖動位置占："+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文件，使拖動按鈕設成自定義顏色：