Android拆轮子系列之写验证码控件的方法

前言

先看看效果

怎么样不错吧?别急下面我就一步一步的教你实现。

用到的知识点总结:

1.Canvas和pint的使用,我们用它画点,线,字

2.View的基本用法

其实做这个东西还是很简单的,总体思路步骤如下:

1.准备一个Canvas。

2.向Canvas里面画几条斜杠。

3.向canvas里面画100个小点。

4.随机生成4个数字,然后画在canvas里面。

其实就是这么简单,没什么深奥的。

开始写编码

1.首先我们要重写View

既然我们要画验证码,那么我们就需要准备画笔(paint)和画板(canvas)代码如下:

/**
* Created by YuYuanDa on 2016-10-10.
*/
public class CheckView extends View implements View.OnClickListener{
private Context mContext;
private Paint mPaint ; // 画笔
public CheckView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
initPaint();
//设置点击时间,当自身收到点击应该更新数字(即重新换验证码数字)
setOnClickListener(this);
}
/**
* 初始化paint(画笔)
*/
private void initPaint(){
mPaint = new Paint();
mPaint.setAntiAlias(true);//加上抗锯齿
mPaint.setTextSize(Config.TEXT_SIZE);//设置字体大小
mPaint.setStrokeWidth(3);线宽
mPaint.setColor(Config.TEXTCOLOR);//设置字体颜色颜色
//设置粗体的字体
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
mPaint.setTypeface( font );
}
@Override
public void onClick(View v) {
//在这里面更新,重新换一套验证码字符
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Config.COLOR);//先画一个背景颜色
}
}
/**
* 配置字段
*/
class Config{
// 点数设置
public static final int POINT_NUM = 100;
// 线段数设置
public static final int LINE_NUM = 2;
//设置验证码背景颜色
public static final int COLOR = Color.rgb(247,230,220);
//随机字符长度长度
public static int TEXT_LENGTH = 4;
//设置验证码字体大小
public static int TEXT_SIZE = 40;
//验证码字体颜色
public static final int TEXTCOLOR = Color.rgb(255,101,1);
}

好了,上面的代码中,我们自定义一个CheckView类,并准备了以下材料:

1.为了更新数据我们设置了点击事件setOnClickListener(this);,

2.Config类是为我们准备配置信息,

3.new 出一支paint(画笔),并添加相关参数。

4.准备了画板canvas(在ondraw()方法中),下面我们将在ondraw()方法中画东西了。

2.接下来我们开始画线、点、字。

画线代码如下:

private void drawLine(Canvas canvas){
for (int i = 0; i < Config.LINE_NUM; i++) {//根据LINE_NUM画线的数量,你可以自己配置
//划线
int[] line = getLine(getHeight(), getWidth());
canvas.drawLine(line[0], line[1], line[2], line[3], mPaint);
}
}
public static int[] getLine(int height, int width) {
int[] tempCheckNum = {0, 0, 0, 0};
for (int i = 0; i < 4; i += 2) {
tempCheckNum[i] = (int) (Math.random() * width);
tempCheckNum[i + 1] = (int) (Math.random() * height);
}
return tempCheckNum;
}

下面我们来讲一下canvas.drawLine()方法。先看看源码:

public void drawLine (float startX, float startY, float stopX, float stopY, Paint paint){
}

参数说明:

startX:起始端点的X坐标。

startY:起始端点的Y坐标。

stopX:终止端点的X坐标。

stopY:终止端点的Y坐标。

paint:绘制直线所使用的画笔

看到没,其实画线就需要paint和2个起始点。在getline()方法中,for循环其实就循环了2次, math.random()取值范围是:0.0~1.0 ,所以可以看出,Math.random() * width/heigth随机的在view中取4个点作为2个点的取值,然后 canvas.drawLine()画出来。

画点代码如下:

private void drawCircle(Canvas canvas){
// 绘制小圆点
int[] point;
for (int i = 0; i < Config.POINT_NUM; i++) {//根据POINT_NUM画点的数量,你可以自己配置
//画点
point = getPoint(getHeight(), getWidth());
canvas.drawCircle(point[0], point[1], 1, mPaint);
}
}
/**
* 随机产生点的圆心点坐标
* @param height 传入CheckView的高度值
* @param width 传入CheckView的宽度值
* @return
*/
public static int[] getPoint(int height, int width) {
int[] tempCheckNum = {0, 0, 0, 0};
tempCheckNum[0] = (int) (Math.random() * width);
tempCheckNum[1] = (int) (Math.random() * height);
return tempCheckNum;
}

