我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

前言

本文面向自定义 view 新手,但是希望你最好有一定的理论知识,或基础概念,有的地方可能会一笔带过并不会细讲,细讲篇幅就太长了。

本文仿写自鸿洋的自定义View (一),尽管过去了将近快 7 年之久,我觉得依然有学习价值。

效果

自定义 View 分类

简单介绍一下自定义 View 分类:

  • 组合控件,继承自已有的 layout ,比如 LinearLayout,然后通过 LayoutInflater 引入布局,然后处理相关事件,这种方式的好处在于,不需要过度关注 view 内部的绘制机制,而且扩展性也很强。
  • 继承自现有的系统控件,修改或扩展某些属性或方法即可,比如 AppCompatTextView
  • 继承自 view 或 viewgroup ,这种相对要复杂一些,因为我们要自己控制绘制流程,但是相对的,也有更大的想象空间。

步骤

先分析一下上图中的效果:

  • 带颜色的矩形背景
  • 居中的文本

比较简单,老手稍微想一下就已经有思路了:

  • 1.自定义属性
  • 2.添加构造方法
  • 3.在构造里获取自定义样式
  • 4.重写 onDraw 计算坐标绘制
  • 5.重写 onMeasure 测量宽高
  • 6.设置点击事件

先分析效果图,然后构思,随后不断的调整优化。

1.自定义属性

这一步也不一定非要写在前面,可能有些人觉得不一定就能事先知道会用到哪些属性,由于例子比较简单,暂且放在前面吧,看个人习惯。

在 res/values/ 下建立一个 attrs.xml 文件 , 在里面定义我们的 属性 和声明我们的整个样式

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="randomText" format="string"/>
    <attr name="randomTextColor" format="color"/>
    <attr name="randomTextSize" format="dimension"/>

    <declare-styleable name="RandomTextView" >
        <attr name="randomText"/>
        <attr name="randomTextColor"/>
        <attr name="randomTextSize"/>
    </declare-styleable>

</resources>

format 是值该属性的取值类型:一共有:string,color,demension,integer,enum,reference,float,boolean,fraction,flag

在 xml 布局中的引用:

 <com.yechaoa.customviews.randomtext.RandomTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        app:randomText="1234"
        app:randomTextColor="@color/colorAccent"
        app:randomTextSize="50sp" />

注意引入 命名空间 :

xmlns:app="http://schemas.android.com/apk/res-auto"

2.添加构造方法

新建一个 RandomTextView 类,继承 View ,并添加3个构造方法

class RandomTextView : View {

    //文本
    private var mRandomText: String

    //文本颜色
    private var mRandomTextColor: Int = 0

    //文本字体大小
    private var mRandomTextSize: Int = 0

    private var paint = Paint()
    private var bounds = Rect()

    //调用两个参数的构造
    constructor(context: Context) : this(context, null)

    //xml默认调用两个参数的构造,再调用三个参数的构造,在三个参数构造里获取自定义属性
    constructor(context: Context, attributeSet: AttributeSet?) : this(context, attributeSet, 0)

    constructor(context: Context, attributeSet: AttributeSet?, defStyle: Int) : super(context, attributeSet, defStyle) {
        ...
    }
    ...
}

这里要注意的是,所有的构造方法,都指向的是第三个构造方法,前两个构造的继承是 this ,而不是 super 。

第一个构造比如我们可以是 new 创建的,第二个是 xml 中默认调用的,我们在第三个构造中去获取自定义属性。

3.在构造里获取自定义样式

  constructor(context: Context, attributeSet: AttributeSet?, defStyle: Int) : super(context, attributeSet, defStyle) {
        //获取自定义属性
        val typedArray = context.theme.obtainStyledAttributes(
            attributeSet,
            R.styleable.RandomTextView,
            defStyle,
            0
        )

        mRandomText = typedArray.getString(R.styleable.RandomTextView_randomText).toString()
        mRandomTextColor = typedArray.getColor(R.styleable.RandomTextView_randomTextColor, Color.BLACK)//默认黑色
        mRandomTextSize = typedArray.getDimensionPixelSize(
            R.styleable.RandomTextView_randomTextSize,
            TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, 16F, resources.displayMetrics ).toInt()
        )

        //获取完回收
        typedArray.recycle()

        paint.textSize = mRandomTextSize.toFloat()

        //返回文本边界,即包含文本的最小矩形,没有所谓“留白”,返回比measureText()更精确的text宽高,数据保存在bounds里
        paint.getTextBounds(mRandomText, 0, mRandomText.length, bounds)
    }

