237      阿裏雲  技術社區[雲棲]

為SeekBar滑塊設置固定值以及自定義Seekbar，progressbar樣式

最近在項目中使用到了seekbar和progressbar，且必須按照設計要求來進行設置，如下圖。要實現這個效果就必須對這兩個控件進行自定義。
 
 一,SeekBar
 
   一開始要實現這個效果參考網上的自定義方法根本無法達到這個效果，沒辦法隻能投機取巧了。

 1，背景刻度的圖片我是用了一個ImageView，然後在ImageView上放一個SeekBar。因為是個定製的平板應用，分辨率是限定的1280*768，所以我使用的是AbsoluteLayout這樣ImageView和SeekBar的位置和大小都是固定的了，估計在其他布局中這樣使用會有問題。

2，在布局文件中的代碼如下：

    <ImageView
 	android:layout_width="400dip"
    	android:layout_height="95dip"
    	android:layout_x="830dip"
    	android:layout_y="484dip"
    	android:src="@drawable/seekbar_background_5" //刻度圖片
    	android:scaleType="centerCrop"
    	android:background="@null"
 	/>
 	
    <SeekBar
    	android:
    	android:layout_width="360dip"
    	android:layout_height="64dip"
    	android:layout_x="850dip"
    	android:layout_y="498dip"
    	android:progressDrawable="@drawable/suretouch_seekbar_img"
    	android:thumb="@drawable/suretouch_seekbar_thumb"
    	
    	android:paddingLeft="5dip"
    	android:paddingRight="5dip"
    	android:paddingBottom="2dip"
    	android:maxHeight="1dip"  //注意：一定得設置進度條的高度，不然進度條會很高。
    	android:minHeight="1dip"
         android:max="100"
	android:progress="0"    	
    />

 3，自定義滑塊，在drawable文件中加入自定義的xml文件。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:andro>       
    <!-- 按下狀態 -->    
    <item       
        android:state_pressed="true"       
        android:drawable="@drawable/seekbar_block" />      
                
    <!-- 普通無焦點狀態 -->    
    <item       
        android:state_focused="false"       
        android:state_pressed="false"     
        android:drawable="@drawable/seekbar_block" />   
  
</selector> 

4，自定義進度條的顏色，同樣在drawable中加入自定義需要的xml文件。

<?xml version="1.0" encoding="UTF-8"?>     
<layer-list
  xmlns:andro>
     <item android:>  
         <clip>  
             <shape>  
                 <gradient  
                         android:startColor="@color/big_title"  
                         android:centerColor="@color/big_title"  
                         android:endColor="@color/big_title"  
                 />  
             </shape>  
         </clip>  
     </item>  
</layer-list>

5，設置滑塊的位置，也就是當滑動滑塊後隻能讓其停在刻度上，要現實這個效果我采用的方法是當滑塊停止的時候判斷當前的值，比如第二個刻度是25，這裏在0到25中去個中間數比如13，也就是當滑塊滑到大於13小於25到50的中間數時就setProgress(25)，這樣就設定在25的位置也就是第二個刻度位置。後麵的以此類推。seekbar的事件中有個OnStopTrackingTouch，代碼如下：

	public void onStopTrackingTouch(SeekBar seekBar) {
			// TODO Auto-generated method stub
			int seekProgress = mSeekBar.getProgress();
			if(seekProgress<13){
				mSeekBar.setProgress(0);
			}else if(seekProgress>=13 && seekProgress<38){
				mSeekBar.setProgress(25);
			}else if(seekProgress>=38 && seekProgress<63){
				mSeekBar.setProgress(50);
			}else if(seekProgress>=63 && seekProgress<88){
				mSeekBar.setProgress(75);
			}else if(seekProgress>=88){
				mSeekBar.setProgress(100);
			}
		}

對於ProgressBar的設置同樣是采用一個ImageView為背景（外圍的黑框），在ImageView上放一個ProgressBar控件，然後自定義進度條的顏色。隻是在調整它們之間的位置和大小的時候比較費時點，不管怎樣已經達到了想要的效果。

最後更新：2017-04-02 16:48:06

  上一篇： linux環境變量設置

  下一篇： svn對項目權限進行管理