RandomCodeView:自定义控件,主要功能是实现本地图形验证码.
xml布局如下:
<com.example.test6.RandomCodeView
android:id="@+id/randomCodeView"
android:layout_width="130dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"/>
RandomCodeView具有验证码点击刷新、验证等功能,基于自定义View实现,自定义View的分为measure、layout、draw三个过程,即测量、布局、绘制,分别对应onMeasure()、onLayout()、onDraw()三个方法,measure确定自定义View的宽度和高度,layout确定自定义View最终布局的宽度和高度以及四个顶点的位置,draw将自定义View会知道屏幕上,RandomCodeView主要分为以下几个部分:
处理WRAP_CONTENT
验证码字体大小测算
验证码绘制
点击事件
验证码结果验证
处理WRAP_CONTENT
当使用自定义View指定宽度和高度为wrap_content时,即为AT_MOST模式,此时自定义View的大小为父容器的大小,因此需要对wrap_content进行处理,以达到预期效果。处理如下:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//处理wrap_content问题
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(200, 100);
} else if (widthSpecMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(200, heightSpecSize);
} else if (heightSpecMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(widthSpecSize, 100);
}
........................
在onMeasure()方法中,获取宽/高的SpecMode,分别判断宽/高的SpecMode是否为AT_MOST,若为AT_MOST,则指定宽/高的大小,否则,为指定的大小。
Tips:getHeight()方法和getMeasuredHeight()方法的区别?
两者获取的结果单位均为px(像素),getHeight()方法获取的为View在屏幕上显示的高度,getMeasuredHeight()方法获取的为View的原始测量高度,当屏幕大小可以包裹内容时,两者相同,当View的高度超出屏幕大小时: getHeight() = getMeasuredHeight() + View高度超出屏幕的部分
验证码字体大小测算
在onMeasure()方法里面进行字体大小的测算,代码如下:
@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
//.........................
mHeight = getMeasuredHeight();
mWidth = getMeasuredWidth();
mTextSize = (int) ((float) mWidth / 4.5);
//如果高度小于字体大小,则字体高度为0.5倍的view高度,防止字体超出view大小
if (mHeight < mTextSize) {
mTextSize = (int) (0.5 * mHeight);
}
}
通过getHeight()和getWidth()方法获取View的实际显示高度,考虑到需要4个验证码字符,以及3个空格,经过实际实验,采用View宽度除以4.5,以得到验证码字体大小,同时,需要判断是否会出现高度过小的情况,如果高度过小,则字体高度为0.5倍的View高度,防止验证码溢出高度。
View的绘制过程
在onDraw()方法里面进行自定义View的绘制,首先初始化画笔,设置画笔Paint绘制字体的大小,笔触的宽度等等:
//去锯齿
mPaint.setAntiAlias(true);
//设置字体大小,单位px
mPaint.setTextSize(mTextSize);
//设置笔触宽度
mPaint.setStrokeWidth(3);
//设置阴影为null
mPaint.setShader(null);
下一步就是生成随机验证码、字体颜色以及背景颜色等,由于onDraw()方法会被调用多次,因此设置一个flag,标识是否已经初始化参数完成,代码如下:
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
//获取字体高度
float textHeight = Math.abs(fontMetrics.ascent) + fontMetrics.descent;
Log.d(TAG, "textHeight : " + textHeight);
if (!flag) {
//初始化各种随机参数,定义flag,防止频繁调用onDraw刷新数据
init(fontMetrics, mHeight);
}
init()方法如下:
/**
* 初始化各种随机参数
*
* @param fontMetrics
* @param textHeight
* 文字高度
*
*/
private void init(Paint.FontMetrics fontMetrics, float textHeight) {
mRandom = new Random(System.currentTimeMillis());
mBgColor = getBgRandomColor();
// 获取随机码Y位置
for (int i = 0; i < 4; i++) {
mYs[i] = getRandomY(fontMetrics, mHeight);
mCodes[i] = getRandomText();
mColors[i] = getTextRandomColor();
}
// 点击事件
if (mIsOnClickRefresh) {
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// 清空数据
flag = false;
// 重绘
invalidate();
}
});
}
flag = true;
}
自定义View在绘制字体时,调用drawText()方法
public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint);
其中想x,y为字体baseLine(基线)的坐标,如下图示意:
其中:
leading:为文本之间额外的距离,测试发现,一般为0.0
ascent:为baseLine到字体最高点的距离,为负值
descent:为baseLine到字体最低点的距离
据此,可以得出字体高度为:
//获取字体高度
float textHeight = Math.abs(fontMetrics.ascent) + fontMetrics.descent;
同时,验证码要随机显示位置,随机的位置应该为(ascent, view高度-descent),因此,随机位置y的方法如下:
/**
* 获取文字Y坐标位置,y为文字baseline坐标 从 ascent到height-descent之间随机
*
*/
private float getRandomY(Paint.FontMetrics fontMetrics, int height) {
int min = (int) (height - Math.abs(fontMetrics.ascent) - fontMetrics.descent);
return mRandom.nextInt(min) + Math.abs(fontMetrics.ascent);
}
同时,需要随机产生四个验证码,选取0-9,A-Z,由于,9和A之间还有其他特殊字符,因此需要在产生随机结果时进行判断,是否符合要求:
/**
* 获取单个随机字符,0-9, A-Z
*
*/
private char getRandomText() {
int i = mRandom.nextInt(42) + 48;
while (i > 57 && i < 65) {
i = mRandom.nextInt(42) + 48;
}
char tmp = (char) (i);
return tmp;
}
随机产生验证码颜色以及背景颜色,注意两种颜色不要重叠:
/**
* 获取随机背景颜色
*
*/
private int getBgRandomColor() {
int r = mRandom.nextInt(140) + 115;
int g = mRandom.nextInt(140) + 115;
int b = mRandom.nextInt(140) + 115;
return Color.rgb(r, g, b);
}
/**
* 获取随机颜色
*
*/
private int getTextRandomColor() {
int r = mRandom.nextInt(90) + 40;
int g = mRandom.nextInt(90) + 40;
int b = mRandom.nextInt(90) + 40;
return Color.rgb(r, g, b);
}
初始化验证码各项参数之后,设置View的背景颜色,调用drawText方法进行绘制
// 设置背景色
setBackgroundColor(mBgColor);
// 起始x位置
String drawText = "A B C D";
float startX = (getWidth() - mPaint.measureText(drawText)) / 2;
// 画四个随机字母,每个字母随机颜色
for (int i = 0; i < 4; i++) {
mPaint.setColor(mColors[i]);
float x = startX + i * mPaint.measureText("A ");
if (i == 3) {
canvas.drawText(String.valueOf(mCodes[i]), x, mYs[i], mPaint);
} else {
canvas.drawText(mCodes[i] + " ", x, mYs[i], mPaint);
}
}
调用Paint的measureText方法能够获取绘制字体的宽度,使用View的宽度减去绘制字体的宽度,之后得到绘制字体两边的富余宽度,除以2即为开始绘制的位置,同时,每绘制一个验证码,绘制一个空格,之后将绘制的x位置依次右移。 画完验证码后,为了增加验证难度,可以绘制几条干扰线以及干扰点,干扰线的起始x位置为0到View的宽度,y位置的起始和结束作为为View的高度随机产生,干扰点的坐标也是在View的宽/高中随机产生,如下:
// 画三条干扰线,颜色和位置也可以提前初始化 ( 这边修改干扰物数量 )
for (int i = 0; i < 3; i++) {
mPaint.setColor(getTextRandomColor());
canvas.drawLine(0, mRandom.nextInt(mHeight), mWidth, mRandom.nextInt(mHeight), mPaint);
}
mPaint.setStrokeWidth(8);
// 画15个干扰点 ( 这边修改干扰物数量 )
for (int i = 0; i < 15; i++) {
mPaint.setColor(getTextRandomColor());
canvas.drawPoint(mRandom.nextInt(mWidth), mRandom.nextInt(mHeight), mPaint);
}
为了防止多次调用onDraw()方法导致干扰点和干扰线的位置以及颜色变化,可以像初始化验证码的字体颜色一样,提前初始化好,定义一个flag,防止多次变化。
其他方法
点击事件,当用户点击验证码View时,重新随机验证码及绘制:
//点击事件
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//清空数据
flag = false;
//重绘
invalidate();
}
});
设置验证验证码方法以及刷新验证码方法:
/**
* 检查用户输入结果
*
*/
@SuppressLint("DefaultLocale")
public boolean checkResult(String code) {
if (TextUtils.isEmpty(String.valueOf(mCodes)) || TextUtils.isEmpty(code)) {
return false;
}
if (String.valueOf(mCodes).toLowerCase().equals(code.trim().toLowerCase())) {
return true;
}
return false;
}
/**
* refresh 刷新页面方法
*
*/
public void refresh() {
flag = false;
// 重绘
invalidate();
}
最后附上效果图: