欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-04 14:44:41
对于android开发来说自定义view还是一个比较重要的技能,所以在这里写一篇自定义view入门的文章,也是实现一个相对简单的随机产生验证码的功能: 自定义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”是必须要的,要不找不到自定义的属性。

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

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

接下来我们就是实现绘制一些散点和曲线,修改我们的自定义类的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到这为止就完成了,以后我们用到只要移植就可以了,怎么样,也很简单吧

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

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