<declare-styleable name="RulerView"><!--最大刻度的颜色--><attr name="mMaxScaleColor" format="color"/><!--中间刻度的颜色--><attr name="mMidScaleColor" format="color"/><!--最小刻度的颜色--><attr name="mMinScaleColor" format="color"/><!--底线的颜色--><attr name="mBottomLineColor" format="color"/><!--最大刻度的宽度--><attr name="mMaxScaleWidth" format="dimension"/><!--中间刻度的宽度--><attr name="mMidScaleWidth" format="dimension"/><!--最小刻度的宽度--><attr name="mMinScaleWidth" format="dimension"/><!--底线的宽度--><attr name="mBottomLineWidth" format="dimension"/><!--最大刻度的高度占控件的高度比例--><attr name="mMaxScaleHeightRatio" format="float"/><!--中间刻度的高度占控件的高度比例--><attr name="mMidScaleHeightRatio" format="float"/><!--最小刻度的高度占控件的高度比例--><attr name="mMinScaleHeightRatio" format="float"/><!--是否显示刻度值--><attr name="isShowScaleValue" format="boolean"/><!--是否刻度渐变 包括刻度值和刻度线及下面的线--><attr name="isScaleGradient" format="boolean"/><!--刻度值颜色--><attr name="mScaleValueColor" format="color"/><!--刻度值文字大小--><attr name="mScaleValueSize" format="dimension"/><!--刻度值间隔--><attr name="mScaleSpace" format="dimension"/><!-- 当前值--><attr name="mCurrentValue" format="integer"/><!--最大值--><attr name="mMaxValue" format="integer"/><!--最小值--><attr name="mMinValue" format="integer"/><!--刻度基数--><attr name="mScaleBase" format="integer"/><!--中间图标--><attr name="mMiddleImg" format="reference"/></declare-styleable>

通过这个attrs大家也看到，我们设置了还是蛮细的，所有的刻度及刻度值颜色大小都设定了，让控件设置更加的灵活。

 <com.dalong.rulerview.RulerViewandroid:id="@+id/ruler2"android:layout_centerInParent="true"android:layout_width="match_parent"android:layout_height="wrap_content"app:mMaxValue="5000"app:mMinValue="1000"app:mScaleBase="100"app:mScaleSpace="10dp"app:mMaxScaleColor="@color/colorAccent"app:mMidScaleColor="@color/colorPrimary"app:mMinScaleColor="@color/colorPrimary"app:mBottomLineColor="@color/colorAccent"app:mMaxScaleHeightRatio="0.5"app:mMidScaleHeightRatio="0.3"app:mMinScaleHeightRatio="0.2"app:mMaxScaleWidth="2.5dp"app:mMidScaleWidth="2dp"app:mMinScaleWidth="2dp"app:mBottomLineWidth="2.5dp"app:mCurrentValue="1000"app:mScaleValueColor="@color/colorAccent"app:mScaleValueSize="12sp"app:mMiddleImg="@mipmap/icon_arrow"app:isScaleGradient="false"/>

