【转】 为SeekBar滑块设置固定值以及自定义Seekbar，progressbar样式--不错

时间：2022-04-29 12:36:32

原文网址：http://blog.csdn.net/jdsjlzx/article/details/7804080

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

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

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

  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. <SeekBar
  11. android:id="@+id/sensor_sensitivity"
  12. android:layout_width="360dip"
  13. android:layout_height="64dip"
  14. android:layout_x="850dip"
  15. android:layout_y="498dip"
  16. android:progressDrawable="@drawable/suretouch_seekbar_img"
  17. android:thumb="@drawable/suretouch_seekbar_thumb"
  18. style="?android:attr/progressBarStyleHorizontal"
  19. android:paddingLeft="5dip"
  20. android:paddingRight="5dip"
  21. android:paddingBottom="2dip"
  22. android:maxHeight="1dip"  //注意：一定得设置进度条的高度，不然进度条会很高。
  23. android:minHeight="1dip"
  24. android:max="100"
  25. android:progress="0"
  26. />
  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. <SeekBar
  11. android:id="@+id/sensor_sensitivity"
  12. android:layout_width="360dip"
  13. android:layout_height="64dip"
  14. android:layout_x="850dip"
  15. android:layout_y="498dip"
  16. android:progressDrawable="@drawable/suretouch_seekbar_img"
  17. android:thumb="@drawable/suretouch_seekbar_thumb"
  18. style="?android:attr/progressBarStyleHorizontal"
  19. android:paddingLeft="5dip"
  20. android:paddingRight="5dip"
  21. android:paddingBottom="2dip"
  22. android:maxHeight="1dip"  //注意：一定得设置进度条的高度，不然进度条会很高。
  23. android:minHeight="1dip"
  24. android:max="100"
  25. android:progress="0"
  26. />

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

  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. <item
  9. android:state_focused="false"
  10. android:state_pressed="false"
  11. android:drawable="@drawable/seekbar_block" />
  12. </selector>
  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. <item
  9. android:state_focused="false"
  10. android:state_pressed="false"
  11. android:drawable="@drawable/seekbar_block" />
  12. </selector>

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

  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>
  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，代码如下：

  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. }
  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控件，然后自定义进度条的颜色。只是在调整它们之间的位置和大小的时候比较费时点，不管怎样已经达到了想要的效果。

【转】 为SeekBar滑块设置固定值以及自定义Seekbar，progressbar样式--不错

【转】 为SeekBar滑块设置固定值以及自定义Seekbar，progressbar样式--不错

相关文章