自定義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