当前位置:   article > 正文

Android Seekbar间隔和自定义_android seekbar分段

android seekbar分段

最近在项目中使用到了seekbar和progressbar,且必须按照设计要求来进行设置,如下图。要实现这个效果就必须对这两个控件进行自定义。
 
 一,SeekBar
  
   一开始要实现这个效果参考网上的自定义方法根本无法达到这个效果,没办法只能投机取巧了。

 1,背景刻度的图片我是用了一个ImageView,然后在ImageView上放一个SeekBar。因为是个定制的平板应用,分辨率是限定的1280*768,所以我使用的是AbsoluteLayout这样ImageView和SeekBar的位置和大小都是固定的了,估计在其他布局中这样使用会有问题。

2,在布局文件中的代码如下:

[html] view plaincopy

  1.    <ImageView  
  2.     android:layout_width="400dip"  
  3.     android:layout_height="95dip"  
  4.     android:layout_x="830dip"  
  5.     android:layout_y="484dip"  
  6.     android:src="@drawable/seekbar_background_5" //刻度图片  
  7.     android:scaleType="centerCrop"  
  8.     android:background="@null"  
  9.     />  
  10.       
  11.    <SeekBar  
  12.     android:id="@+id/sensor_sensitivity"  
  13.     android:layout_width="360dip"  
  14.     android:layout_height="64dip"  
  15.     android:layout_x="850dip"  
  16.     android:layout_y="498dip"  
  17.     android:progressDrawable="@drawable/suretouch_seekbar_img"  
  18.     android:thumb="@drawable/suretouch_seekbar_thumb"  
  19.     style="?android:attr/progressBarStyleHorizontal"  
  20.     android:paddingLeft="5dip"  
  21.     android:paddingRight="5dip"  
  22.     android:paddingBottom="2dip"  
  23.     android:maxHeight="1dip"  //注意:一定得设置进度条的高度,不然进度条会很高。  
  24.     android:minHeight="1dip"  
  25.         android:max="100"  
  26. android:progress="0"          
  27.    />  

[html] view plain

  1.    <ImageView  
  2.     android:layout_width="400dip"  
  3.     android:layout_height="95dip"  
  4.     android:layout_x="830dip"  
  5.     android:layout_y="484dip"  
  6.     android:src="@drawable/seekbar_background_5" //刻度图片  
  7.     android:scaleType="centerCrop"  
  8.     android:background="@null"  
  9.     />  
  10.       
  11.    <SeekBar  
  12.     android:id="@+id/sensor_sensitivity"  
  13.     android:layout_width="360dip"  
  14.     android:layout_height="64dip"  
  15.     android:layout_x="850dip"  
  16.     android:layout_y="498dip"  
  17.     android:progressDrawable="@drawable/suretouch_seekbar_img"  
  18.     android:thumb="@drawable/suretouch_seekbar_thumb"  
  19.     style="?android:attr/progressBarStyleHorizontal"  
  20.     android:paddingLeft="5dip"  
  21.     android:paddingRight="5dip"  
  22.     android:paddingBottom="2dip"  
  23.     android:maxHeight="1dip"  //注意:一定得设置进度条的高度,不然进度条会很高。  
  24.     android:minHeight="1dip"  
  25.         android:max="100"  
  26. android:progress="0"          
  27.    />  


 3,自定义滑块,在drawable文件中加入自定义的xml文件。

[html] view plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">         
  3.     <!-- 按下状态 -->      
  4.     <item         
  5.         android:state_pressed="true"         
  6.         android:drawable="@drawable/seekbar_block" />        
  7.                   
  8.     <!-- 普通无焦点状态 -->      
  9.     <item         
  10.         android:state_focused="false"         
  11.         android:state_pressed="false"       
  12.         android:drawable="@drawable/seekbar_block" />     
  13.     
  14. </selector>   