3、在自定义View的构造方法中，获得我们的自定义的样式

 // 默认刻度模式public static final int MOD_TYPE_SCALE = 5;//刻度基数  每个刻度代表多少 默认为1public int mScaleBase=1;//最大刻度的颜色public int mMaxScaleColor;//中间刻度的颜色public int mMidScaleColor;//最小刻度的颜色public int mMinScaleColor;//底部线的颜色public int mBottomLineColor;//最大刻度的宽度public float mMaxScaleWidth;//中间刻度的宽度public float mMidScaleWidth;//最小刻度的宽度public float mMinScaleWidth;//底线的宽度public float mBottomLineWidth;//最大刻度的高度占控件的高度比例public float mMaxScaleHeightRatio;//中间刻度的高度占控件的高度比例public float mMidScaleHeightRatio;//最小刻度的高度占控件的高度比例public float mMinScaleHeightRatio;//是否显示刻度值public boolean isShowScaleValue;//是否刻度渐变public boolean isScaleGradient;//刻度值颜色public int  mScaleValueColor;//刻度值文字大小public float  mScaleValueSize;//当前值public int mCurrentValue;//最大值public int mMaxValue;//最小值public int mMinValue;//中间图片private Bitmap mMiddleImg;//刻度线画笔private  Paint mScalePaint;// 刻度值画笔private  TextPaint mScaleValuePaint;//中间图片画笔private  Paint mMiddleImgPaint;private  float mTpDesiredWidth;//最大刻度高度private int mMaxScaleHeight;//中间刻度高度private int mMidScaleHeight;//最小刻度高度private int mMinScaleHeight;// 滚动偏移量private int scrollingOffset;//间隔Sprivate int mScaleSpace=20;// 滚动器private RulerViewScroller scroller;// 是否执行滚动private boolean isScrollingPerformed;public RulerView(Context context) {this(context,null);}public RulerView(Context context, AttributeSet attrs) {this(context, attrs,0);}public RulerView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.RulerView);mMaxScaleColor=typedArray.getColor(R.styleable.RulerView_mMaxScaleColor, Color.BLACK);mMidScaleColor=typedArray.getColor(R.styleable.RulerView_mMidScaleColor, Color.BLACK);mMinScaleColor=typedArray.getColor(R.styleable.RulerView_mMinScaleColor, Color.BLACK);mMaxScaleColor=typedArray.getColor(R.styleable.RulerView_mMaxScaleColor, Color.BLACK);mScaleValueColor=typedArray.getColor(R.styleable.RulerView_mScaleValueColor, Color.BLACK);mBottomLineColor=typedArray.getColor(R.styleable.RulerView_mBottomLineColor, Color.BLACK);mMaxScaleWidth = typedArray.getDimensionPixelSize(R.styleable.RulerView_mMaxScaleWidth, 15);mMidScaleWidth = typedArray.getDimensionPixelSize(R.styleable.RulerView_mMidScaleWidth, 12);mMinScaleWidth = typedArray.getDimensionPixelSize(R.styleable.RulerView_mMinScaleWidth, 10);mBottomLineWidth = typedArray.getDimensionPixelSize(R.styleable.RulerView_mBottomLineWidth, 15);mScaleValueSize = typedArray.getDimensionPixelSize(R.styleable.RulerView_mScaleValueSize, 12);mScaleSpace = typedArray.getDimensionPixelSize(R.styleable.RulerView_mScaleSpace, 20);mMaxScaleHeightRatio = typedArray.getFloat(R.styleable.RulerView_mMaxScaleHeightRatio, 0.3f);mMidScaleHeightRatio = typedArray.getFloat(R.styleable.RulerView_mMidScaleHeightRatio, 0.2f);mMinScaleHeightRatio = typedArray.getFloat(R.styleable.RulerView_mMinScaleHeightRatio, 0.1f);isShowScaleValue = typedArray.getBoolean(R.styleable.RulerView_isShowScaleValue, true);isScaleGradient = typedArray.getBoolean(R.styleable.RulerView_isScaleGradient, true);mMaxValue = typedArray.getInteger(R.styleable.RulerView_mMaxValue, 100);mMinValue = typedArray.getInteger(R.styleable.RulerView_mMinValue, 0);mScaleBase = typedArray.getInteger(R.styleable.RulerView_mScaleBase, 1);mCurrentValue = typedArray.getInteger(R.styleable.RulerView_mCurrentValue, 0);setCurrentValue(mCurrentValue);mMiddleImg = BitmapFactory.decodeResource(getResources(),typedArray.getResourceId(R.styleable.RulerView_mMiddleImg,R.drawable.ruler_mid_arraw));typedArray.recycle();mScalePaint=new Paint(Paint.ANTI_ALIAS_FLAG);mScalePaint.setStyle(Paint.Style.STROKE);mScalePaint.setAntiAlias(true);mScaleValuePaint=new TextPaint(Paint.ANTI_ALIAS_FLAG);mScaleValuePaint.setColor(mScaleValueColor);mScaleValuePaint.setTextSize(mScaleValueSize);mScaleValuePaint.setTextAlign(Paint.Align.CENTER);mTpDesiredWidth = Layout.getDesiredWidth("0", mScaleValuePaint);mMiddleImgPaint=new Paint(Paint.ANTI_ALIAS_FLAG);mMiddleImgPaint.setStyle(Paint.Style.STROKE);mMiddleImgPaint.setAntiAlias(true);scroller=new RulerViewScroller(context,scrollingListener);}