下面我们来讲一下canvas.drawCircle()方法

基本语法

public void drawCircle (float cx, float cy, float radius, Paint paint)

参数说明

cx:圆心的x坐标。

cy:圆心的y坐标。

radius:圆的半径。

paint:绘制时所使用的画笔。

看了上面的基本语法,大家应该明白了,画圆只需要圆心,半径和paint就行。在getPoint()方法中,我们依旧利用Math.random() * width/height方法在View中随机的取2个点作为圆心。

画文字代码如下:

下面我们就来讲最后一步画文字。这个比较麻烦一点,我们一步步来看,首先画文字需要准备以下东西:

1.取4位数字码,这个好说用Math.random()*10即可

2.画每个文字时的Y坐标怎么取值(你得控制着Y坐标,如果画view外面去,就尴尬了)

3.每个文字间得有相应的间隔(即画每个文字时的X坐标)

我一个一个实现:

取4位数字码:

/**
* 产生随机数字
*/
public static int[] getCheckNum() {
int[] tempCheckNum = new int[Config.TEXT_LENGTH];//TEXT_LENGTH是产生几位数字
for (int i = 0; i < Config.TEXT_LENGTH; i++) {
tempCheckNum[i] = (int) (Math.random() * 10);//我不说你也明白了吧
}
return tempCheckNum;//产生4个数放在数组中返回
}

控制Y坐标:

/**
* 计算验证码的绘制y点位置
* @param height 传入CheckView的高度值
* @return
*/
public static int getYPos(int height) {
int tempPositoin = (int) (Math.random() * height);
//不能让它画的太靠上,如果Y坐标<Config.TEXT_SIZE的时候,画出的字就会被遮盖
if (tempPositoin < Config.TEXT_SIZE) {
tempPositoin += Config.TEXT_SIZE;
}else if (tempPositoin > (height-Config.TEXT_SIZE)) {//当然也不能画的太靠下
tempPositoin -= Config.TEXT_SIZE;
}
return tempPositoin;
}

控制每个文字时的X坐标

看上图,我们把View平分成5分,那么第一个字的X坐标是:getWidth()/5;第二个字的X坐标是getWidth()/5+getWidth()/5;以此类推,这样是不是这4个字就平分在这个View中?好了,好了开始写代码,如下:

private void drawNum(Canvas canvas){
int dx = getWidth() / 5;
for (int i = 0; i < 4; i++) {//绘制验证控件上的文本
canvas.drawText("" + checkNum[i], dx, getPositon(getHeight()), mPaint);
dx += getWidth() / 5;
}
}

我们来讲解一下canvas.drawText()方法的基本用法:

drawText(String text, float x, floaty, Paint paint)

参数一:String类型的文本,
参数二:x坐标,
参数三:y坐标,
参数四:Paint对象。

3.点击刷新问题

恭喜大家看到这里,我们还剩下最后一个问题了,如何点击刷新UI?简单,在onclick()方法中重新刷新验证码和UI即可,代码如下:

@Override
public void onClick(View v) {
checkNum = CheckUtil.getCheckNum();//checkNum付初值
//在这里面更新,重新换一套验证码字符
invalidate();
}

4.最后封魔

好了讲到这里,我们接近尾声了,这个代码看起来非常乱,所以,我们需要写一个工具类,将以下这几个方法用工具类CheckView封装起来大工告成:

public int[] getCheckNum();
public int[] getLinePos(int height, int width) ;
public int[] getCirclePoint(int height, int width);
public int getPositon(int height);

