自定义view之刻度尺

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

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

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

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

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

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

废话少说，转入正题：

首先，先上个效果图：

第一步，定义好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个最小单位1mmprivate int intervalsBetweenValues;//相邻两个值的跳跃间隔，如上面第一张图的10000到11000，中间的跳跃值就是1000private int valuesInterval;//当前值private int currentValue;//值的文本大小private int valuesTextSize;//值的文本颜色private int valuesTextColor;//刻度的宽度private int linesWidth;//刻度的颜色private int linesColor;//刻度尺是vertical还是horizontal,上面第一张图的就是horizontalprivate 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，处理滑动事件，这也是重点。

@Overridepublic boolean onTouchEvent(MotionEvent event) {// TODO Auto-generated method stubswitch (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;//记录好当前的偏移位置作为下次滑动偏移量的起始位置oldXoldX=(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，否则-1if(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;}}//偏移量置0offset=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个最小单位1mmprivate int intervalsBetweenValues;//相邻两个值的跳跃间隔，如上面第一张图的10000到11000，中间的跳跃值就是1000private int valuesInterval;//当前值private int currentValue;//值的文本大小private int valuesTextSize;//值的文本颜色private int valuesTextColor;//刻度的宽度private int linesWidth;//刻度的颜色private int linesColor;//刻度尺是vertical还是horizontal,上面第一张图的就是horizontalprivate 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 stubTypedArray 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}@Overrideprotected void onDraw(Canvas canvas) {// TODO Auto-generated method stubif(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