4、我们重写onMesure：

 @Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {setMeasuredDimension(measureWidthSize(widthMeasureSpec),measureHeightSize(heightMeasureSpec));}private int measureHeightSize(int heightMeasureSpec) {int result;int mode=MeasureSpec.getMode(heightMeasureSpec);int size=MeasureSpec.getSize(heightMeasureSpec);if(mode==MeasureSpec.EXACTLY){result=size;}else{result=(int) (mMiddleImg.getHeight() + getPaddingTop() + getPaddingBottom() + 2 * mScaleValuePaint.getTextSize());if(mode==MeasureSpec.AT_MOST){result=Math.min(result,size);}}return  result;}private int measureWidthSize(int widthMeasureSpec) {int result;int mode=MeasureSpec.getMode(widthMeasureSpec);int size=MeasureSpec.getSize(widthMeasureSpec);if(mode==MeasureSpec.EXACTLY){result=size;}else{result=400;if(mode==MeasureSpec.AT_MOST){result=Math.min(result,size);}}return  result;}

5、设置下三种刻度尺的高度

  @Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);if (w == 0 || h == 0)return;/*** 在这里根据控件高度设置三中刻度线的高度*/int mHeight = h - getPaddingTop() - getPaddingBottom();mMaxScaleHeight = (int) (mHeight*mMaxScaleHeightRatio);mMidScaleHeight = (int) (mHeight*mMidScaleHeightRatio);mMinScaleHeight = (int) (mHeight*mMinScaleHeightRatio);}

