自定义view之刻度尺

由于项目需求,个人信息的输入是以一个刻度尺滑动作为数据选择方法输入。如下图

自定义view之刻度尺_第1张图片


哎呦喂,貌似看起来很简单的样子,但又好像不知从拿入手实现。实话说,确实不好做,所以~~~百度~~~哈哈哈哈。

然而,结果令我有点失望,网上的解决办法并不多,现成的工程又不符合自己的需求,改起来又耗时间,那咋办呢?

一个点子瞬间闪亮,没错,一条很长的图片加HorizontalSrcollView,重写onScrollChange(),用接口将其滑动距离暴露出来。。。。总之,可以实现。嗯,小满足~

然后,你就真的满足了?反正我可不满意。因为个人感觉太依赖图片的程序猿要不就是大牛,写多了懒得写了,直接上图;要不就是不会菜鸟,不会嘛~

所以,我在项目即将完结之前,升级了下装备,绕回来把这最终Boss解决了。


废话少说,转入正题:

首先,先上个效果图:

自定义view之刻度尺_第2张图片

第一步,定义好view的属性,创建attrs属性:

attrs.xml

    <declare-styleable name="Ruler">
        <attr name="interval" format="dimension"/>
        <attr name="fromValue" format="integer"/>
        <attr name="toValue" format="integer"/>
        <attr name="currentValue" format="integer"/>
        <attr name="intervalsBetweenValues" format="integer"/>
        <attr name="valuesInterval" format="integer"/>
        <attr name="valuesTextSize" format="dimension"/>
        <attr name="valuesTextColor" format="color"/>
        <attr name="linesWidth" format="dimension"/>
        <attr name="linesColor" format="color"/>
        <attr name="isShowPointer" format="boolean"/>
        <attr name="orientation">
            <enum name="vertical" value="0"/>
            <enum name="horizontal" value="1"/>
        </attr>
    </declare-styleable>
上面的属性都在代码里有注释:

	//间隔,即两条刻度之间的距离
	private int interval;
	//起始值
	private int fromValue;
	//结束值
	private int toValue;
	//每两个值之间的间隔数,也指多少个最小单位,比如0cm到1cm有10个最小单位1mm
	private int intervalsBetweenValues;
	//相邻两个值的跳跃间隔,如上面第一张图的10000到11000,中间的跳跃值就是1000
	private int valuesInterval;
	//当前值
	private int currentValue;
	//值的文本大小
	private int valuesTextSize;
	//值的文本颜色
	private int valuesTextColor;
	//刻度的宽度
	private int linesWidth;
	//刻度的颜色
	private int linesColor;
	//刻度尺是vertical还是horizontal,上面第一张图的就是horizontal
	private int orientation;


第二步,构造体内利用TypedArray收集其属性,以及画笔,一些其他变量的初始化。

		interval=array.getDimensionPixelSize(R.styleable.Ruler_interval, dp2px(intervalsBetweenValues));
		fromValue=array.getInt(R.styleable.Ruler_fromValue, 0);
		toValue=array.getInt(R.styleable.Ruler_toValue, intervalsBetweenValues);
		currentValue=array.getInt(R.styleable.Ruler_currentValue, (fromValue+toValue)/2);
		intervalsBetweenValues=array.getInt(R.styleable.Ruler_intervalsBetweenValues, intervalsBetweenValues);
		valuesInterval=array.getInt(R.styleable.Ruler_valuesInterval, 1);
		valuesTextSize=array.getDimensionPixelSize(R.styleable.Ruler_valuesTextSize, sp2px(16));
		valuesTextColor=array.getColor(R.styleable.Ruler_valuesTextColor, Color.BLACK);
		linesWidth=array.getDimensionPixelSize(R.styleable.Ruler_linesWidth, dp2px(1));
		linesColor=array.getColor(R.styleable.Ruler_linesColor, Color.BLACK);
		orientation=array.getInt(R.styleable.Ruler_orientation, HORIZONTAL);

第三步,不需要重写onMeasure,定义布局时应固定长宽,直接重写onDraw,先画好一帧画面,后面的重绘就根据这一帧画,这里才是关键。

