android 滚轮刻度尺的实现

泡在网上的日子 / 文 发表于2014-09-02 13:47 次阅读 view

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


卷尺,通过左右滑动来选择不同的刻度值。这方面的东西以前没弄过,以目前你的能力,想了几种思路都死在了半路上。比如上面的刻度线如何弄,滑动的时候又该如何弄;下面的数字又如何弄;看起来像圆圈的效果该如何弄。时间紧迫,就俩晚上的时间。没有好的思路就参考别人的先吧,说来也巧,两天前刚看过一个日期选择控件,还有以前看的一个仿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 = (int) (mMove / (mLineDivider * mDensity));
    if (Math.abs(tValue) > 0) {
        mValue += tValue;
        mMove -= tValue * mLineDivider * mDensity;
        if (mValue <= 0 || mValue > mMaxValue) {
            mValue = mValue <= 0 ? 0 : mMaxValue;
            mMove = 0;
            mScroller.forceFinished(true);
        }
        notifyValueChange();
    }
    postInvalidate();
}
private void countMoveEnd() {
    int roundMove = Math.round(mMove / (mLineDivider * mDensity));
    mValue = mValue + roundMove;
    mValue = mValue <= 0 ? 0 : mValue;
    mValue = mValue > mMaxValue ? mMaxValue : mValue;
    mLastX = 0;
    mMove = 0;
                                              
    notifyValueChange();
    postInvalidate();
}
private void notifyValueChange() {
    if (null != mListener) {
        if (mModType == MOD_TYPE_ONE) {
            mListener.onValueChange(mValue);
        }
        if (mModType == MOD_TYPE_HALF) {
            mListener.onValueChange(mValue / 2f);
        }
    }
}
@Override
public void computeScroll() {
    super.computeScroll();
    if (mScroller.computeScrollOffset()) {
        if (mScroller.getCurrX() == mScroller.getFinalX()) { // over
            countMoveEnd();
        } else {
            int xPosition = mScroller.getCurrX();
            mMove += (mLastX - xPosition);
            changeMoveAndValue();
            mLastX = xPosition;
        }
    }
}

