Android自定义刻度尺的实现思路以及步骤
最近一直在学自定义view，博大精深，感觉如果向底层看的话，功力不够且时间不允许，所以一直都是停留在怎么实现自定义view上，而为何会这么实现以及差异并没有考虑的很清晰，因为面向对象编程以及封装，都是让我们将功能抽出来使用，而不是去考虑每个功能里是怎么实现的，所以很苦恼，还是先实现吧，至于原理慢慢理解吧！
这是自定义View学习的第三篇，学习主要是在项目的基础上来学，并不是一点点的基础死扣，因为你看懂，敲出来一个自定义view的代码，你就会慢慢有所理解，包括中间的一些计算，所以还是建议大家先去敲代码，自己写不出来，就把别人的代码敲一遍，去理解一遍，比仅仅去看会领悟的更多，这就有点书读百遍，其义自现的意思，哈哈，一点浅见，谁让我笨呢。
今天讲一下自定义刻度尺的实现，咋听刻度尺，难度并不高，但是对于刚刚开始动手敲，摆脱Ctrl+c/Ctrl+z的同学来说还是有些难度的。
看看我的实现效果吧：
横向显示10cm，模拟器暂时找不到横屏，就这样吧！@_@
思路呢？
刚开始敲的时候，先明确思路，磨刀不误砍柴工，进去就敲最后敲得自己也糊涂了！
1：画刻度尺
2：画刻度数
3：画红线标记
4：处理滑动
画刻度尺
canvas.save();
for (int i = min; i < max; i++) {
if (i % 10 == 0) {
//起点x坐标10像素，画厘米线
canvas.drawLine(10, 0, 10, 72, mLinePaint);
String text = i / 10 + "";
Rect rect = new Rect();
float txtWidth = mTextPaint.measureText(text);
mTextPaint.getTextBounds(text, 0, text.length(), rect);
canvas.drawText(text, 10 - txtWidth / 2, 72 + rect.height() + 10, mTextPaint);
} else if (i % 5 == 0) {
//每隔0.5cm画间隔线
canvas.drawLine(10, 0, 10, 64, mLinePaint);
} else {
//画毫米线
canvas.drawLine(10, 0, 10, 48, mLinePaint);
}
//每隔18像素移动一次，达到画线效果
canvas.translate(18, 0);
}
canvas.restore();画刻度数
if (i % 10 == 0) {
//起点x坐标10像素，画厘米线
canvas.drawLine(10, 0, 10, 72, mLinePaint);
//计算刻度数
String text = i / 10 + "";
Rect rect = new Rect();
//获取文本宽度
float txtWidth = mTextPaint.measureText(text);
mTextPaint.getTextBounds(text, 0, text.length(), rect);
//画字
canvas.drawText(text, 10 - txtWidth / 2, 72 + rect.height() + 10, mTextPaint);
}画红线标记
看效果图：
很明显，是一条线，外加一个圆。计算好距离就ok。
//画线
canvas.drawLine(progrees, 0, progrees, 160, mRulerPaint);
//线下画圆
canvas.drawCircle(progrees, 170, 10, mRulerPaint);
BigDecimal bd = new BigDecimal((progrees - 18) / 180);
bd = bd.setScale(1, BigDecimal.ROUND_HALF_UP);
//计算刻度数，保留一位小数，单位cm
mTextPaint.setTextSize(48);
canvas.drawText(bd.floatValue() + "cm", 500, 400, mTextPaint);progrees是手指触摸的x轴坐标，线高160，圆心y轴坐标170，半径10即可。
处理滑动
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
isCanMove = true;
break;
case MotionEvent.ACTION_MOVE:
if (!isCanMove) {
return false;
}
//前面0坐标线从10像素开始，故而计算的时候要-10
float x = event.getX() - 10;
progrees = x;
//刷新
invalidate();
break;
}
return true;
}绘画步骤就是这么多。
完整代码：
package com.example.com.testview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import java.math.BigDecimal;
/**
* 刻度尺
* Created by Administrator on 2016/9/14.
*/
public class ScaleView extends View {
private Paint mLinePaint;
private Paint mTextPaint;
private Paint mRulerPaint;
private float progrees = 10;
private int max = 101;
private int min = 0;
private boolean isCanMove;
public ScaleView(Context context) {
super(context);
init();
}
public ScaleView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ScaleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mLinePaint = new Paint();
mLinePaint.setColor(Color.CYAN);
mLinePaint.setAntiAlias(true);//抗锯齿
mLinePaint.setStyle(Paint.Style.STROKE);
mLinePaint.setStrokeWidth(4);
mTextPaint = new Paint();
mTextPaint.setColor(Color.CYAN);
mTextPaint.setAntiAlias(true);
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setStrokeWidth(2);
mTextPaint.setTextSize(48);
//
mRulerPaint = new Paint();
mRulerPaint.setAntiAlias(true);
mRulerPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mRulerPaint.setColor(Color.RED);
mRulerPaint.setStrokeWidth(4);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(setMeasureWidth(widthMeasureSpec), setMeasureHeight(heightMeasureSpec));
}
private int setMeasureHeight(int spec) {
int mode = MeasureSpec.getMode(spec);
int size = MeasureSpec.getSize(spec);
int result = Integer.MAX_VALUE;
switch (mode) {
case MeasureSpec.AT_MOST:
size = Math.min(result, size);
break;
case MeasureSpec.EXACTLY:
break;
default:
size = result;
break;
}
return size;
}
private int setMeasureWidth(int spec) {
int mode = MeasureSpec.getMode(spec);
int size = MeasureSpec.getSize(spec);
int result = Integer.MAX_VALUE;
switch (mode) {
case MeasureSpec.AT_MOST:
size = Math.min(result, size);
break;
case MeasureSpec.EXACTLY:
break;
default:
size = result;
break;
}
return size;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
for (int i = min; i < max; i++) {
if (i % 10 == 0) {
canvas.drawLine(10, 0, 10, 72, mLinePaint);
String text = i / 10 + "";
Rect rect = new Rect();
float txtWidth = mTextPaint.measureText(text);
mTextPaint.getTextBounds(text, 0, text.length(), rect);
canvas.drawText(text, 10 - txtWidth / 2, 72 + rect.height() + 10, mTextPaint);
} else if (i % 5 == 0) {
canvas.drawLine(10, 0, 10, 64, mLinePaint);
} else {
canvas.drawLine(10, 0, 10, 48, mLinePaint);
}
canvas.translate(18, 0);
}
canvas.restore();
canvas.drawLine(progrees, 0, progrees, 160, mRulerPaint);
canvas.drawCircle(progrees, 170, 10, mRulerPaint);
BigDecimal bd = new BigDecimal((progrees - 18) / 180);
bd = bd.setScale(1, BigDecimal.ROUND_HALF_UP);
mTextPaint.setTextSize(48);
canvas.drawText(bd.floatValue() + "cm", 500, 400, mTextPaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
isCanMove = true;
break;
case MotionEvent.ACTION_MOVE:
if (!isCanMove) {
return false;
}
float x = event.getX() - 10;
progrees = x;
invalidate();
break;
}
return true;
}
}
布局：
<com.example.com.testview.ScaleView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"/>现在看一下横向效果：
代码就不上传了，上面就是。