这里只以垂直的刻度尺为例:

		if(orientation==VERTICAL){
			//画中间的指针,就在中间画,很简单
			paint.setColor(Color.RED);
			paint.setStrokeWidth(dp2px(2));
			canvas.drawLine(getWidth(), getHeight()/2, getWidth()/4, getHeight()/2, paint);
			
			//刻度线分两部分画,一半是上部分,一半是下部分
			//画中间以上部分的刻度
			paint.setColor(linesColor);
			paint.setStrokeWidth(linesWidth);
			int height=getHeight()/2+offset;
			int position=currentPosition;
			
			//循环画刻度,当画到上边界或起始值时则退出循环,去画下半部分刻度
			while(true){		
				//intervalsBetweenValues/2是指两个相邻值之间距离的中间那条稍微长一点的刻度的位置
				if(position%(intervalsBetweenValues/2)==0){
					//当刻度值的位置为刻度值旁边的时候则画长一点,并在旁边画上数字,否则就按普通刻度长度画
					if(position%intervalsBetweenValues==0){
						canvas.drawLine(getWidth(), height, getWidth()/2, height, paint);
						
						String valueString=Integer.toString(position/intervalsBetweenValues*valuesInterval);
						paint.setColor(valuesTextColor);
						canvas.drawText(valueString, getWidth()/2-paint.measureText(valueString)-dp2px(5), height+textHeight/3, paint);
						paint.setColor(linesColor);
					}else{
						canvas.drawLine(getWidth(), height, getWidth()*3/5, height, paint);
					}
					
				}else{
					canvas.drawLine(getWidth(), height, getWidth()*4/5, height, paint);
				}			
				
				//每画完一条刻度则递减position和height,当position=起始值,或height低于0,即超出边界时,退出循环
				position--;
				if(position<fromValue/valuesInterval*intervalsBetweenValues) break;
				height-=interval;						
				if(height<0-textHeight) break;
			}
			
			//画中间以下部分的刻度,和画上半部同理,值得注意的是先改变position和height再画,和上部分不同,因为不用再画中间那一个刻度
			height=getHeight()/2+offset;
			position=currentPosition;
			while(true){
				position++;
				if(position>toValue/valuesInterval*intervalsBetweenValues) break;
				height+=interval;						
				if(height>getHeight()+textHeight) break;
				if(position%(intervalsBetweenValues/2)==0){
					if(position%intervalsBetweenValues==0){
						canvas.drawLine(getWidth(), height, getWidth()/2, height, paint);
						
						String valueString=Integer.toString(position/intervalsBetweenValues*valuesInterval);
						paint.setColor(valuesTextColor);
						canvas.drawText(valueString, getWidth()/2-paint.measureText(valueString)-dp2px(5), height+textHeight/3, paint);
						paint.setColor(linesColor);
					}else{
						canvas.drawLine(getWidth(), height, getWidth()*3/5, height, paint);
					}
					
				}else{
					canvas.drawLine(getWidth(), height, getWidth()*4/5, height, paint);
				}

			}

第四步,重写onTouchEvent,处理滑动事件,这也是重点。

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			//记录初始位置
			if(orientation==HORIZONTAL){
				oldX=(int)event.getX();
			}else{
				oldY=(int)event.getY();
			}			
			break;

		case MotionEvent.ACTION_MOVE:
			if(orientation==HORIZONTAL){
				//滑动的距离
				offset=(int)(event.getX()-oldX);
				//滑动的距离除以每个刻度间隔,得出滑动了多少个间隔,即在相应的刻度position上加上或减去该间隔数				
				if(Math.abs(offset)>=interval){
					currentPosition-=offset/interval;
					if(currentPosition>toValue/valuesInterval*intervalsBetweenValues) 
						currentPosition=toValue/valuesInterval*intervalsBetweenValues;
					if(currentPosition<fromValue/valuesInterval*intervalsBetweenValues) 
						currentPosition=fromValue/valuesInterval*intervalsBetweenValues;
					//记录好当前的偏移位置作为下次滑动偏移量的起始位置oldX
					oldX=(int)event.getX();
				}		
				//取余算好不够一个间隔的偏移量,用于ACTION_UP计算四舍五入
				offset%=interval;
			}else{
				//同HORIZONTAL模式
				offset=(int)(event.getY()-oldY);
				if(Math.abs(offset)>=interval){
					currentPosition-=offset/interval;
					if(currentPosition>toValue/valuesInterval*intervalsBetweenValues) 
						currentPosition=toValue/valuesInterval*intervalsBetweenValues;
					if(currentPosition<fromValue/valuesInterval*intervalsBetweenValues)
						currentPosition=fromValue/valuesInterval*intervalsBetweenValues;
					oldY=(int)event.getY();
				}		
				offset%=interval;
			}			
			//重绘,达到滑动动画效果
			invalidate();
			if(listener!=null){
				//通过一个接口将数据暴露出去
				listener.onValueChange(currentPosition*valuesInterval/intervalsBetweenValues);
			}
			break;
			
		case MotionEvent.ACTION_UP:
			//根据offset处理,若大于间隔的一半,那么+1,否则-1
			if(offset>0 && offset>interval/2){
				currentPosition--;
				if(currentPosition<fromValue/valuesInterval*intervalsBetweenValues){
					currentPosition=fromValue/valuesInterval*intervalsBetweenValues;
				}
			}else if(offset<0 && Math.abs(offset)>interval/2){
				currentPosition++;				
				if(currentPosition>toValue/valuesInterval*intervalsBetweenValues){
					currentPosition=toValue/valuesInterval*intervalsBetweenValues;					
				}
			}
			//偏移量置0
			offset=0;	
			
			invalidate();
			if(listener!=null){
				//通过一个接口将数据暴露出去
				listener.onValueChange(currentPosition*valuesInterval/intervalsBetweenValues);
			}
			break;
		}

		return true;
	}