6、绘制刻度尺

 /*** 绘制刻度线* @param canvas* @param mDrawWidth* @param mDrawHeight*/private void drawScaleLine(Canvas canvas, int mDrawWidth, int mDrawHeight) {int scaleNum= (int) (Math.ceil(mDrawWidth/2f/mScaleSpace))+2;int distanceX = scrollingOffset;int currValue = mCurrentValue;drawScaleLine(canvas,scaleNum,distanceX,currValue,mDrawWidth,mDrawHeight);}/*** 绘制刻度线* @param canvas* @param scaleNum* @param distanceX* @param currValue* @param mDrawWidth* @param mDrawHeight*/private void drawScaleLine(Canvas canvas, int scaleNum, int distanceX, int currValue, int mDrawWidth, int mDrawHeight) {int dy = (int) (mDrawHeight - mTpDesiredWidth - mScaleValuePaint.getTextSize()) - getPaddingBottom();int value;float xPosition;for (int i=0;i<scaleNum;i++){// 右面xPosition=mDrawWidth/2f+i*mScaleSpace+distanceX;value=currValue+i;if(xPosition<=mDrawWidth && value>=(mMinValue/mScaleBase)&&value<=(mMaxValue/mScaleBase)){drawScaleLine(canvas, value,  xPosition, dy, scaleNum, i, mDrawHeight);}//绘制右面线if(value<(mMaxValue/mScaleBase)&&value>=(mMinValue/mScaleBase))drawBottomLine(canvas,getAlpha(scaleNum, i),xPosition-mMaxScaleWidth/2, dy, xPosition+mScaleSpace+mMaxScaleWidth/2, dy);//左面xPosition=mDrawWidth/2f-i*mScaleSpace+distanceX;value=currValue-i;if(xPosition>getPaddingLeft() && value>=(mMinValue/mScaleBase)&&value<=(mMaxValue/mScaleBase)){drawScaleLine( canvas, value,  xPosition, dy, scaleNum, i, mDrawHeight);}//绘制左面线if(value>=(mMinValue/mScaleBase) && value<(mMaxValue/mScaleBase))drawBottomLine(canvas,getAlpha(scaleNum, i),xPosition-mMaxScaleWidth/2, dy, xPosition+mScaleSpace+mMaxScaleWidth/2, dy);}}/*** 绘制底部线* @param canvas* @param alpha* @param sx* @param sy* @param ex* @param ey*/private void drawBottomLine(Canvas canvas,int alpha,float sx,float sy,float ex,float ey){mScalePaint.setColor(mBottomLineColor);mScalePaint.setStrokeWidth(mBottomLineWidth);mScalePaint.setAlpha(alpha);canvas.drawLine(sx, sy, ex, ey, mScalePaint);}/*** 绘制刻度尺  左  右* @param canvas* @param value* @param xPosition* @param dy* @param scaleNum* @param i* @param mDrawHeight*/public void drawScaleLine(Canvas canvas,int value, float xPosition,int dy,int scaleNum,int i,int mDrawHeight){if (value % MOD_TYPE_SCALE == 0) {if(value % (MOD_TYPE_SCALE*2)==0){//大刻度drawScaleLine(canvas,mMaxScaleWidth,mMaxScaleColor,getAlpha(scaleNum, i),xPosition,dy,xPosition,dy - mMaxScaleHeight);if (isShowScaleValue) {mScaleValuePaint.setAlpha(getAlpha(scaleNum, i));canvas.drawText(String.valueOf(value*mScaleBase), xPosition, mDrawHeight - mTpDesiredWidth, mScaleValuePaint);}}else{//中刻度drawScaleLine(canvas,mMidScaleWidth,mMidScaleColor,getAlpha(scaleNum, i),xPosition,dy,xPosition,dy-mMidScaleHeight);}}else{// 小刻度drawScaleLine(canvas,mMinScaleWidth,mMinScaleColor,getAlpha(scaleNum, i),xPosition,dy,xPosition,dy-mMinScaleHeight);}}/*** 绘制刻度尺刻度* @param canvas* @param strokeWidth* @param scaleColor* @param alpha* @param sx* @param sy* @param ex* @param ey*/private void drawScaleLine(Canvas canvas,float strokeWidth,int scaleColor,int alpha,float sx,float sy,float ex,float ey){mScalePaint.setStrokeWidth(strokeWidth);mScalePaint.setColor(scaleColor);mScalePaint.setAlpha(alpha);canvas.drawLine(sx, sy, ex, ey, mScalePaint);}

其实上面就是绘制刻度尺的核心办法，主要实现思想就是以中心为开始点向左右绘制刻度线。其中也有一些细节需要大家慢慢去思索的，比如这里包含高，中 ，低的三种刻度线，他们在绘制的时候高度，颜色，宽度都是不一样的设置。怎么区分，我这里也写的比较的清楚。这里我就不在提了。

    /*** 绘制中间图片* @param canvas* @param mDrawWidth* @param mDrawHeight*/private void drawMiddleImg(Canvas canvas, int mDrawWidth, int mDrawHeight) {int left = (mDrawWidth - mMiddleImg.getWidth()) / 2;int top = (int) (mScaleValuePaint.getTextSize() / 2);canvas.drawBitmap(mMiddleImg, left, top, mMiddleImgPaint);}

以上写完就已经可以实现刻度尺了，但是刻度尺是无法拖动的，效果如下：

public class RulerViewScroller {//滚动的时间public static final int SCROLLING_DURATION = 400;//用于滚动的最小增量public static final int MIN_DELTA_FOR_SCROLLING = 1;//Listenerprivate ScrollingListener listener;//上下文private Context context;// Scrollingprivate GestureDetector gestureDetector;private Scroller scroller;private int lastScrollX;private float lastTouchedX;private boolean isScrollingPerformed;private final int MESSAGE_SCROLL = 0;private final int MESSAGE_JUSTIFY = 1;public RulerViewScroller(Context context, ScrollingListener listener) {this.listener = listener;this.context = context;gestureDetector = new GestureDetector(context, gestureListener);gestureDetector.setIsLongpressEnabled(false);scroller = new Scroller(context);scroller.setFriction(0.05f);}/*** 手势监听*/private GestureDetector.SimpleOnGestureListener gestureListener = new GestureDetector.SimpleOnGestureListener() {public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {return true;}public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {lastScrollX = 0;scroller.fling(0, lastScrollX, (int) -velocityX, 0, -0x7FFFFFFF, 0x7FFFFFFF, 0, 0);setNextMessage(MESSAGE_SCROLL);return true;}};/*** 手势处理* @param event* @return*/public boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:lastTouchedX = event.getX();scroller.forceFinished(true);clearMessages();break;case MotionEvent.ACTION_MOVE:int distanceX = (int) (event.getX() - lastTouchedX);if (distanceX != 0) {startScrolling();listener.onScroll(distanceX);lastTouchedX = event.getX();}break;}//当手指离开控件时if (!gestureDetector.onTouchEvent(event) && event.getAction() == MotionEvent.ACTION_UP) {justify();}return true;}/*** 发送下一步消息，清楚之前的消息* @param message*/private void setNextMessage(int message) {clearMessages();animationHandler.sendEmptyMessage(message);}/*** 清楚所有的what的消息列表*/private void clearMessages() {animationHandler.removeMessages(MESSAGE_SCROLL);animationHandler.removeMessages(MESSAGE_JUSTIFY);}/*** 滚动* @param distance 距离* @param time     时间*/public void scroll(int distance, int time) {scroller.forceFinished(true);lastScrollX = 0;scroller.startScroll(0, 0, distance, 0, time != 0 ? time : SCROLLING_DURATION);setNextMessage(MESSAGE_SCROLL);startScrolling();}/*** 动画处理handler*/private Handler animationHandler = new Handler(new Handler.Callback() {@Overridepublic boolean handleMessage(Message msg) {scroller.computeScrollOffset();int currX = scroller.getCurrX();int delta = lastScrollX - currX;lastScrollX = currX;if (delta != 0) {listener.onScroll(delta);}// 滚动是不是完成时，涉及到最终Y，所以手动完成if (Math.abs(currX - scroller.getFinalX()) < MIN_DELTA_FOR_SCROLLING) {lastScrollX = scroller.getFinalX();scroller.forceFinished(true);}if (!scroller.isFinished()) {animationHandler.sendEmptyMessage(msg.what);} else if (msg.what == MESSAGE_SCROLL) {justify();} else {finishScrolling();}return true;}});/*** 滚动停止时待校验*/private void justify() {listener.onJustify();setNextMessage(MESSAGE_JUSTIFY);}/*** 开始滚动*/private void startScrolling() {if (!isScrollingPerformed) {isScrollingPerformed = true;listener.onStarted();}}/*** 滚动结束*/void finishScrolling() {if (isScrollingPerformed) {listener.onFinished();isScrollingPerformed = false;}}/***  滚动监听器接口*/public interface ScrollingListener {/*** 正在滚动中回调* @param distance 滚动的距离*/void onScroll(int distance);/*** 启动滚动时调用的回调函数*/void onStarted();/*** 校验完成后 执行完毕后回调*/void onFinished();/*** 滚动停止时待校验*/void onJustify();}

 /*** 滚动回调接口*/RulerViewScroller.ScrollingListener scrollingListener = new RulerViewScroller.ScrollingListener() {/*** 滚动开始*/@Overridepublic void onStarted() {isScrollingPerformed = true;//滚动开始if (null != onWheelListener) {onWheelListener.onScrollingStarted(RulerView.this);}}/*** 滚动中* @param distance 滚动的距离*/@Overridepublic void onScroll(int distance) {doScroll(distance);}/*** 滚动结束*/@Overridepublic void onFinished() {if (outOfRange()) {return;}if (isScrollingPerformed) {//滚动结束if (null != onWheelListener) {onWheelListener.onScrollingFinished(RulerView.this);}isScrollingPerformed = false;}scrollingOffset = 0;invalidate();}/*** 验证滚动是否在正确位置*/@Overridepublic void onJustify() {if (outOfRange()) {return;}if (Math.abs(scrollingOffset) > RulerViewScroller.MIN_DELTA_FOR_SCROLLING) {if (scrollingOffset < -mScaleSpace / 2) {scroller.scroll(mScaleSpace + scrollingOffset, 0);} else if (scrollingOffset > mScaleSpace / 2) {scroller.scroll(scrollingOffset - mScaleSpace, 0);} else {scroller.scroll(scrollingOffset, 0);}}}};/*** 超出左右范围* @return*/private boolean outOfRange() {//这个是越界后需要回滚的大小值int outRange = 0;if (mCurrentValue < mMinValue/mScaleBase) {outRange = (mCurrentValue - mMinValue/mScaleBase) * mScaleSpace;} else if (mCurrentValue > mMaxValue/mScaleBase) {outRange = (mCurrentValue - mMaxValue/mScaleBase) * mScaleSpace;}if (0 != outRange) {scrollingOffset = 0;scroller.scroll(-outRange, 100);return true;}return false;}/*** 滚动中回调最新值* @param delta*/private void doScroll(int delta) {scrollingOffset += delta;int offsetCount = scrollingOffset / mScaleSpace;if (0 != offsetCount) {// 显示在范围内int oldValueIndex = Math.min(Math.max(mMinValue, mCurrentValue*mScaleBase), mMaxValue);mCurrentValue -= offsetCount;scrollingOffset -= offsetCount * mScaleSpace;if (null != onWheelListener) {//回调通知最新的值int valueIndex = Math.min(Math.max(mMinValue, mCurrentValue*mScaleBase), mMaxValue);onWheelListener.onChanged(this, oldValueIndex + "",valueIndex+"");}}invalidate();}private float mDownFocusX;private float mDownFocusY;private boolean isDisallowIntercept;@Overridepublic boolean onTouchEvent(MotionEvent event) {if (!isEnabled()) {return true;}switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mDownFocusX = event.getX();mDownFocusY = event.getY();break;case MotionEvent.ACTION_MOVE:if (!isDisallowIntercept && Math.abs(event.getY() - mDownFocusY) < Math.abs(event.getX() - mDownFocusX)) {isDisallowIntercept = true;if (getParent() != null) {getParent().requestDisallowInterceptTouchEvent(true);}}break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:if (getParent() != null) {getParent().requestDisallowInterceptTouchEvent(false);}isDisallowIntercept = false;break;}return scroller.onTouchEvent(event);}private OnRulerViewScrollListener onWheelListener;/*** 添加滚动回调* @param listener the listener*/public void setScrollingListener(OnRulerViewScrollListener listener) {onWheelListener = listener;}public interface OnRulerViewScrollListener<T> {/*** 当更改选择的时候回调方法* @param rulerView 状态更改的view* @param oldValue  当前item的旧值* @param newValue  当前item的新值*/void onChanged(RulerView rulerView, T oldValue, T newValue);/*** 滚动启动时调用的回调方法* @param rulerView*/void onScrollingStarted(RulerView rulerView);/*** 滚动结束时调用的回调方法* @param rulerView*/void onScrollingFinished(RulerView rulerView);}

其中有些参考了网上实现方式并进行拓展以后就实现了下面的效果。