首先来张截图:

控件的外观可能不是很美观，不过功能基本都有了，可以自己设置选中的时间片段，暂时没有支持自定义样式。。。

接下来介绍如何实现这个控件。

首先要先知道android' view的绘制过程，首先的view先计算Measure，然后在进行Layout，最后Draw。那view的坐标系为左上角（0，0），

图片网络的:

那么在view上面画一些简单的图形的时候，也是根据这个坐标来绘制，如果你的画的图形超过了屏幕，就需要的移动view才能看见。因为view的本身是没有边界的，Canvas对象本身也是没有边界的。view的本身有两个函数scrollTo和scrollBy函数，可以用来移动view到自定义的位置。自己新建一个按钮，点击事件调用这两个函数的时候，可以看到按钮上的字移动，因为函数本身是view的移动，对于view的内容来说就是，坐标改变了。那么也就是说要实现时间刻度的效果，就是在屏幕上绘制一条很长的时间刻度，然后根据手指的移动，调用scrollTo或者scrollBy来移动view，对于里面的内容就是看起来移动了。

对于直接调用scrollTo或者scrollBy来移动view显得有点生硬，没有平滑的效果，所以要引入Scroller类来辅助处理滑动，不过还有一个加速度的类可以实现移动带有弹性的效果，不过现在暂时没有用到。对于Scroller类可以上网查查资料，是一个辅助类，可以计算出view移动的距离，并且计算出移动距离的平滑的点。使用方法比较简单。

scroller = new Scroller(context);

介绍一下computeScroll，computeScroll()是View类的一个空函数，在view需要重新绘制的时候，会调用computeScroll函数，那么在computeScroll可以调用scrollTo或者scrollBy传入Scroller的坐标，再重新绘制view就可以实现view的滚动。

 @Overridepublic void computeScroll() {super.computeScroll();if (scroller.computeScrollOffset()) {scrollTo(scroller.getCurrX(), scroller.getCurrY());invalidate();}}

view的重新绘制可以调用invalidate和postInvalidate 函数来通知系统重新绘制该view，前者要在ui线程里调用，后者可以在非ui线程里面调用。

接下来要重新写触摸事件:

@Overridepublic boolean onTouchEvent(MotionEvent event) {float x = event.getX();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:if (scroller != null && !scroller.isFinished()) {scroller.abortAnimation();}lastX = x;return true;case MotionEvent.ACTION_MOVE:float dataX = lastX - x;int finalx = scroller.getFinalX();//右边if (dataX < 0) {if (finalx < -viewWidth / 2) {return super.onTouchEvent(event);}}if (dataX > 0) {if (finalx > timeScale * 21) {return super.onTouchEvent(event);}}/**对于这里调用startScroll函数，就是从某个点移动一段距离，这里传入scroller.getFinalX(), scroller.getFinalY()的原因是，获取的点都是手指移动的点*/scroller.startScroll(scroller.getFinalX(), scroller.getFinalY(), (int) dataX, 0);lastX = x;postInvalidate();return true;case MotionEvent.ACTION_UP:int finalx1 = scroller.getFinalX();if (finalx1 < -viewWidth / 2) {scroller.setFinalX(-viewWidth / 2);}if (finalx1 > timeScale * 21) {scroller.setFinalX(timeScale * 21);}if (scrollListener != null) {int finalX = scroller.getFinalX();//表示每一个屏幕刻度的一半的总秒数，每一个屏幕有6格int sec = 3 * 3600;//滚动的秒数int temsec = (int) Math.rint((double) finalX / (double) timeScale * 3600);sec += temsec;//获取的时分秒int thour = sec / 3600;int tmin = (sec - thour * 3600) / 60;int tsec = sec - thour * 3600 - tmin * 60;scrollListener.onScrollFinish(thour, tmin, tsec);}postInvalidate();break;}return super.onTouchEvent(event);}

也就是在移动的时候的调用

scroller.startScroll(scroller.getFinalX(), scroller.getFinalY(), (int) dataX, 0);

不停的生成新的点然后不停的重新画.

边界的处理，对于边界的处理，我的处理是判断坐标。

int finalx1 = scroller.getFinalX();if (finalx1 < -viewWidth / 2) {scroller.setFinalX(-viewWidth / 2);}if (finalx1 > timeScale * 21) {scroller.setFinalX(timeScale * 21);}

控制坐标的左右最大值。这个可以自己定。

接下就是画图形，绘画就是在onDraw里面用Canvas来绘画。

画刻度:

public void drawLines(Canvas canvas) {//底部的线canvas.drawLine(0, (float) (viewHeight * 0.9), totalTime,(float) (viewHeight * 0.9), linePaint);for (int i = 0; i <= totalTime; i++) {if (i % timeScale == 0) {canvas.drawLine(i, (float) (viewHeight * 0.7), i,(float) (viewHeight * 0.9), linePaint);//画刻度值canvas.drawText(formatString(i / timeScale, 0, 0), i, (float) (viewHeight * 0.6), linePaint);}}}

画指针

public void drawMidLine(Canvas canvas) {//移动的距离整个view内容移动的距离int finalX = scroller.getFinalX();//表示每一个屏幕刻度的一半的总秒数，每一个屏幕有6格int sec = 3 * 3600;//滚动的秒数int temsec = (int) Math.rint((double) finalX / (double) timeScale * 3600);sec += temsec;//获取的时分秒int thour = sec / 3600;int tmin = (sec - thour * 3600) / 60;int tsec = sec - thour * 3600 - tmin * 60;//滚动时的监听if (scrollListener != null) {scrollListener.onScroll(thour, tmin, tsec);}//画指针canvas.drawLine(timeScale * 3 + finalX, 0,timeScale * 3 + finalX, viewHeight, midPaint);//画数字canvas.drawText(formatString(thour, tmin, tsec), timeScale * 3 + finalX,(float) (viewHeight * 0.3), textPaint);}

画背景

public void drawBg(Canvas canvas) {rect.set(-1, 0, timeScale * 24 + 1, viewHeight);canvas.drawRect(rect, bgPaint);}

画时间片段

public void drawTimeRect(Canvas canvas) {for (TimePart temp : data) {int seconds1 = temp.sHour * 3600 + temp.sMinute * 60 + temp.sSeconds;int seconds2 = temp.eHour * 3600 + temp.eMinute * 60 + temp.eSeconds;//如果是先除以3600小数点的数据会被舍去 位置就不准确了int x1 = seconds1 * timeScale / 3600;int x2 = seconds2 * timeScale / 3600;rect.set(x1, 0, x2, (int) (viewHeight * 0.9));canvas.drawRect(rect, timePaint);}}

定义一个时间片段的类:

//时间片段 用于标记选中的时间public static class TimePart {//开始的时间public int sHour, sMinute, sSeconds;//结束的时间public int eHour, eMinute, eSeconds;public TimePart(int sHour, int sMinute, int sSeconds, int eHour, int eMinute, int eSeconds) {this.sHour = sHour;this.sMinute = sMinute;this.sSeconds = sSeconds;this.eHour = eHour;this.eMinute = eMinute;this.eSeconds = eSeconds;}}

其它的好像也没有什么介绍，如果有在补充。

项目地址:https://github.com/absolve/TimeScale