Android自定义View实现随机验证码

对于android开发来说自定义View还是一个比较重要的技能,所以在这里写一篇自定义View入门的文章,也是实现一个相对简单的随机产生验证码的功能:
自定义View主要也就分为几步
 1.自定义View的属性
 2.在我们的自定义的布局中获取自定义属性
 3.重写onMesure方法
 4.重写onDraw方法
好现在我们就一步一步的来,首先创建我们的View属性
在valuse目录下创建一个attrs.xml的文件,然后:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <attr name="textColor" format="color"/>
 <attr name="textContent" format="string"/>
 <attr name="textSize" format="dimension"/>

 <declare-styleable name="VerificationCodeView">
 <attr name="textContent" />
 <attr name="textColor" />
 <attr name="textSize" />
 </declare-styleable>
</resources>

我们总共定义了三个属性,一个是颜色,内容,大小

然后我们去建立我们的自定义类

public class VerificationCodeView extends View {
 /**
 * 文本
 */
 private String mTitleText;
 /**
 * 文本的颜色
 */
 private int mTextColor;
 /**
 * 文本的大小
 */
 private int mTextSize;

 /**
 * 绘制时控制文本绘制的范围
 */
 private Rect mBound;
 /**
 * 初始化画笔
 */
 private Paint mTextPaint;
 private Paint mPointPaint;
 private Paint mPathPaint;
 /**
 * 干扰点坐标的集合
 */
 private ArrayList<PointF> mPoints = new ArrayList<PointF>();
 /**
 * 绘制贝塞尔曲线的路径集合
 */
 private ArrayList<Path> mPaths = new ArrayList<Path>();

 public VerificationCodeView(Context context) {
 this(context, null);
 }

 public VerificationCodeView(Context context, AttributeSet attributeSet) {
 this(context, attributeSet, 0);
 }

 public VerificationCodeView(Context context, AttributeSet attributeSet, int defStyle) {
 super(context, attributeSet, defStyle);
 TypedArray typedArray = context.getTheme().obtainStyledAttributes(attributeSet, R.styleable.VerificationCodeView, defStyle, 0);
 int size = typedArray.getIndexCount();
 for (int i = 0; i < size; i++) {
  int content = typedArray.getIndex(i);
  switch (content) {
  case R.styleable.VerificationCodeView_textContent:
   mTitleText = typedArray.getString(content);
   break;
  case R.styleable.VerificationCodeView_textColor:
   mTextColor = typedArray.getColor(content, Color.BLACK);
   break;
  case R.styleable.VerificationCodeView_textSize:
   // 默认设置为16sp,TypeValue也可以把sp转化为px
   mTextSize = typedArray.getDimensionPixelSize(content, (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
   break;
  }
 }
 typedArray.recycle();
 //设置点击事件变换数字
 this.setOnClickListener(new OnClickListener() {
  @Override
  public void onClick(View v) {
  mTitleText = randomText();
  postInvalidate();
  }
 });
 }

 /**
 * EXACTLY:一般是设置了明确的值或者是MATCH_PARENT
 * AT_MOST:表示子布局限制在一个最大值内,一般为WARP_CONTENT
 * UNSPECIFIED:表示子布局想要多大就多大,很少使用
 *
 * @param widthMeasureSpec
 * @param heightMeasureSpec
 */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 int widthMode = MeasureSpec.getMode(widthMeasureSpec);
 int widthSize = MeasureSpec.getSize(widthMeasureSpec);
 int heightMode = MeasureSpec.getMode(heightMeasureSpec);
 int heightSize = MeasureSpec.getSize(heightMeasureSpec);
 //用来设置要画的布局的大小
 if (widthMode != MeasureSpec.EXACTLY) {
  widthSize = (int) (getPaddingLeft() + mBound.width() + getPaddingRight());
 }

 if (heightMode != MeasureSpec.EXACTLY) {
  heightSize = (int) (getPaddingTop() + mBound.height() + getPaddingBottom());
 }

 setMeasuredDimension(widthSize, heightSize);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 //生成随机的背景颜色
 mTextPaint.setColor(Color.YELLOW);
 canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mTextPaint);
 //生成随机的文字颜色
 mTextPaint.setColor(mTextColor);
 //将文字画在布局的中间
 canvas.drawText(mTitleText, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mTextPaint);
 }
 /**
 * 生成随机的四位数字验证码
 *
 * @return
 */
 private String randomText() {
 Random random = new Random();
 Set<Integer> set = new HashSet<Integer>();
 while (set.size() < 4) {
  int randomInt = random.nextInt(10);
  set.add(randomInt);
 }
 StringBuffer sb = new StringBuffer();
 for (Integer i : set) {
  sb.append("" + i);
 }

 return sb.toString();
 }
}

