文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-07-02 14:44

关注

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

效果

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

自定义 View 分类

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

步骤

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

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

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

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 中处理。

来看此时的效果:

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

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

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

5.重写 onMeasure 测量宽高

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

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

由于我们 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)    }

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

最后别忘记调用 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 接口,也可以写个开放 方法 获取。

“Android怎么自定义View实现随机数验证码”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