上面涉及到一个接口类,很简单,直接创建一个接口就OK了,这个接口可以将刻度的位置暴露出去,进行相应的业务处理:

OnValueChangeListener.java

public interface OnValueChangeListener {
	void onValueChange(int value);
}

至此,一个可以实现滑动的刻度尺就实现了,代码确实也不多也算少,要不就自己耐心画一个,要不就耐心看完,哈哈哈,但基本的原理很好理解,先按中间刻度循环递增或递减刻度位置画好一半,再同理画好另一半,再增加触摸事件更新刻度位置,重绘,通过接口输出数据。


直接贴出代码,这里的attrs.xml上面有了不贴了:

Ruler.java

public class Ruler extends View {
	
	private final int VERTICAL=0;
	private final int HORIZONTAL=1;
	
	//间隔,即两条刻度之间的距离
	private int interval;
	//起始值
	private int fromValue;
	//结束值
	private int toValue;
	//每两个值之间的间隔数,也指多少个最小单位,比如0cm到1cm有10个最小单位1mm
	private int intervalsBetweenValues;
	//相邻两个值的跳跃间隔,如上面第一张图的10000到11000,中间的跳跃值就是1000
	private int valuesInterval;
	//当前值
	private int currentValue;
	//值的文本大小
	private int valuesTextSize;
	//值的文本颜色
	private int valuesTextColor;
	//刻度的宽度
	private int linesWidth;
	//刻度的颜色
	private int linesColor;
	//刻度尺是vertical还是horizontal,上面第一张图的就是horizontal
	private int orientation;
	
	private Paint paint;
	
	private OnValueChangeListener listener;
	
	private int currentPosition;
	private int textHeight;
	private int offset;
	private int oldX;
	private int oldY;

	public Ruler(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		// TODO Auto-generated constructor stub
		TypedArray array=context.obtainStyledAttributes(attrs, R.styleable.Ruler);
		
		interval=array.getDimensionPixelSize(R.styleable.Ruler_interval, dp2px(intervalsBetweenValues));
		fromValue=array.getInt(R.styleable.Ruler_fromValue, 0);
		toValue=array.getInt(R.styleable.Ruler_toValue, intervalsBetweenValues);
		currentValue=array.getInt(R.styleable.Ruler_currentValue, (fromValue+toValue)/2);
		intervalsBetweenValues=array.getInt(R.styleable.Ruler_intervalsBetweenValues, intervalsBetweenValues);
		valuesInterval=array.getInt(R.styleable.Ruler_valuesInterval, 1);
		valuesTextSize=array.getDimensionPixelSize(R.styleable.Ruler_valuesTextSize, sp2px(16));
		valuesTextColor=array.getColor(R.styleable.Ruler_valuesTextColor, Color.BLACK);
		linesWidth=array.getDimensionPixelSize(R.styleable.Ruler_linesWidth, dp2px(1));
		linesColor=array.getColor(R.styleable.Ruler_linesColor, Color.BLACK);
		orientation=array.getInt(R.styleable.Ruler_orientation, HORIZONTAL);
		
		array.recycle();
		
		paint=new Paint();
		paint.setTextSize(valuesTextSize);
		
		//文本高度
		FontMetrics fm=paint.getFontMetrics();
		textHeight=(int)(fm.bottom-fm.top);
		
		//当前所指的刻度位置,即中间红色指针指向的值
		currentPosition=currentValue/valuesInterval*intervalsBetweenValues;
	}

