Android SeekBar自定义使用图片和颜色显示

案例使用的图片如下：

                          

1.在res/drawable目录下新增一个xml风格文件，seekbar_define_style.xml

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

02	<layer-list

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

04	<!-- 未选中 -->

05

<item

06	android:id="@android:id/background"

07	android:drawable="@drawable/hou"/>

08	<!-- 中 -->

09

<item

10	android:id="@android:id/progress"

11	android:drawable="@drawable/qian"/>

12

<item

13	android:id="@android:id/secondaryProgress"

14	android:drawable="@drawable/qian"/>

15	</layer-list>

2.在res/drawable下定义个seekbar_thumb.xml文件

 

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

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

03

04	<!-- 按下状态-->

05

<item

06	android:state_focused="true"

07	android:state_pressed="true"

08	android:drawable="@drawable/ic_launcher" />

09	<!-- 普通无焦点状态 -拖动按钮-->

10

<item

11	android:state_focused="false"

12	android:state_pressed="false"

13	android:drawable="@drawable/orbino_icon_pack_006" />

14	<!-- 有焦点状态-->

15

<item

16	android:state_focused="true"

17	android:state_pressed="false"

18	android:drawable="@drawable/ios" />

19	<!-- 有焦点 -->

20

<item

21	android:state_focused="true"

22	android:drawable="@drawable/ios"/>

23	</selector>

3.在res/layut下定义布局资源文件seekbar_define.xml

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

02	<ScrollView xmlns:android="<a href="http://schemas.android.com/apk/res/android" rel="nofollow">http://schemas.android.com/apk/res/android</a>"

03	android:layout_width="fill_parent"

04	android:layout_height="fill_parent"

05

>

06	<LinearLayout

07	android:layout_width="fill_parent"

08	android:layout_height="fill_parent"

09	android:orientation="vertical"

10

>

11

<TextView

12	android:id="@+id/seekbar_tetview_one"

13	android:layout_width="wrap_content"

14	android:layout_height="wrap_content"

15	android:text="SeekBar自定义"

16

/>

17

<TextView

18	android:id="@+id/seekbar_tetview_two"

19	android:layout_width="wrap_content"

20	android:layout_height="wrap_content"

21	android:text="SeekBar拖动时信息提示"

22

/>

23

<SeekBar

24	android:layout_width="321px"

25	android:layout_height="wrap_content"

26	android:layout_centerInParent="true"

27	android:maxHeight="20px"

28	android:minHeight="20px"

29	android:paddingLeft="18px"

30	android:paddingRight="18px"

31	android:max="100"

32	android:progressDrawable="@drawable/seekbar_define_style"

33	android:thumb="@drawable/seekbar_thumb"

34	android:id="@+id/seekBar"/>

35	</LinearLayout>

36	</ScrollView>

4.定义java文件通过 引用布局文件：

 

01	package com.test;

02

03	import android.R.integer;

04	import android.app.Activity;

05	import android.os.Bundle;

06	import android.os.Handler;

07	import android.os.Message;

08	import android.widget.SeekBar;

09	import android.widget.SeekBar.OnSeekBarChangeListener;

10	import android.widget.TextView;

11

12	public class SeekBarDemo_DefineDemo extends Activity {

13	private SeekBar seekBar;

14	private TextView textView_one, textView_two;

15

16

@Override

17	protected void onCreate(Bundle savedInstanceState) {

18	super.onCreate(savedInstanceState);

19	setContentView(R.layout.seekbar_define);

20

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

22

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

24

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

26

27	seekBar.setOnSeekBarChangeListener(seekbarChangeListener);

28

29

}

30

31	private OnSeekBarChangeListener seekbarChangeListener = new OnSeekBarChangeListener() {

32

33	// 停止拖动时执行

34

@Override

35	public void onStopTrackingTouch(SeekBar seekBar) {

36	// TODO Auto-generated method stub

37	textView_two.setText("停止拖动了！");

38

39

}

40

41	// 在进度开始改变时执行

42

@Override

43	public void onStartTrackingTouch(SeekBar seekBar) {

44	// TODO Auto-generated method stub

45	textView_two.setText("进度开始改变");

46

}

47

48	// 当进度发生改变时执行

49

@Override

50	public void onProgressChanged(SeekBar seekBar, int progress,

51	boolean fromUser) {

52	textView_two.setText("正在进行拖动操作，还没有停下来一直再拖动");

53	Message message = new Message();

54

55	Bundle bundle = new Bundle();// 存放数据

56

57	float pro = seekBar.getProgress();

58

59	float num = seekBar.getMax();

60

61	float result = (pro / num) * 100;

62	bundle.putFloat("key", result);

63

64	message.setData(bundle);

65

66	message.what = 0;

67

68	handler.sendMessage(message);

69

70

}

71

};

72

73

/**

74	* 用Handler来更新UI

75

*/

76	private Handler handler = new Handler() {

77

@Override

78	public void handleMessage(Message msg) {

79	textView_one.setText("当前拖动位置占 :       "

80	+ msg.getData().getFloat("key") + "/100");

81

82

}

83

84

};

85

86

}

最后执行效果：

 

 

 

 二：使用颜色显示，和尚面是一样的，只有我们定义颜色资源来替代图片资源文件seekbar_define_color_style.xml：如下：

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

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

03

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

05	android:paddingTop="3px"

06	android:paddingBottom="3px">

07

<shape>

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

09

<gradient

10	android:startColor="#ffffffff"

11	android:centerColor="#ff000000"

12	android:endColor="#ff808A87"

13	android:centerY="0.45"

14	android:angle="270"/>

15

</shape>

16

</item>

17

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

19	android:paddingTop="3px"

20	android:paddingBottom="3px" >

21

<clip>

22

<shape>

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

24

<gradient

25	android:startColor="#ffffffff"

26	android:centerColor="#ffFFFF00"

27	android:endColor="#ffAABD00"

28	android:centerY="0.45"

29	android:angle="270"/>

30

</shape>

31

</clip>

32

</item>

33	</layer-list>

之后再SeekBar标签使用如下属性进行引入：其他保持不变

1	android:progressDrawable="@drawable/seekbar_define_color_style"

执行效果：

 

由于SeekBar的属性thumb引入了自定义的seekbar_thumb.xml文件，拖动图标是我们自定义的图片：除去这个属性

1	android:thumb="@drawable/seekbar_thumb"

就回复系统默认状态效果最后效果如下：

我们可以通过颜色值再次休息seekbar_thumb.xml文件，使拖动按钮设置成自定义颜色：