以上代码就是自定义的类,继承了View他有三个构造方法,我们要获取它的属性,所以一定要走第三个,但是默认是第二个,所以我们要在每一个里面调用第三个,以确保做了初始化工作 注意调用的时候用的是this的构造方法,而不是super
当我们的这个类出来之后,后面的就很简单了

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:verification="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:gravity="center"
 >

 <com.example.aotuman.verification.view.VerificationCodeView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:paddingTop="10dp"
 android:paddingBottom="10dp"
 android:paddingLeft="10dp"
 android:paddingRight="10dp"
 verification:textContent="3712"
 verification:textColor="#ff0000"
 verification:textSize="40sp" />
</RelativeLayout>

在布局里面应用它就可以了, xmlns:verification=”http://schemas.android.com/apk/res-auto”是必须要的,要不找不到自定义的属性。

好了到这为止就实现了最简单的

接下来我们就是实现绘制一些散点和曲线,修改我们的自定义类的onDraw()方法

@Override
 protected void onDraw(Canvas canvas) {
 initData();
 Random mRandom = new Random();
 //生成随机的背景颜色
 mTextPaint.setARGB(255, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20);
 canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mTextPaint);
 //生成随机的文字颜色
 mTextPaint.setARGB(255, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20);
 //将文字画在布局的中间
 canvas.drawText(mTitleText, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mTextPaint);

 // 产生干扰效果1 -- 干扰点
 for (PointF pointF : mPoints) {
  mPointPaint.setARGB(255, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20);
  canvas.drawPoint(pointF.x, pointF.y, mPointPaint);
 }
 // 产生干扰效果2 -- 干扰线
 for (Path path : mPaths) {
  mPathPaint.setARGB(255, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20);
  canvas.drawPath(path, mPathPaint);
 }

 private void initData() {
 Random mRandom = new Random();
 // 获取控件的宽和高,此时已经测量完成
 int mHeight = getHeight();
 int mWidth = getWidth();
 mPoints.clear();
 // 生成干扰点坐标
 for (int i = 0; i < 150; i++) {
  PointF pointF = new PointF(mRandom.nextInt(mWidth) + 10, mRandom.nextInt(mHeight) + 10);
  mPoints.add(pointF);
 }
 mPaths.clear();
 // 生成干扰线坐标
 for (int i = 0; i < 2; i++) {
  Path path = new Path();
  int startX = mRandom.nextInt(mWidth / 3) + 10;
  int startY = mRandom.nextInt(mHeight / 3) + 10;
  int endX = mRandom.nextInt(mWidth / 2) + mWidth / 2 - 10;
  int endY = mRandom.nextInt(mHeight / 2) + mHeight / 2 - 10;
  path.moveTo(startX, startY);
  path.quadTo(Math.abs(endX - startX) / 2, Math.abs(endY - startY) / 2, endX, endY);
  mPaths.add(path);
 }
 }

 private void init() {
 // 初始化文字画笔
 /**
  * 获得绘制文本的宽和高
  */
 mTextPaint = new Paint();
 mTextPaint.setTextSize(mTextSize);

 mBound = new Rect();
 //获取到的存在mBound里面
 mTextPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
 // 初始化干扰点画笔
 mPointPaint = new Paint();
 mPointPaint.setStrokeWidth(6);
 mPointPaint.setStrokeCap(Paint.Cap.ROUND); // 设置断点处为圆形
 // 初始化干扰线画笔
 mPathPaint = new Paint();
 mPathPaint.setStrokeWidth(5);
 mPathPaint.setColor(Color.GRAY);
 mPathPaint.setStyle(Paint.Style.STROKE); // 设置画笔为空心
 mPathPaint.setStrokeCap(Paint.Cap.ROUND); // 设置断点处为圆形
 }