	public Ruler(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
		// TODO Auto-generated constructor stub
	}

	public Ruler(Context context) {
		this(context, null);
		// TODO Auto-generated constructor stub
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		
		if(orientation==VERTICAL){
			//画中间的指针,就在中间画,很简单
			paint.setColor(Color.RED);
			paint.setStrokeWidth(dp2px(2));
			canvas.drawLine(getWidth(), getHeight()/2, getWidth()/4, getHeight()/2, paint);
			
			//刻度线分两部分画,一半是上部分,一半是下部分
			//画中间以上部分的刻度
			paint.setColor(linesColor);
			paint.setStrokeWidth(linesWidth);
			int height=getHeight()/2+offset;
			int position=currentPosition;
			
			//循环画刻度,当画到上边界或起始值时则退出循环,去画下半部分刻度
			while(true){		
				//intervalsBetweenValues/2是指两个相邻值之间距离的中间那条稍微长一点的刻度的位置
				if(position%(intervalsBetweenValues/2)==0){
					//当刻度值的位置为刻度值旁边的时候则画长一点,并在旁边画上数字,否则就按普通刻度长度画
					if(position%intervalsBetweenValues==0){
						canvas.drawLine(getWidth(), height, getWidth()/2, height, paint);
						
						String valueString=Integer.toString(position/intervalsBetweenValues*valuesInterval);
						paint.setColor(valuesTextColor);
						canvas.drawText(valueString, getWidth()/2-paint.measureText(valueString)-dp2px(5), height+textHeight/3, paint);
						paint.setColor(linesColor);
					}else{
						canvas.drawLine(getWidth(), height, getWidth()*3/5, height, paint);
					}
					
				}else{
					canvas.drawLine(getWidth(), height, getWidth()*4/5, height, paint);
				}			
				
				//每画完一条刻度则递减position和height,当position=起始值,或height低于0,即超出边界时,退出循环
				position--;
				if(position<fromValue/valuesInterval*intervalsBetweenValues) break;
				height-=interval;						
				if(height<0-textHeight) break;
			}
			
			//画中间以下部分的刻度,和画上半部同理
			height=getHeight()/2+offset;
			position=currentPosition;
			while(true){
				position++;
				if(position>toValue/valuesInterval*intervalsBetweenValues) break;
				height+=interval;						
				if(height>getHeight()+textHeight) break;
				if(position%(intervalsBetweenValues/2)==0){
					if(position%intervalsBetweenValues==0){
						canvas.drawLine(getWidth(), height, getWidth()/2, height, paint);
						
						String valueString=Integer.toString(position/intervalsBetweenValues*valuesInterval);
						paint.setColor(valuesTextColor);
						canvas.drawText(valueString, getWidth()/2-paint.measureText(valueString)-dp2px(5), height+textHeight/3, paint);
						paint.setColor(linesColor);
					}else{
						canvas.drawLine(getWidth(), height, getWidth()*3/5, height, paint);
					}
					
				}else{
					canvas.drawLine(getWidth(), height, getWidth()*4/5, height, paint);
				}

			}
		}else{
			//画中间的指针
			paint.setColor(Color.RED);
			paint.setStrokeWidth(dp2px(2));
			canvas.drawLine(getWidth()/2, getHeight(), getWidth()/2, getHeight()/2, paint);
			
			//画中间左边部分的刻度
			paint.setColor(linesColor);
			paint.setStrokeWidth(linesWidth);
			int width=getWidth()/2+offset;
			int position=currentPosition;
			while(true){							
				if(position%(intervalsBetweenValues/2)==0){
					if(position%intervalsBetweenValues==0){
						canvas.drawLine(width, getHeight(), width, getHeight()/2, paint);
						
						String valueString=Integer.toString(position/intervalsBetweenValues*valuesInterval);
						paint.setColor(valuesTextColor);
						canvas.drawText(valueString, width-paint.measureText(valueString)/2, getHeight()/2-textHeight/2, paint);
						paint.setColor(linesColor);
					}else{
						canvas.drawLine(width, getHeight(), width, getHeight()*3/5, paint);
					}
					
				}else{
					canvas.drawLine(width, getHeight(), width, getHeight()*4/5, paint);
				}			
				position--;
				if(position<fromValue/valuesInterval*intervalsBetweenValues) break;
				width-=interval;						
				//这里需要额外加上以文本“10000”的长度作为偏移量,防止值文本很长的时候,文本还没完全退出边界就消失了
				if(width<0-paint.measureText("10000")) break;
			}
			
			//画中间右边部分的刻度
			width=getWidth()/2+offset;
			position=currentPosition;
			while(true){
				position++;
				if(position>toValue/valuesInterval*intervalsBetweenValues) break;
				width+=interval;						
				if(width>getWidth()+paint.measureText("10000")) break;
				if(position%(intervalsBetweenValues/2)==0){
					if(position%intervalsBetweenValues==0){
						canvas.drawLine(width, getHeight(), width, getHeight()/2, paint);
						
						String valueString=Integer.toString(position/intervalsBetweenValues*valuesInterval);
						paint.setColor(valuesTextColor);
						canvas.drawText(valueString, width-paint.measureText(valueString)/2, getHeight()/2-textHeight/2, paint);
						paint.setColor(linesColor);
					}else{
						canvas.drawLine(width, getHeight(), width, getHeight()*3/5, paint);
					}
					
				}else{
					canvas.drawLine(width, getHeight(), width, getHeight()*4/5, paint);
				}
			}
		}
	
	}

布局文件,记得加上区域定义:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res/com.samuelzhan.ruler"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00aced">