通过 obtainStyledAttributes 获取自定义属性,返回一个 TypedArray ,这里用到了我们在 attrs.xml 文件中声明的样式(R.styleable.RandomTextView),返回的 TypedArray 即包含了这里面的属性。

拿到自定义 view 属性集合,然后赋值,赋值之后就可以用 paint 去画了。

然后用到了 paint 的 getTextBounds 方法:

paint.getTextBounds(mRandomText, 0, mRandomText.length, bounds)

简单理解就是,把文字放在一个矩形里,通过矩形的宽高即可知道文字的宽高,所以宽高会保存在 bounds 里,bounds 是一个矩形 Rect ,为什么要这么做呢,因为后面我们要计算文字居中的时候会用到。

ok,接下来开始画布局。

4.重写 onDraw 计算坐标绘制

 @SuppressLint("DrawAllocation")
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        

        
        paint.color = Color.YELLOW
        //计算坐标,因为原点是在文字的左下角,左边要是延伸出去就还要往左边去,所以是减,右边和下边是正,所以是加
        canvas?.drawRect(
            (0 - paddingLeft).toFloat(),
            (0 - paddingTop).toFloat(),
            (measuredWidth + paddingRight).toFloat(),
            (measuredHeight + paddingBottom).toFloat(),
            paint
        )

        
        paint.color = mRandomTextColor
        //注意这里的坐标xy不是左上角,而是左下角,所以高度是相加的,在自定义view中,坐标轴右下为正
        //getWidth 等于 measuredWidth
        canvas?.drawText(
            mRandomText,
            (width / 2 - bounds.width() / 2).toFloat(),
            (height / 2 + bounds.height() / 2).toFloat(),
            paint
        )
    }

上面的代码就是在 onDraw 里面显示绘制了一个 YELLOW 颜色的矩形背景,然后绘制了一个自定义属性颜色的居中的文本。

这里要注意我们计算位置时的 坐标 ,在自定义 view 中,原点是 view 的 左上角 ,而在数学坐标系中,原点(0,0)是在 中间 的,二者是有区别的。

其次,假如 xml 布局中有 padding ,或者预判会使用到 padding,在重写 onDraw 的时候也要把 padding 的数据加上,否则 padding 是不生效的。如果是继承 ViewGroup 时, 子view 的 padding 放在 onMeasure 中处理。

来看此时的效果:

此时是不是有疑惑,xml 里面的宽高明明是 wrap_content ,为什么会充满父布局呢?

这就涉及到 onMeasure 的知识点了,往下看。

5.重写 onMeasure 测量宽高

我们在 xml 设置 view 宽高有 3 种方式:

  • match_parent
  • wrap_content
  • 具体数据,比如 100dp

onMeasure 中 MeasureSpec 的 mode 也有 3 种模式:

  • EXACTLY:一般是设置了明确的值或者是 MATCH_PARENT
  • AT_MOST:表示子布局限制在一个最大值内,一般为 WARP_CONTENT
  • UNSPECIFIED:表示子布局想要多大就多大,很少使用

由于我们 xml 用的是 wrap_content ,也就是对应 AT_MOST ,所以效果就是会占满父布局中的 可用空间 ,而父布局是填充屏幕,所以我们自定义的 view 也会占满全屏。

而我们实际想要的效果是 view 包裹自己,而不是铺满全屏,所以我们需要在 onMeasure 中进行处理

  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)

        
        val widthMode = MeasureSpec.getMode(widthMeasureSpec)
        val widthSize = MeasureSpec.getSize(widthMeasureSpec)

        val heightMode = MeasureSpec.getMode(heightMeasureSpec)
        val heightSize = MeasureSpec.getSize(heightMeasureSpec)

        var width = 0
        var height = 0

        //如果指定了宽度,或不限制宽度,用可用宽度即可,如果是WARP_CONTENT,则用文本宽度,再加上左右padding
        when (widthMode) {
            MeasureSpec.UNSPECIFIED,
            MeasureSpec.EXACTLY -> {
                width = widthSize + paddingLeft + paddingRight
            }
            MeasureSpec.AT_MOST -> {
                width = bounds.width() + paddingLeft + paddingRight
            }
        }

        //如果指定了高度,或不限制高度,用可用高度即可,如果是WARP_CONTENT,则用文本高度,再加上上下padding
        when (heightMode) {
            MeasureSpec.UNSPECIFIED,
            MeasureSpec.EXACTLY -> {
                height = heightSize + paddingTop + paddingBottom
            }
            MeasureSpec.AT_MOST -> {
                height = bounds.height() + paddingTop + paddingBottom
            }
        }

        //保存测量的宽高
        setMeasuredDimension(width, height)
    }