最后就是圆圈背景的实现。这个用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 = 50, mMaxValue = 100, mModType = MOD_TYPE_HALF, mLineDivider = ITEM_HALF_DIVIDER;
    // private int mValue = 50, mMaxValue = 500, mModType = MOD_TYPE_ONE,
    // mLineDivider = ITEM_ONE_DIVIDER;
    private int mLastX, mMove;
    private int mWidth, mHeight;
    private int mMinVelocity;
    private Scroller mScroller;
    private VelocityTracker mVelocityTracker;
    private OnValueChangeListener mListener;
    @SuppressWarnings("deprecation")
    public TuneWheel(Context context, AttributeSet attrs) {
        super(context, attrs);
        mScroller = new Scroller(getContext());
        mDensity = getContext().getResources().getDisplayMetrics().density;
        mMinVelocity = ViewConfiguration.get(getContext()).getScaledMinimumFlingVelocity();
        // setBackgroundResource(R.drawable.bg_wheel);
        setBackgroundDrawable(createBackground());
    }
    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;
    }
    /**
     *
     * 考虑可扩展,但是时间紧迫,只可以支持两种类型效果图中两种类型
     *
     * @param value
     *            初始值
     * @param maxValue
     *            最大值
     * @param model
     *            刻度盘精度:<br>
     *            {@link MOD_TYPE_HALF}<br>
     *            {@link MOD_TYPE_ONE}<br>
     */
    public void initViewParam(int defaultValue, int maxValue, int model) {
        switch (model) {
        case MOD_TYPE_HALF:
            mModType = MOD_TYPE_HALF;
            mLineDivider = ITEM_HALF_DIVIDER;
            mValue = defaultValue * 2;
            mMaxValue = maxValue * 2;
            break;
        case MOD_TYPE_ONE:
            mModType = MOD_TYPE_ONE;
            mLineDivider = ITEM_ONE_DIVIDER;
            mValue = defaultValue;
            mMaxValue = maxValue;
            break;
        default:
            break;
        }
        invalidate();
        mLastX = 0;
        mMove = 0;
        notifyValueChange();
    }
    /**
     * 设置用于接收结果的监听器
     *
     * @param listener
     */
    public void setValueChangeListener(OnValueChangeListener listener) {
        mListener = listener;
    }
    /**
     * 获取当前刻度值
     *
     * @return
     */
    public float getValue() {
        return mValue;
    }
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        mWidth = getWidth();
        mHeight = getHeight();
        super.onLayout(changed, left, top, right, bottom);
    }
    @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();
    }
    /**
     * 计算没有数字显示位置的辅助方法
     *
     * @param value
     * @param xPosition
     * @param textWidth
     * @return
     */
    private float countLeftStart(int value, float xPosition, float textWidth) {
        float xp = 0f;
        if (value < 20) {
            xp = xPosition - (textWidth * 1 / 2);
        } else {
            xp = xPosition - (textWidth * 2 / 2);
        }
        return xp;
    }
    /**
     * 画中间的红色指示线、阴影等。指示线两端简单的用了两个矩形代替
     *
     * @param canvas
     */
    private void drawMiddleLine(Canvas canvas) {
        // TOOD 常量太多,暂时放这,最终会放在类的开始,放远了怕很快忘记
        int gap = 12, indexWidth = 8, indexTitleWidth = 24, indexTitleHight = 10, shadow = 6;
        String color = "#66999999";
        canvas.save();
        Paint redPaint = new Paint();
        redPaint.setStrokeWidth(indexWidth);
        redPaint.setColor(Color.RED);
        canvas.drawLine(mWidth / 2, 0, mWidth / 2, mHeight, redPaint);
        Paint ovalPaint = new Paint();
        ovalPaint.setColor(Color.RED);
        ovalPaint.setStrokeWidth(indexTitleWidth);
        canvas.drawLine(mWidth / 2, 0, mWidth / 2, indexTitleHight, ovalPaint);
        canvas.drawLine(mWidth / 2, mHeight - indexTitleHight, mWidth / 2, mHeight, ovalPaint);
        // RectF ovalRectF = new RectF(mWidth / 2 - 10, 0, mWidth / 2 + 10, 4 *
        // mDensity); //TODO 椭圆
        // canvas.drawOval(ovalRectF, ovalPaint);
        // ovalRectF.set(mWidth / 2 - 10, mHeight - 8 * mDensity, mWidth / 2 +
        // 10, mHeight); //TODO
        Paint shadowPaint = new Paint();
        shadowPaint.setStrokeWidth(shadow);
        shadowPaint.setColor(Color.parseColor(color));
        canvas.drawLine(mWidth / 2 + gap, 0, mWidth / 2 + gap, mHeight, shadowPaint);
        canvas.restore();
    }
    @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 = (int) (mMove / (mLineDivider * mDensity));
        if (Math.abs(tValue) > 0) {
            mValue += tValue;
            mMove -= tValue * mLineDivider * mDensity;
            if (mValue <= 0 || mValue > mMaxValue) {
                mValue = mValue <= 0 ? 0 : mMaxValue;
                mMove = 0;
                mScroller.forceFinished(true);
            }
            notifyValueChange();
        }
        postInvalidate();
    }
    private void countMoveEnd() {
        int roundMove = Math.round(mMove / (mLineDivider * mDensity));
        mValue = mValue + roundMove;
        mValue = mValue <= 0 ? 0 : mValue;
        mValue = mValue > mMaxValue ? mMaxValue : mValue;
        mLastX = 0;
        mMove = 0;
        notifyValueChange();
        postInvalidate();
    }
    private void notifyValueChange() {
        if (null != mListener) {
            if (mModType == MOD_TYPE_ONE) {
                mListener.onValueChange(mValue);
            }
            if (mModType == MOD_TYPE_HALF) {
                mListener.onValueChange(mValue / 2f);
            }
        }
    }
    @Override
    public void computeScroll() {
        super.computeScroll();
        if (mScroller.computeScrollOffset()) {
            if (mScroller.getCurrX() == mScroller.getFinalX()) { // over
                countMoveEnd();
            } else {
                int xPosition = mScroller.getCurrX();
                mMove += (mLastX - xPosition);
                changeMoveAndValue();
                mLastX = xPosition;
            }
        }
    }
}


收藏 赞 (2) 踩 (0)
上一篇:基于百度云推送的Android高仿微信实时聊天
转载自: http://blog.csdn.net/lmj623565791/article/details/38799363 一直在仿微信界面,今天终于有幸利用百度云推送仿一仿微信聊天了~~~ 首先特别感谢:weidi1989分享的 Android之基于百度云推送IM ,大家可以直接下载;省了很多事哈,本例中也使用了weid
下一篇:给安卓初学者的12篇教程
如果你想学习安卓程序开发,网上会有很多的教程和学习材料。来源广泛、林林总总的初学者教程和进阶教程,我们SitePoint也经常提供一些新的安卓开发教程。 考虑到有如此多的信息你又是初学者,所以你很容易感到迷惑不知道从哪开始。为了让你感到轻松同时消除