首页 > 代码库 > 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 * mLineDivider * mDensity; } canvas.restore(); }接着就是滑动的加速问题,这里用到两个类Scroller和VelocityTracker,关于这两个类之后有机会会详细介绍,这里简单提下:VelocityTracker的作用是在用户加速滑动时计算该滑动多远,拿到这个之后通过Scroller来执行滑动过程的计算,最后是真实的“移动”——根据mValue的值进行重绘:
@Override public boolean onTouchEvent(MotionEvent event) { int action = event.getAction(); int xPosition = (int) event.getX(); if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMovement(event); switch (action) { case MotionEvent.ACTION_DOWN: mScroller.forceFinished(true); mLastX = xPosition; mMove = 0; break; case MotionEvent.ACTION_MOVE: mMove += (mLastX - xPosition); changeMoveAndValue(); break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: countMoveEnd(); countVelocityTracker(event); return false; // break; default: break; } mLastX = xPosition; return true; } private void countVelocityTracker(MotionEvent event) { mVelocityTracker.computeCurrentVelocity(1000); float xVelocity = mVelocityTracker.getXVelocity(); if (Math.abs(xVelocity) > mMinVelocity) { mScroller.fling(0, 0, (int) xVelocity, 0, Integer.MIN_VALUE, Integer.MAX_VALUE, 0, 0); } } private void changeMoveAndValue() { int tValue = http://www.mamicode.com/(int) (mMove / (mLineDivider * mDensity));>最后就是圆圈背景的实现。这个用shape来做,可以使用setBackgroundDrawable()来做,也可以在draw中进行直接绘制,效果相同。其他的还有一些细节问题,比如滑动时刻度线超过边界,滑动距离大时候显示不完整等问题,这个只有做了才会发现。下面是shape背景的代码:<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <!-- two set color way --> <gradient android:angle="0" android:centerColor="#66FFFFFF" android:endColor="#66AAAAAA" android:startColor="#66AAAAAA" /> <corners android:radius="6dp" /> <stroke android:width="6dp" android:color="#FF666666" /> </shape>用代码可以这样写:private GradientDrawable createBackground() { float strokeWidth = 4 * mDensity; // 边框宽度 float roundRadius = 6 * mDensity; // 圆角半径 int strokeColor = Color.parseColor("#FF666666");// 边框颜色 // int fillColor = Color.parseColor("#DFDFE0");// 内部填充颜色 setPadding((int)strokeWidth, (int)strokeWidth, (int)strokeWidth, 0); int colors[] = { 0xFF999999, 0xFFFFFFFF, 0xFF999999 };// 分别为开始颜色,中间夜色,结束颜色 GradientDrawable bgDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, colors);// 创建drawable // bgDrawable.setColor(fillColor); bgDrawable.setCornerRadius(roundRadius); bgDrawable.setStroke((int)strokeWidth, strokeColor); // setBackgroundDrawable(gd); return bgDrawable; }最后在来贴一下完整的代码:package com.ttdevs.wheel.widget; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.drawable.Drawable; import android.graphics.drawable.GradientDrawable; import android.text.Layout; import android.text.TextPaint; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.VelocityTracker; import android.view.View; import android.view.ViewConfiguration; import android.widget.Scroller; import com.ttdevs.wheel.R; /** * 卷尺控件类。由于时间比较紧,只有下班后有时间,因此只实现了基本功能。<br> * 细节问题包括滑动过程中widget边缘的刻度显示问题等<br> * * 周末有时间会继续更新<br> * * @author ttdevs * @version create:2014年8月26日 */ @SuppressLint("ClickableViewAccessibility") public class TuneWheel extends View { public interface OnValueChangeListener { public void onValueChange(float value); } public static final int MOD_TYPE_HALF = 2; public static final int MOD_TYPE_ONE = 10; private static final int ITEM_HALF_DIVIDER = 40; private static final int ITEM_ONE_DIVIDER = 10; private static final int ITEM_MAX_HEIGHT = 50; private static final int ITEM_MIN_HEIGHT = 20; private static final int TEXT_SIZE = 18; private float mDensity; private int mValue = http://www.mamicode.com/50, mMaxValue = 100, mModType = MOD_TYPE_HALF, mLineDivider = ITEM_HALF_DIVIDER;>android 滚轮刻度尺的实现