为SeekBar滑块设置固定值以及自定义Seekbar,progressbar样式

简介:

最近在项目中使用到了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.       
  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.    />  
    <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:id="@+id/sensor_sensitivity"
    	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"
    	style="?android:attr/progressBarStyleHorizontal"
    	android:paddingLeft="5dip"
    	android:paddingRight="5dip"
    	android:paddingBottom="2dip"
    	android:maxHeight="1dip"  //注意:一定得设置进度条的高度,不然进度条会很高。
    	android:minHeight="1dip"
         android:max="100"
	android:progress="0"    	
    />


 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.     <!-- 普通无焦点状态 -->      
  9.     <item         
  10.         android:state_focused="false"         
  11.         android:state_pressed="false"       
  12.         android:drawable="@drawable/seekbar_block" />     
  13.     
  14. </selector>   
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">       
    <!-- 按下状态 -->    
    <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文件。

 

  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>  
<?xml version="1.0" encoding="UTF-8"?>     
<layer-list
  xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:id="@android:id/progress">  
         <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,代码如下:

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

 

相关文章
|
11天前
|
XML Android开发 数据格式
RecyclerView 、ScrollView滚动条长宽设置
RecyclerView 、ScrollView滚动条长宽设置
16 0
|
2月前
|
XML Java Android开发
Android控件之基础控件——进度条类的view——TextView、Checkbox复选控件、RadioButton单选控件、ToggleButton开关、SeekBar拖动条、menu、弹窗
Android控件之基础控件——进度条类的view——TextView、Checkbox复选控件、RadioButton单选控件、ToggleButton开关、SeekBar拖动条、menu、弹窗
105 1
|
XML Android开发 数据格式
自定义ProgressBar(一)
ProgressBar是一个非常重要组件。通常用于向用户显示耗时操作完成的百分比。主要包括水平和圆形两种类型。讲解之前首先来讲一下样式属性设置,这个在自定义里面是核心部分。
1134 0
RecyclerView的item宽度不能全屏显示
RecyclerView的item宽度不能全屏显示
204 0
|
Android开发
TextView未绘制情况下获取其宽高
/** * 注:StaticLayout是android中处理文字换行的一个类,TextView源码中也是通过这个类实现换行的,使用这个类可以 * 在不进行TextView绘制的前提下得到TextView的宽高,这里我们只需要获取到高度即可,这个高度当然也可以通过post * 在run中获取,但是这样做会有一个问题,界面是先绘制显示然后再计算高度根据我们的逻辑来收缩TextView的高度,在列表中 * 会出现闪烁的问题。
2515 0
|
前端开发 Android开发
Android 自定义垂直,旋转,圆形进度提示 自定义Seekbar
SeekBar是用来调节参数值的,系统默认的一般都不太适合我们,需要我们自定义, 里面也有一个RxJava背压的具体应用 废话不多说,看图   package com.
2336 0
|
XML Android开发 数据格式
Android自定义ProgressBar样式:渐变圆角水平进度条
Android自定义ProgressBar样式:渐变圆角水平进度条 关键是android:progressDrawable的设置,设置一个android:progressDrawable资源,但是android:progressDrawable需要是一个layer-list。
4405 0
|
前端开发 Android开发 容器
Android自定义Tablayout下划线指示器Indicator:设置宽高、圆角、渐变颜色
Android自定义Tablayout下划线指示器Indicator:设置宽高、圆角、渐变颜色 Android原生的Tablayout下面有一个指示器(指示线、下划线),如图所示:详情见附录1。
5988 0
|
前端开发 Android开发 数据格式
无上下边距自定义TextView
由于UI的奇葩作图稿,要求文字要贴边,否则会导致上下的View的margin会变大(因为TextView的文字绘制时有上下间距)。 Paint.FontMetrics /** * Class that describes the various metrics for a font at a given text size.
2708 0
|
Android开发
android:elevation属性,控制View底部渐变阴影
android:elevation属性,控制View底部渐变阴影 android:elevation这一属性,可以控制View底部渐变阴影,给一个View在其底部增加一定的灰度渐变阴影效果,如图: 上图是一个简单的TextView,TextView底部阴影渐变。
2619 0