Android 自定义View之随机数验证码(仿写鸿洋)

简介: Android 自定义View之随机数验证码(仿写鸿洋)

前言

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


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


效果

image.png


自定义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)
        /**
         * 自定义View时,需要我们自己在onDraw中处理padding,否则是不生效的
         * 自定义ViewGroup时,子view的padding放在onMeasure中处理
         */
        /**
         * 矩形背景
         */
        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中处理。


来看此时的效果:

image.png



此时是不是有疑惑,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)
        /**
         * EXACTLY:一般是设置了明确的值或者是MATCH_PARENT
         * AT_MOST:表示子布局限制在一个最大值内,一般为WARP_CONTENT
         * UNSPECIFIED:表示子布局想要多大就多大,很少使用
         */
        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以及其绘制流程。


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


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


如果对你有一点帮助,点个赞呗 ^ _ ^


Github

https://github.com/yechaoa/CustomViews

目录
相关文章
|
1月前
|
缓存 前端开发 Android开发
安卓开发中的自定义视图:从零到英雄
【10月更文挑战第42天】 在安卓的世界里,自定义视图是一块画布,让开发者能够绘制出独一无二的界面体验。本文将带你走进自定义视图的大门,通过深入浅出的方式,让你从零基础到能够独立设计并实现复杂的自定义组件。我们将探索自定义视图的核心概念、实现步骤,以及如何优化你的视图以提高性能和兼容性。准备好了吗?让我们开始这段创造性的旅程吧!
26 1
|
1月前
|
XML 前端开发 Android开发
Android:UI:Drawable:View/ImageView与Drawable
通过本文的介绍,我们详细探讨了Android中Drawable、View和ImageView的使用方法及其相互关系。Drawable作为图像和图形的抽象表示,提供了丰富的子类和自定义能力,使得开发者能够灵活地实现各种UI效果。View和ImageView则通过使用Drawable实现了各种图像和图形的显示需求。希望本文能为您在Android开发中使用Drawable提供有价值的参考和指导。
40 2
|
1月前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中,自定义视图是那抹不可或缺的亮色,它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图,并展示如何通过代码实现这一过程。我们将从基础出发,逐步引导你理解自定义视图的核心概念,然后通过一个实际的代码示例,详细讲解如何将理论应用于实践,最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能,还是仅仅出于对安卓开发的兴趣,这篇文章都将为你提供价值。
|
1月前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域,自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View,以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理,进而探索内存和布局优化技巧,最终实现既美观又高效的安卓界面。
39 5
|
2月前
|
缓存 数据处理 Android开发
在 Android 中使用 RxJava 更新 View
【10月更文挑战第20天】使用 RxJava 来更新 View 可以提供更优雅、更高效的解决方案。通过合理地运用操作符和订阅机制,我们能够轻松地处理异步数据并在主线程中进行 View 的更新。在实际应用中,需要根据具体情况进行灵活运用,并注意相关的注意事项和性能优化,以确保应用的稳定性和流畅性。可以通过不断的实践和探索,进一步掌握在 Android 中使用 RxJava 更新 View 的技巧和方法,为开发高质量的 Android 应用提供有力支持。
|
2月前
|
缓存 调度 Android开发
Android 在子线程更新 View
【10月更文挑战第21天】在 Android 开发中,虽然不能直接在子线程更新 View,但通过使用 Handler、AsyncTask 或 RxJava 等方法,可以实现子线程操作并在主线程更新 View 的目的。在实际应用中,需要根据具体情况选择合适的方法,并注意相关的注意事项和性能优化,以确保应用的稳定性和流畅性。可以通过不断的实践和探索,进一步掌握在子线程更新 View 的技巧和方法,为开发高质量的 Android 应用提供支持。
41 2
|
2月前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
|
2月前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
29 2
|
2月前
|
XML 前端开发 Android开发
Android View的绘制流程和原理详细解说
Android View的绘制流程和原理详细解说
50 3
|
4月前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
View的绘制和事件处理是两个重要的主题,上一篇《图解 Android事件分发机制》已经把事件的分发机制讲得比较详细了,这一篇是针对View的绘制,View的绘制如果你有所了解,基本分为measure、layout、draw 过程,其中比较难理解就是measure过程,所以本篇文章大幅笔地分析measure过程,相对讲得比较详细,文章也比较长,如果你对View的绘制还不是很懂,对measure过程掌握得不是很深刻,那么耐心点,看完这篇文章,相信你会有所收获的。
128 3