上面的代码呢,主要做了两件事:

  • 获取 view 宽高的模式
  • 针对不同的模式,对宽高进行重新测量

最后别忘记调用 setMeasuredDimension 保存新测量的宽高,否则没用哦。

此时再看效果就是效果图中的样子了。

6.设置点击事件

ok,到这,view 已经绘制完成了,但是还没有事件,我们在构造中加一个 点击事件

constructor(context: Context, attributeSet: AttributeSet?, defStyle: Int) : super(context, attributeSet, defStyle) {
        ...
        
        this.setOnClickListener {
            mRandomText = randomText()
            //更新
            postInvalidate()
        }
    }

randomText 方法:

 
    private fun randomText(): String {
        val list = mutableListOf<Int>()
        for (index in mRandomText.indices) {
            list.add(Random.nextInt(10))
        }
        val stringBuffer = StringBuffer()
        for (i in list) {
            stringBuffer.append("" + i)
        }
        return stringBuffer.toString()
    }

触发事件之后,文字更新,然后 view 重绘 更新 页面即可。

关于数据获取,也就是变化后的数字,可以写个 onTextChanged 接口,也可以写个开放 方法 获取。

总结

其实看效果的话,还不如 TextView 来的简单,而且 TextView 也可以轻松的实现效果图中的效果。

所以本文的重点并不是实现效果,而是 学习理解 自定义 View 以及其 绘制流程 。

理论看的再多也需要实践才行,不如跟着敲两遍,理解消化一下。

注释 还是非常详细的,甚至有点啰嗦。。

以上就是Android自定义View实现随机数验证码的详细内容,更多关于Android随机数验证码的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

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

对于android开发来说自定义View还是一个比较重要的技能,所以在这里写一篇自定义View入门的文章,也是实现一个相对简单的随机产生验证码的功能: 自定义View主要也就分为几步 1.自定义View的属性 2.在我们的自定义的布局
2022-06-06

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

本篇内容介绍了“Android怎么自定义View实现随机数验证码”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果自定义 View 分类简单
2023-07-02

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

很多的Android入门程序猿来说对于Android自定义View,可能都是比较恐惧的,但是这又是高手进阶的必经之路,所有准备在自定义View上面花一些功夫,多写一些文章。 一、问题描述熟悉web开发中童鞋们都知道为了防止恶意破解、恶意提交
2022-06-06

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

很多的Android入门程序猿来说对于Android自定义View,可能都是比较恐惧的,但是这又是高手进阶的必经之路,所有准备在自定义View上面花一些功夫,多写一些文章。先总结下自定义View的步骤: 1、自定义View的属性 2、在Vi
2022-06-06

Android自定义View实现验证码

本文章是基于鸿洋的Android 自定义View (一) 的一些扩展,以及对Android自定义View构造函数详解里面内容的一些转载。 首先我们定义一个declare-styleable标签declare-styleable标签的作用是给
2022-06-06

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

本篇文章讲的是Android自定义View之随机生成图片验证码,开发中我们会经常需要随机生成图片验证码,但是这个是其次,主要还是想总结一些自定义View的开发过程以及一些需要注意的地方。 按照惯例先看看效果图:一、先总结下自定义View的步
2022-06-06

Android自定义View验证码输入框