    <RelativeLayout
        android:id="@+id/ruler_layout"
        android:layout_width="70dp"
        android:layout_height="290dp"
        android:layout_marginTop="40dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="80dp"
	    android:background="@drawable/shape_ruler">
        
	    <com.samuelzhan.ruler.Ruler
	        android:id="@+id/ruler_height"
	        android:layout_width="60dp"
	        android:layout_height="280dp"
	        android:layout_centerInParent="true"
	        android:background="#ffffff"
	        custom:orientation="vertical"
	        custom:fromValue="130"
	        custom:toValue="220"
	        custom:intervalsBetweenValues="10"
	        custom:valuesInterval="10"
	        custom:interval="5dp"
	        custom:linesColor="#33000000"
	        custom:linesWidth="4px"
	        custom:valuesTextSize="12sp"/>
       
   	</RelativeLayout>

    
   <RelativeLayout
        android:layout_width="250dp"
        android:layout_height="60dp"
        android:layout_marginTop="60dp"
        android:layout_below="@id/ruler_layout"
        android:layout_centerHorizontal="true"
	    android:background="@drawable/shape_ruler">
        
	    <com.samuelzhan.ruler.Ruler
	        android:id="@+id/ruler_weight"
	        android:layout_width="240dp"
	        android:layout_height="50dp"
	        android:layout_centerInParent="true"
	        android:background="#ffffff"
	        custom:fromValue="30"
	        custom:toValue="150"
	        custom:intervalsBetweenValues="10"
	        custom:valuesInterval="10"
	        custom:interval="5dp"
	        custom:linesColor="#33000000"
	        custom:linesWidth="4px"
	        custom:valuesTextSize="12sp"/>
        
    </RelativeLayout>     

</RelativeLayout>

这里还需要添加一个刻度尺的周边的shape修饰一下边界

shape_ruler.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="8dp"/>
    <stroke android:width="5dp" android:color="#EEEEEE"/>
	<solid android:color="#ffffff"/>
</shape>

代码下载: github




你可能感兴趣的:(android,自定义view,刻度尺)