init()方法请自行加在构造方法里面
OK到这为止就完成了,以后我们用到只要移植就可以了,怎么样,也很简单吧

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android 获取随机验证码功能示例

    验证码功能在各大网站都能用到,下面小编通过实例代码给大家分享Android 获取随机验证码功能,具体代码如下所示: package cn.hk.image; import java.awt.BasicStroke; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.IOException; impo

  • Android随机生成验证码

    Android随机生成验证码,Android利用随机数绘制不规则的验证码,加强用户登录或者注册的安全性. 具体思路如下: 在一块固定宽高的画布上,画上固定个数的随机数字和字母,再画上固定条数的干扰线 随机数和干扰线的颜色随机生成,随机数的样式随机生成. 界面效果如下: 1.生成随机数代码,Code.java: public class Code { //随机数数组 private static final char[] CHARS = { '2', '3', '4', '5', '6', '7'

  • android随机生成圆形云标签效果

    这个适合用于选择 用户的一些兴趣标签,个性名片等. package com.dyl.cloudtags; import java.util.ArrayList; import java.util.Arrays; import java.util.Random; import android.app.Activity; import android.content.SharedPreferences; import android.os.Bundle; import android.view.Vi

  • Android自定义wheelview随机选号效果

    先看下利用wheelview实现滚动随机选择号码效果: 直接上代码 首页就是dialog显示不在描述 主要看dialog代码 package com.yskj.jh.wheeldemo; import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android

  • Android自定义控件深入学习 Android生成随机验证码

    在上一篇的文章中介绍了自定义控件的属性,详情见<详解Android自定义控件属性TypedArray以及attrs>.那么在这基础上实现随机验证码生成,里面的代码是自定义控件以及涉及到自定义view绘画. 1.先看实现的效果图 看到这个效果图是不是感觉还可以.那么就看看源码吧. 2.attr文件 <?xml version="1.0" encoding="utf-8"?> <resources> <attr name=&qu

  • android端实现验证码随机生成功能

    本文实例为大家分享了android端生成随机验证码的具体代码,供大家参考,具体内容如下 package com.nobeg.util; import java.util.Random; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Bitmap.

  • Android自定义View编写随机验证码

    很多的Android入门程序猿来说对于Android自定义View,可能都是比较恐惧的,但是这又是高手进阶的必经之路,所有准备在自定义View上面花一些功夫,多写一些文章.先总结下自定义View的步骤: 1.自定义View的属性 2.在View的构造方法中获得我们自定义的属性 [ 3.重写onMesure ] 4.重写onDraw 我把3用[]标出了,所以说3不一定是必须的,当然了大部分情况下还是需要重写的. 1.自定义View的属性,首先在res/values/  下建立一个attrs.xml

  • Android自定义View绘制随机生成图片验证码

    本篇文章讲的是Android自定义View之随机生成图片验证码,开发中我们会经常需要随机生成图片验证码,但是这个是其次,主要还是想总结一些自定义View的开发过程以及一些需要注意的地方. 按照惯例先看看效果图: 一.先总结下自定义View的步骤: 1.自定义View的属性 2.在View的构造方法中获得我们自定义的属性 3.重写onMesure 4.重写onDraw 其中onMesure方法不一定要重写,但大部分情况下还是需要重写的 二.View 的几个构造函数 1.public CustomV

  • Android自定义View绘制四位数随机码

    现在有这样一个需求,实现显示随机随机数可能在代码中直接很简单的就实现了,但是现在我们直接自定义View来实现这个效果,那么我们来分析一波吧,我们允许开发者自己设置这个textview的大小,颜色,和初始四位随机数的文字,那么我们需要提供自定义属性,好吧,首先把自定义属性的简单使用介绍一下吧: 首先在res/values文件夹下建利attrs.xml文件,由于这次我们功能决定我们要提供三个自定义属性,分别是textTitle String类型的,textColor是color类型的,textSiz

  • Android通过自定义View实现随机验证码

    很多的Android入门程序猿来说对于Android自定义View,可能都是比较恐惧的,但是这又是高手进阶的必经之路,所有准备在自定义View上面花一些功夫,多写一些文章. 一.问题描述 熟悉web开发中童鞋们都知道为了防止恶意破解.恶意提交.刷票等我们在提交表单数据时,都会使用随机验证码功能.在Android应用中我们同样需要这一功能,该如何实现呢,下面我们就自定义一个随机验证码View控件实现这一需求,并且具备通用性,需要的时候在界面中直接加入这个View组件即可. 二.案例介绍 案例运行效

随机推荐