Android自定義View實(shí)現(xiàn)隨機(jī)數(shù)驗(yàn)證碼
前言
本文面向自定義 view
新手,但是希望你最好有一定的理論知識(shí),或基礎(chǔ)概念,有的地方可能會(huì)一筆帶過并不會(huì)細(xì)講,細(xì)講篇幅就太長了。
本文仿寫自鴻洋的自定義View (一),盡管過去了將近快 7 年之久,我覺得依然有學(xué)習(xí)價(jià)值。
效果
自定義 View 分類
簡單介紹一下自定義 View
分類:
- 組合控件,繼承自已有的
layout
,比如 LinearLayout,然后通過LayoutInflater
引入布局,然后處理相關(guān)事件,這種方式的好處在于,不需要過度關(guān)注 view 內(nèi)部的繪制機(jī)制,而且擴(kuò)展性也很強(qiáng)。 - 繼承自現(xiàn)有的系統(tǒng)控件,修改或擴(kuò)展某些屬性或方法即可,比如
AppCompatTextView
- 繼承自
view
或viewgroup
,這種相對(duì)要復(fù)雜一些,因?yàn)槲覀円约嚎刂评L制流程,但是相對(duì)的,也有更大的想象空間。
步驟
先分析一下上圖中的效果:
- 帶顏色的矩形背景
- 居中的文本
比較簡單,老手稍微想一下就已經(jīng)有思路了:
- 1.自定義屬性
- 2.添加構(gòu)造方法
- 3.在構(gòu)造里獲取自定義樣式
- 4.重寫
onDraw
計(jì)算坐標(biāo)繪制 - 5.重寫
onMeasure
測(cè)量寬高 - 6.設(shè)置點(diǎn)擊事件
先分析效果圖,然后構(gòu)思,隨后不斷的調(diào)整優(yōu)化。
1.自定義屬性
這一步也不一定非要寫在前面,可能有些人覺得不一定就能事先知道會(huì)用到哪些屬性,由于例子比較簡單,暫且放在前面吧,看個(gè)人習(xí)慣。
在 res/values/
下建立一個(gè) attrs.xml
文件 , 在里面定義我們的 屬性 和聲明我們的整個(gè)樣式
<?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.添加構(gòu)造方法
新建一個(gè) RandomTextView
類,繼承 View
,并添加3個(gè)構(gòu)造方法
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() //調(diào)用兩個(gè)參數(shù)的構(gòu)造 constructor(context: Context) : this(context, null) //xml默認(rèn)調(diào)用兩個(gè)參數(shù)的構(gòu)造,再調(diào)用三個(gè)參數(shù)的構(gòu)造,在三個(gè)參數(shù)構(gòu)造里獲取自定義屬性 constructor(context: Context, attributeSet: AttributeSet?) : this(context, attributeSet, 0) constructor(context: Context, attributeSet: AttributeSet?, defStyle: Int) : super(context, attributeSet, defStyle) { ... } ... }
這里要注意的是,所有的構(gòu)造方法,都指向的是第三個(gè)構(gòu)造方法,前兩個(gè)構(gòu)造的繼承是 this
,而不是 super
。
第一個(gè)構(gòu)造比如我們可以是 new 創(chuàng)建的,第二個(gè)是 xml 中默認(rèn)調(diào)用的,我們?cè)诘谌齻€(gè)構(gòu)造中去獲取自定義屬性。
3.在構(gòu)造里獲取自定義樣式
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)//默認(rèn)黑色 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寬高,數(shù)據(jù)保存在bounds里 paint.getTextBounds(mRandomText, 0, mRandomText.length, bounds) }
通過 obtainStyledAttributes
獲取自定義屬性,返回一個(gè) TypedArray
,這里用到了我們?cè)?nbsp;attrs.xml
文件中聲明的樣式(R.styleable.RandomTextView),返回的 TypedArray 即包含了這里面的屬性。
拿到自定義 view 屬性集合,然后賦值,賦值之后就可以用 paint
去畫了。
然后用到了 paint 的 getTextBounds
方法:
paint.getTextBounds(mRandomText, 0, mRandomText.length, bounds)
簡單理解就是,把文字放在一個(gè)矩形里,通過矩形的寬高即可知道文字的寬高,所以寬高會(huì)保存在 bounds
里,bounds 是一個(gè)矩形 Rect
,為什么要這么做呢,因?yàn)楹竺嫖覀円?jì)算文字居中的時(shí)候會(huì)用到。
ok,接下來開始畫布局。
4.重寫 onDraw 計(jì)算坐標(biāo)繪制
@SuppressLint("DrawAllocation") override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) /** * 自定義View時(shí),需要我們自己在onDraw中處理padding,否則是不生效的 * 自定義ViewGroup時(shí),子view的padding放在onMeasure中處理 */ /** * 矩形背景 */ paint.color = Color.YELLOW //計(jì)算坐標(biāo),因?yàn)樵c(diǎn)是在文字的左下角,左邊要是延伸出去就還要往左邊去,所以是減,右邊和下邊是正,所以是加 canvas?.drawRect( (0 - paddingLeft).toFloat(), (0 - paddingTop).toFloat(), (measuredWidth + paddingRight).toFloat(), (measuredHeight + paddingBottom).toFloat(), paint ) /** * 文本 */ paint.color = mRandomTextColor //注意這里的坐標(biāo)xy不是左上角,而是左下角,所以高度是相加的,在自定義view中,坐標(biāo)軸右下為正 //getWidth 等于 measuredWidth canvas?.drawText( mRandomText, (width / 2 - bounds.width() / 2).toFloat(), (height / 2 + bounds.height() / 2).toFloat(), paint ) }
上面的代碼就是在 onDraw
里面顯示繪制了一個(gè) YELLOW 顏色的矩形背景,然后繪制了一個(gè)自定義屬性顏色的居中的文本。
這里要注意我們計(jì)算位置時(shí)的 坐標(biāo) ,在自定義 view 中,原點(diǎn)是 view 的 左上角 ,而在數(shù)學(xué)坐標(biāo)系中,原點(diǎn)(0,0)是在 中間 的,二者是有區(qū)別的。
其次,假如 xml 布局中有 padding
,或者預(yù)判會(huì)使用到 padding,在重寫 onDraw
的時(shí)候也要把 padding 的數(shù)據(jù)加上,否則 padding 是不生效的。如果是繼承 ViewGroup
時(shí), 子view
的 padding 放在 onMeasure
中處理。
來看此時(shí)的效果:
此時(shí)是不是有疑惑,xml 里面的寬高明明是 wrap_content
,為什么會(huì)充滿父布局呢?
這就涉及到 onMeasure
的知識(shí)點(diǎn)了,往下看。
5.重寫 onMeasure 測(cè)量寬高
我們?cè)?xml 設(shè)置 view
寬高有 3 種方式:
- match_parent
- wrap_content
- 具體數(shù)據(jù),比如 100dp
onMeasure
中 MeasureSpec
的 mode
也有 3 種模式:
- EXACTLY:一般是設(shè)置了明確的值或者是 MATCH_PARENT
- AT_MOST:表示子布局限制在一個(gè)最大值內(nèi),一般為 WARP_CONTENT
- UNSPECIFIED:表示子布局想要多大就多大,很少使用
由于我們 xml 用的是 wrap_content
,也就是對(duì)應(yīng) AT_MOST
,所以效果就是會(huì)占滿父布局中的 可用空間
,而父布局是填充屏幕,所以我們自定義的 view 也會(huì)占滿全屏。
而我們實(shí)際想要的效果是 view 包裹自己,而不是鋪滿全屏,所以我們需要在 onMeasure
中進(jìn)行處理
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, heightMeasureSpec) /** * EXACTLY:一般是設(shè)置了明確的值或者是MATCH_PARENT * AT_MOST:表示子布局限制在一個(gè)最大值內(nèi),一般為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 } } //保存測(cè)量的寬高 setMeasuredDimension(width, height) }
上面的代碼呢,主要做了兩件事:
- 獲取 view 寬高的模式
- 針對(duì)不同的模式,對(duì)寬高進(jìn)行重新測(cè)量
最后別忘記調(diào)用 setMeasuredDimension
保存新測(cè)量的寬高,否則沒用哦。
此時(shí)再看效果就是效果圖中的樣子了。
6.設(shè)置點(diǎn)擊事件
ok,到這,view 已經(jīng)繪制完成了,但是還沒有事件,我們?cè)跇?gòu)造中加一個(gè) 點(diǎn)擊事件
constructor(context: Context, attributeSet: AttributeSet?, defStyle: Int) : super(context, attributeSet, defStyle) { ... /** * 添加點(diǎn)擊事件 */ this.setOnClickListener { mRandomText = randomText() //更新 postInvalidate() } }
randomText
方法:
/** * 根據(jù)文本長度 隨意數(shù)字 */ 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() }
觸發(fā)事件之后,文字更新,然后 view 重繪 更新
頁面即可。
關(guān)于數(shù)據(jù)獲取,也就是變化后的數(shù)字,可以寫個(gè) onTextChanged
接口,也可以寫個(gè)開放 方法
獲取。
總結(jié)
其實(shí)看效果的話,還不如 TextView
來的簡單,而且 TextView 也可以輕松的實(shí)現(xiàn)效果圖中的效果。
所以本文的重點(diǎn)并不是實(shí)現(xiàn)效果,而是 學(xué)習(xí)理解 自定義 View 以及其 繪制流程 。
理論看的再多也需要實(shí)踐才行,不如跟著敲兩遍,理解消化一下。
注釋 還是非常詳細(xì)的,甚至有點(diǎn)啰嗦。。
以上就是Android自定義View實(shí)現(xiàn)隨機(jī)數(shù)驗(yàn)證碼的詳細(xì)內(nèi)容,更多關(guān)于Android隨機(jī)數(shù)驗(yàn)證碼的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- Android實(shí)現(xiàn)圓圈倒計(jì)時(shí)
- Android實(shí)現(xiàn)倒計(jì)時(shí)的方案梳理
- Android?使用flow實(shí)現(xiàn)倒計(jì)時(shí)的方式
- Android實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)自定義控件
- Android自定義驗(yàn)證碼輸入框的方法實(shí)例
- Android實(shí)現(xiàn)短信驗(yàn)證碼輸入框
- Android滑動(dòng)拼圖驗(yàn)證碼控件使用方法詳解
- Android實(shí)現(xiàn)隨機(jī)生成驗(yàn)證碼
- OpenHarmony實(shí)現(xiàn)類Android短信驗(yàn)證碼及倒計(jì)時(shí)流程詳解
相關(guān)文章
Android實(shí)現(xiàn)app應(yīng)用多語言切換功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)app應(yīng)用多語言切換功能的相關(guān)資料,類似于微信的語言切換,感興趣的小伙伴們可以參考一下2016-08-08Android自定義View實(shí)現(xiàn)簡單的圓形Progress效果
這篇文章主要介紹了Android自定義View實(shí)現(xiàn)簡單的圓形Progress效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09Android?Banner本地和網(wǎng)絡(luò)輪播圖使用介紹
大家好,本篇文章講的是Android?Banner本地和網(wǎng)絡(luò)輪播圖使用介紹,感興趣的同學(xué)趕快來看一看吧,希望本篇文章對(duì)你起到幫助2021-11-11rxjava+retrofit實(shí)現(xiàn)多圖上傳實(shí)例代碼
本篇文章主要介紹了rxjava+retrofit實(shí)現(xiàn)多圖上傳實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06Android Studio實(shí)現(xiàn)簡易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Android Studio實(shí)現(xiàn)簡易計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07Android中數(shù)據(jù)庫常見操作實(shí)例分析
這篇文章主要介紹了Android中數(shù)據(jù)庫常見操作,以完整實(shí)例形式較為詳細(xì)的分析了Android基于數(shù)據(jù)庫類進(jìn)行數(shù)據(jù)庫的增刪改查等操作技巧,需要的朋友可以參考下2015-10-10Android 進(jìn)入設(shè)備后臺(tái)data文件夾的辦法
Android 進(jìn)入設(shè)備后臺(tái)data文件夾的辦法,需要的朋友可以參考一下2013-05-05Android小程序?qū)崿F(xiàn)選項(xiàng)菜單
這篇文章主要為大家詳細(xì)介紹了Android小程序?qū)崿F(xiàn)選項(xiàng)菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05