自定义seekbar的样式(图片)

案例使用的图片以下:java

                          

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

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 <selectorxmlns: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.xmlios

01 <?xml version="1.0" encoding="utf-8"?>
02 <ScrollViewxmlns: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文件经过 引用布局文件:app

 

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 }

最后执行效果:ide

 程序启动后的默认显示

 

拖动过程当中的显示

 

中止拖动后的显示

 二:使用颜色显示,和尚面是同样的,只有咱们定义颜色资源来替代图片资源文件seekbar_define_color_style.xml:以下:布局

01 <?xml version="1.0"encoding="UTF-8"?>    
02 <layer-listxmlns: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