android 带刻度的滑动条_android 滚轮刻度尺的实现

遇到一个需求需要实现如下图的效果：

卷尺，通过左右滑动来选择不同的刻度值。这方面的东西以前没弄过，以目前你的能力，想了几种思路都死在了半路上。比如上面的刻度线如何弄，滑动的时候又该如何弄；下面的数字又如何弄；看起来像圆圈的效果该如何弄。时间紧迫，就俩晚上的时间。没有好的思路就参考别人的先吧，说来也巧，两天前刚看过一个日期选择控件，还有以前看的一个仿IPhone滚动控件，效果类似：

本想找作者傲慢的上校交流下，但是时间比较紧，源码都给了也不是很好意思。大致的浏览了下，可能涉及下面几个东西：

1、背景：这个用shape实现。之前有研究过，也用过，但是还没实现过要求的效果；

2、刻度和数字：这个就不要乱想了，直接draw。相对来说还是比较简单的，就是画直线和数字；

3、滚动：滚动的时候不停的重绘实现一个滚动的效果。弄过，但是不确定实现的是啥样的效果；

4、快速滚动：Scroller和VelocityTracker可能是需要用到的东西。几乎完全没弄过，骚年，学习吧(需求的要求中，这个优先级可以最低)；

5、需求：刻度的单位是可以变的，比如十格一个单位，或者两格一个单位，在或者可以是任意的(这个前期思路没想好，实现起来就困难了，最后只弄了两种)。

其实，到了这一步基本上就已经可以实现了，看个最终效果先：

下面就一步一步来。在这之前还有个地方要说的，就是控件的接口：对外提供一个方法实现控件初始化和接收控件选择的值：显示的单位，最大值，最小值，当前值，回调接口。有了这些，先从最难的入手。首先，实现刻度和数字，并可以滑动。这个地方很关键，每个人有每个人的思路，而且思路的好坏直接影响到后面对不同单位的实现。目前的思路是根据当前显示的数值mValue，从控件中间向两边画刻度线，滑动的时候同时改变显示的值mValue，不足最小刻度的四舍五入：@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

drawScaleLine(canvas);

// drawWheel(canvas);

drawMiddleLine(canvas);

}

private void drawWheel(Canvas canvas) {

Drawable wheel = getResources().getDrawable(R.drawable.bg_wheel);

wheel.setBounds(0, 0, getWidth(), getHeight());

wheel.draw(canvas);

}

/**

* 从中间往两边开始画刻度线

*

* @param canvas

*/

private void drawScaleLine(Canvas canvas) {

canvas.save();

Paint linePaint = new Paint();

linePaint.setStrokeWidth(2);

linePaint.setColor(Color.BLACK);

TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);

textPaint.setTextSize(TEXT_SIZE * mDensity);

int width = mWidth, drawCount = 0;

float xPosition = 0, textWidth = Layout.getDesiredWidth("0", textPaint);

for (int i = 0; drawCount <= 4 * width; i++) {

int numSize = String.valueOf(mValue + i).length();

xPosition = (width / 2 - mMove) + i * mLineDivider * mDensity;

if (xPosition + getPaddingRight() < mWidth) {

if ((mValue + i) % mModType == 0) {

canvas.drawLine(xPosition, getPaddingTop(), xPosition, mDensity * ITEM_MAX_HEIGHT, linePaint);

if (mValue + i <= mMaxValue) {

switch (mModType) {

case MOD_TYPE_HALF:

canvas.drawText(String.valueOf((mValue + i) / 2), countLeftStart(mValue + i, xPosition, textWidth), getHeight() - textWidth, textPaint);

break;

case MOD_TYPE_ONE:

canvas.drawText(String.valueOf(mValue + i), xPosition - (textWidth * numSize / 2), getHeight() - textWidth, textPaint);

break;

default:

break;

}

}

} else {

canvas.drawLine(xPosition, getPaddingTop(), xPosition, mDensity * ITEM_MIN_HEIGHT, linePaint);

}

}

xPosition = (width / 2 - mMove) - i * mLineDivider * mDensity;

if (xPosition > getPaddingLeft()) {

if ((mValue - i) % mModType == 0) {

canvas.drawLine(xPosition, getPaddingTop(), xPosition, mDensity * ITEM_MAX_HEIGHT, linePaint);

if (mValue - i >= 0) {

switch (mModType) {

case MOD_TYPE_HALF:

canvas.drawText(String.valueOf((mValue - i) / 2), countLeftStart(mValue - i, xPosition, textWidth), getHeight() - textWidth, textPaint);

break;

case MOD_TYPE_ONE:

canvas.drawText(String.valueOf(mValue - i), xPosition - (textWidth * numSize / 2), getHeight() - textWidth, textPaint);

break;

default:

break;

}

}

} else {

canvas.drawLine(xPosition, getPaddingTop(), xPosition, mDensity * ITEM_MIN_HEIGHT, linePaint);

}

}

drawCount += 2 * mLi