以上所述是小编给大家介绍的Android拆轮子系列之写验证码控件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android实现短信验证码自动填写功能

    本实例为大家分享了Android实现短信验证码自动填写功能,供大家参考,具体内容如下 实现思路很简单: 1.在需要输入验证码的Activity代码注册监听短信的广播 2.拦截短信,获取其中的验证码 3.回写到EditText private SmsReciver smsReciver = new SmsReciver(); /** 收到短信Action **/ String ACTION_SMS_RECIVER = "android.provider.Telephony.SMS_RECEIVED

  • Android账号注册实现点击获取验证码倒计时效果

    网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果,如何实现这个效果,具体内容如下 效果图:   代码: RegisterActivity.java import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.View; import android.widget.Button; import com.jialianjia.bzw.BaseAct

  • Android开发工程中集成mob短信验证码功能的方法

    一.前言 现在的app基本上都需要用到短信功能,注册时或者有消息通知时需要给用户发送一条短信,但是对于个人开发者来说,去买第三方的短信服务实在是有点奢侈,很好的是mob为我们提供了免费的短信验证码服务功能,我不是打广告,的确觉得这项服务很不错.那么下面就简单讲一下如何在自己的工程里集成mob的短信功能,其实整个流程并不复杂,只是个人觉得mob的官方文档有点小乱,官方Demo也有点小复杂,同时有一些细节地方容易被忽视,也会导致一些问题. PS:太喜欢mob的logo了. 二.实现过程 本篇只涉及A

  • Android获取和读取短信验证码的实现方法

    现如今,验证码在Android的客户端还是非常普遍的.通过手机账号和验证码直接去注册应用账户的信息.很多应用都以这种方式来完成注册.简单的介绍一下吧. Android获取短信验证码还是比较简单的,通过Mob官网提供的ShareSDK,调用其中内部的方法,就可以获取到短信的验证码了.提供一下Mob的官网地址.http://www.mob.com/#/在官网上注册相关的信息之后,下载相关的jar包和.so文件就可以实现获取短信验证码了(2.0之前的版本都需要下载jar包和 .so文件,而现在的2.2

  • Android如何通过手机获取验证码来完成注册功能

    注册很多app或者网络账户的时候,经常需要手机获取验证码,来完成注册,那时年少,只是觉得手机获取验证码这件事儿很好玩,并没有关心太多,她是如何实现的,以及她背后的故事到底是什么样子的,现在小编接手的这个项目里面,就需要通过手机号进行注册,并且手机号发送相应的验证码,来完成注册,那么在一些应用app里面到底是如何实现点击按钮获取验证码,来完成注册这整个流程的呢?今天小编就以注册为例,和小伙伴们分享一下,如何通过手机号获取验证码来完成注册的一整套流程以及如何采用正则表达式来验证手机号码是否符合电信.

  • Android实现自动提取短信验证码功能

    本文实例讲解了Android自动提取短信验证码解决方案,分享给大家供大家参考,具体内容如下 主要功能及优点 1.收到验证码短信后,自动提取短信中的验证码填写到相应输入框 2.可指定一个号码,只读取与他有关短信,避免提取来源错误 3.利用正则表达式,可匹配各种类型验证码 模块集成关键步骤     将auto_getcode_demo中src包里的SMSContentObserver类复制到你的项目src包中 在SMSContentObserver中:    修改正则表达式内容来匹配自己想要获取的字

  • Android开发之获取短信验证码后按钮背景变化并且出现倒计时

    目前越来越多的app在注册或是进行对应操作时,要求获取短信验证码,在点击了获取短信验证码的按钮后,就是出现倒计时,比如倒计时120S,在倒计时期间内,按钮背景变化并且出现倒计时,当倒计时结束后,如果你没有获取到验证码,可以再次点击. 代码如下所示: VerCodeTimer mVerCodeTimer=(Button) findViewById(R.id.login_get_ver_code); private class VerCodeTimer extends CountDownTimer

  • Android拆轮子系列之写验证码控件的方法

    前言 先看看效果 怎么样不错吧?别急下面我就一步一步的教你实现. 用到的知识点总结: 1.Canvas和pint的使用,我们用它画点,线,字 2.View的基本用法 其实做这个东西还是很简单的,总体思路步骤如下: 1.准备一个Canvas. 2.向Canvas里面画几条斜杠. 3.向canvas里面画100个小点. 4.随机生成4个数字,然后画在canvas里面. 其实就是这么简单,没什么深奥的. 开始写编码 1.首先我们要重写View 既然我们要画验证码,那么我们就需要准备画笔(paint)和

  • Android滑动拼图验证码控件使用方法详解

    简介: 很多软件为了安全防止恶意攻击,会在登录/注册时进行人机验证,常见的人机验证方式有:谷歌点击复选框进行验证,输入验证码验证,短信验证码,语音验证,文字按顺序选择在图片上点击,滑动拼图验证等. 效果图: 代码实现: 1.滑块视图类:SlideImageView.java.实现随机选取拼图位置,对拼图位置进行验证等功能. public class SlideImageView extends View { Bitmap bitmap; Bitmap drawBitmap; Bitmap ver

  • Android开发实现AlertDialog中View的控件设置监听功能分析

    本文实例讲述了Android开发实现AlertDialog中View的控件设置监听功能.分享给大家供大家参考,具体如下: 之前给弹出的AlertDialog中的控件设置监听时,老是报空指针异常,之所以报空指针异常,是因为我findViewById写的有问题,因为我们需要给弹出框中的控件设置监听,直接用findViewById是找不到弹出框中的控件的,需要利用Dialog.findViewById或者利用你找到的弹出框中的View,然后view.findViewById;具体看下面代码 packa

  • Android实现触发html页面的Button控件点击事件方式

    在android开发中,往往有时会加载html界面,同时需要与之html里面的控件进行交互.这里简单介绍一下如何在android中触发加载的html界面的Button控件. 1. 首先看Activity的代码: 首先我们要获取到当前的WebView控件,然后通过html的路径加载html界面,当前的html路径我是在本地的,然后设置 WebSettings webSettings = mWebView.getSettings(); 这一句代码.之后添加 webSettings.setJavaSc

  • Android自定义ViewGroup实现朋友圈九宫格控件

    目录 一.简介 1.1.效果图如下 1.2.主要功能如下 二.使用 2.1.自定义属性如下 2.2.布局中使用自定义NineImageLayout 2.3.Adapter方式绑定数据和UI 2.4.列表里面使用 三.源码地址 四.总结 一.简介 最近项目里有个类似微信朋友圈的九图控件的需求,Github找了一下,发现都不太满足需求,我需要单张图片的时候可以按照图片宽高比列在一定范围内自适应,而大多开源项目单张图片也是一个小正方形,所以,干脆自己动手写一个 1.1.效果图如下 1.2.主要功能如下

  • Android开发自定义双向SeekBar拖动条控件

    目录 目标:双向拖动的自定义View 实现步骤 自定义属性获取 确定自定义view尺寸 绘制相关的内容部分 滑动事件处理 目标:双向拖动的自定义View 国际惯例先预览后实现 我们要实现的就是一个段位样式的拖动条,用来做筛选条件用的,细心的朋友可能会发现微信设置里面有个一个通用字体的设置,拖动然后改变字体大小; 这个相对比微信那个的自定义view算是一个扩展,因为我们是双向滑动,这个多考虑的一点就是手指拖动的是哪一个滑动块! 我们先看下GIF预览,然后我们今天就一步步实现这个小玩意… 实现步骤

  • Android自定义View之自定义评价打分控件RatingBar实现自定义星星大小和间距

    在Android开发中,我们经常会用到对商家或者商品的评价,运用星星进行打分.然而在Android系统中自带的打分控件,RatingBar特别不好用,间距和大小无法改变.所以,我就自定义了一个特别好用的打分控件.在项目中可以直接使用,特别简单.下面直接上图: 效果图 实现原理 其实就是自定义View继承LinearLayout ,然后里面动态加了五个ImageView. 实现代码,有详细的注释 在attrs中声明的可以在xml中设置的变量 <declare-styleable name="

  • Android中CheckBox复选框控件使用方法详解

    CheckBox复选框控件使用方法,具体内容如下 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建LinearLayout布局 2.建立CheckBox的XML的Layout文件 3.通过View.inflate()方法创建CheckBox CheckBox checkBox=(CheckBox) View.inflate(this, R.layout.checkbox, null); 4.通过Linea

  • Android省市区三级联动控件使用方法实例讲解

    最近有需求需要实现省市区三级联动,但是发现之前的实现不够灵活,自己做了一些优化.为了方便以后使用,抽离出来放在了github上WheelView.同时把其核心库放在了JCenter中了,可以直接引用.也可以参考项目中的Demo进行引用 下面介绍一下如何使用 如果用的是AndroidStudio那么直接在build.gradle文件中添加依赖: dependencies { compile 'chuck.WheelItemView:library:1.0.1' } 成功引入库之后,可以在需要弹出省

  • Android开发中自定义ProgressBar控件的方法示例

    本文实例讲述了Android开发中自定义ProgressBar控件的方法.分享给大家供大家参考,具体如下: 很简单,首先加载Drawable,在onMeasure设置好其区域大小, 然后使用canvas.clipRect绘图 public class ProgressView extends ImageView { private Drawable maskDraw; /** * 加载的进度 0-100 */ private int mProcess = 20; public ProgressV

随机推荐