本文实例为大家分享了Android自定义View验证码输入框的具体代码,供大家参考,具体内容如下 验证码输入框 1.先看下样式2.直接上代码public class MyVcode extends AppCompatEditText {pr
2022-06-06

Android自定义view制作绚丽的验证码

废话不多说了,先给大家展示下自定义view效果图,如果大家觉得还不错的话,请继续往下阅读。怎么样,这种验证码是不是很常见呢,下面我们就自己动手实现这种效果,自己动手,丰衣足食,哈哈~ 一、 自定义view的步骤 自定义view一直被认为an
2022-06-06

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

在上一篇的文章中介绍了自定义控件的属性,详情见《详解Android自定义控件属性TypedArray以及attrs》。那么在这基础上实现随机验证码生成,里面的代码是自定义控件以及涉及到自定义view绘画。 1、先看实现的效果图看到这个效果图
2022-06-06

LazyCaptcha如何自定义随机验证码和字体

这篇文章将为大家详细讲解有关LazyCaptcha如何自定义随机验证码和字体,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。介绍LazyCaptcha是仿EasyCaptcha和SimpleCaptcha,
2023-06-29

Android自定义View实现随手势滑动控件

本文控件为大家分享了Android随手势滑动控件的具体代码,供大家参考,具体内容如下 1.新建自定义控件类:MyViewpublic class MyView extends Button{ //记录上次滑动后的坐标值 private in
2022-06-06

Android自定义控件实现验证码倒计时

今天给大家带来一个新的控件——验证码倒计时,先看下效果图 1 效果演示2 使用方式
2022-06-06

Android自定义View实现BMI指数条

最近项目需要,需要做一个BMI指数的指示条,先上效果图: BMI指数从18到35,然后上面指示条的颜色会随着偏移量的变化而改变,数字显示当前的BMI指数,下面的BMI标准也是根据不同数值的范围来判断的。考虑到这个view的特殊性,最后采用的
2022-06-06

Android自定义View获取注册验证码倒计时按钮

在Android开发中,我们不可避免的会做到注册功能,而现在的注册大多数都是用手机去注册的,那么注册的时候都会要求用获取验证码的方式去验证,我们接下来就来实战一下自定义获取验证码倒计时按钮:1.先看效果图2.我们涉及到的变量//倒计时时长,
2022-06-06

Android自定义View实现打字机效果

一、先来看看效果演示二、实现原理:这个其实不难实现,通过一个定时器不断调用TextView的setText就行了,在setText的时候播放打字的音效。 具体代码如下:import java.util.Timer; import java.
2022-06-06

Android如何自定View实现滑动验证效果

本篇内容主要讲解“Android如何自定View实现滑动验证效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Android如何自定View实现滑动验证效果”吧!效果图自定义属性代码
2023-06-22

编程热搜

  • Android:VolumeShaper
    VolumeShaper(支持版本改一下,minsdkversion:26,android8.0(api26)进一步学习对声音的编辑,可以让音频的声音有变化的播放 VolumeShaper.Configuration的三个参数 durati
    Android:VolumeShaper
  • Android崩溃异常捕获方法
    开发中最让人头疼的是应用突然爆炸,然后跳回到桌面。而且我们常常不知道这种状况会何时出现,在应用调试阶段还好,还可以通过调试工具的日志查看错误出现在哪里。但平时使用的时候给你闹崩溃,那你就欲哭无泪了。 那么今天主要讲一下如何去捕捉系统出现的U
    Android崩溃异常捕获方法
  • android开发教程之获取power_profile.xml文件的方法(android运行时能耗值)
    系统的设置–>电池–>使用情况中,统计的能耗的使用情况也是以power_profile.xml的value作为基础参数的1、我的手机中power_profile.xml的内容: HTC t328w代码如下:
    android开发教程之获取power_profile.xml文件的方法(android运行时能耗值)
  • Android SQLite数据库基本操作方法
    程序的最主要的功能在于对数据进行操作,通过对数据进行操作来实现某个功能。而数据库就是很重要的一个方面的,Android中内置了小巧轻便,功能却很强的一个数据库–SQLite数据库。那么就来看一下在Android程序中怎么去操作SQLite数
    Android SQLite数据库基本操作方法
  • ubuntu21.04怎么创建桌面快捷图标?ubuntu软件放到桌面的技巧
    工作的时候为了方便直接打开编辑文件,一些常用的软件或者文件我们会放在桌面,但是在ubuntu20.04下直接直接拖拽文件到桌面根本没有效果,在进入桌面后发现软件列表中的软件只能收藏到面板,无法复制到桌面使用,不知道为什么会这样,似乎并不是很
    ubuntu21.04怎么创建桌面快捷图标?ubuntu软件放到桌面的技巧
  • android获取当前手机号示例程序
    代码如下: public String getLocalNumber() { TelephonyManager tManager =
    android获取当前手机号示例程序
  • Android音视频开发(三)TextureView
    简介 TextureView与SurfaceView类似,可用于显示视频或OpenGL场景。 与SurfaceView的区别 SurfaceView不能使用变换和缩放等操作,不能叠加(Overlay)两个SurfaceView。 Textu
    Android音视频开发(三)TextureView
  • android获取屏幕高度和宽度的实现方法
    本文实例讲述了android获取屏幕高度和宽度的实现方法。分享给大家供大家参考。具体分析如下: 我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现。下面就介绍讲一讲如何获取屏幕的物理尺寸 下面的代码即
    android获取屏幕高度和宽度的实现方法
  • Android自定义popupwindow实例代码
    先来看看效果图:一、布局
  • Android第一次实验
    一、实验原理 1.1实验目标 编程实现用户名与密码的存储与调用。 1.2实验要求 设计用户登录界面、登录成功界面、用户注册界面,用户注册时,将其用户名、密码保存到SharedPreference中,登录时输入用户名、密码,读取SharedP
    Android第一次实验

目录