[html] view plain

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">         
  3.     <!-- 按下状态 -->      
  4.     <item         
  5.         android:state_pressed="true"         
  6.         android:drawable="@drawable/seekbar_block" />        
  7.                   
  8.     <!-- 普通无焦点状态 -->      
  9.     <item         
  10.         android:state_focused="false"         
  11.         android:state_pressed="false"       
  12.         android:drawable="@drawable/seekbar_block" />     
  13.     
  14. </selector>   


4,自定义进度条的颜色,同样在drawable中加入自定义需要的xml文件。

 

[html] view plaincopy

  1. <?xml version="1.0" encoding="UTF-8"?>       
  2. <layer-list  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.      <item android:id="@android:id/progress">    
  5.          <clip>    
  6.              <shape>    
  7.                  <gradient    
  8.                          android:startColor="@color/big_title"    
  9.                          android:centerColor="@color/big_title"    
  10.                          android:endColor="@color/big_title"    
  11.                  />    
  12.              </shape>    
  13.          </clip>    
  14.      </item>    
  15. </layer-list>  

[html] view plain

  1. <?xml version="1.0" encoding="UTF-8"?>       
  2. <layer-list  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.      <item android:id="@android:id/progress">    
  5.          <clip>    
  6.              <shape>    
  7.                  <gradient    
  8.                          android:startColor="@color/big_title"    
  9.                          android:centerColor="@color/big_title"    
  10.                          android:endColor="@color/big_title"    
  11.                  />    
  12.              </shape>    
  13.          </clip>    
  14.      </item>    
  15. </layer-list>  


5,设置滑块的位置,也就是当滑动滑块后只能让其停在刻度上,要现实这个效果我采用的方法是当滑块停止的时候判断当前的值,比如第二个刻度是25,这里在0到25中去个中间数比如13,也就是当滑块滑到大于13小于25到50的中间数时就setProgress(25),这样就设定在25的位置也就是第二个刻度位置。后面的以此类推。seekbar的事件中有个OnStopTrackingTouch,代码如下:

[java] view plaincopy

  1. public void onStopTrackingTouch(SeekBar seekBar) {  
  2.         // TODO Auto-generated method stub   
  3.         int seekProgress = mSeekBar.getProgress();  
  4.         if(seekProgress<13){  
  5.             mSeekBar.setProgress(0);  
  6.         }else if(seekProgress>=13 && seekProgress<38){  
  7.             mSeekBar.setProgress(25);  
  8.         }else if(seekProgress>=38 && seekProgress<63){  
  9.             mSeekBar.setProgress(50);  
  10.         }else if(seekProgress>=63 && seekProgress<88){  
  11.             mSeekBar.setProgress(75);  
  12.         }else if(seekProgress>=88){  
  13.             mSeekBar.setProgress(100);  
  14.         }  
  15.     }  

[java] view plain

  1. public void onStopTrackingTouch(SeekBar seekBar) {  
  2.         // TODO Auto-generated method stub  
  3.         int seekProgress = mSeekBar.getProgress();  
  4.         if(seekProgress<13){  
  5.             mSeekBar.setProgress(0);  
  6.         }else if(seekProgress>=13 && seekProgress<38){  
  7.             mSeekBar.setProgress(25);  
  8.         }else if(seekProgress>=38 && seekProgress<63){  
  9.             mSeekBar.setProgress(50);  
  10.         }else if(seekProgress>=63 && seekProgress<88){  
  11.             mSeekBar.setProgress(75);  
  12.         }else if(seekProgress>=88){  
  13.             mSeekBar.setProgress(100);  
  14.         }  
  15.     }  

 

对于ProgressBar的设置同样是采用一个ImageView为背景(外围的黑框),在ImageView上放一个ProgressBar控件,然后自定义进度条的颜色。只是在调整它们之间的位置和大小的时候比较费时点,不管怎样已经达到了想要的效果。

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/384633
推荐阅读
相关标签
  

闽ICP备14008679号