Android自定義View實(shí)現(xiàn)隨機(jī)驗(yàn)證碼
對(duì)于android開發(fā)來說自定義View還是一個(gè)比較重要的技能,所以在這里寫一篇自定義View入門的文章,也是實(shí)現(xiàn)一個(gè)相對(duì)簡(jiǎn)單的隨機(jī)產(chǎn)生驗(yàn)證碼的功能:
自定義View主要也就分為幾步
1.自定義View的屬性
2.在我們的自定義的布局中獲取自定義屬性
3.重寫onMesure方法
4.重寫onDraw方法
好現(xiàn)在我們就一步一步的來,首先創(chuàng)建我們的View屬性
在valuse目錄下創(chuàng)建一個(gè)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>
我們總共定義了三個(gè)屬性,一個(gè)是顏色,內(nèi)容,大小
然后我們?nèi)ソ⑽覀兊淖远x類
public class VerificationCodeView extends View {
/**
* 文本
*/
private String mTitleText;
/**
* 文本的顏色
*/
private int mTextColor;
/**
* 文本的大小
*/
private int mTextSize;
/**
* 繪制時(shí)控制文本繪制的范圍
*/
private Rect mBound;
/**
* 初始化畫筆
*/
private Paint mTextPaint;
private Paint mPointPaint;
private Paint mPathPaint;
/**
* 干擾點(diǎn)坐標(biāo)的集合
*/
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:
// 默認(rèn)設(shè)置為16sp,TypeValue也可以把sp轉(zhuǎn)化為px
mTextSize = typedArray.getDimensionPixelSize(content, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
break;
}
}
typedArray.recycle();
//設(shè)置點(diǎn)擊事件變換數(shù)字
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mTitleText = randomText();
postInvalidate();
}
});
}
/**
* EXACTLY:一般是設(shè)置了明確的值或者是MATCH_PARENT
* AT_MOST:表示子布局限制在一個(gè)最大值內(nèi),一般為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);
//用來設(shè)置要畫的布局的大小
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) {
//生成隨機(jī)的背景顏色
mTextPaint.setColor(Color.YELLOW);
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mTextPaint);
//生成隨機(jī)的文字顏色
mTextPaint.setColor(mTextColor);
//將文字畫在布局的中間
canvas.drawText(mTitleText, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mTextPaint);
}
/**
* 生成隨機(jī)的四位數(shù)字驗(yàn)證碼
*
* @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他有三個(gè)構(gòu)造方法,我們要獲取它的屬性,所以一定要走第三個(gè),但是默認(rèn)是第二個(gè),所以我們要在每一個(gè)里面調(diào)用第三個(gè),以確保做了初始化工作 注意調(diào)用的時(shí)候用的是this的構(gòu)造方法,而不是super
當(dāng)我們的這個(gè)類出來之后,后面的就很簡(jiǎn)單了
<?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>
在布局里面應(yīng)用它就可以了, xmlns:verification=”http://schemas.android.com/apk/res-auto”是必須要的,要不找不到自定義的屬性。
好了到這為止就實(shí)現(xiàn)了最簡(jiǎn)單的

接下來我們就是實(shí)現(xiàn)繪制一些散點(diǎn)和曲線,修改我們的自定義類的onDraw()方法
@Override
protected void onDraw(Canvas canvas) {
initData();
Random mRandom = new Random();
//生成隨機(jī)的背景顏色
mTextPaint.setARGB(255, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20, mRandom.nextInt(200) + 20);
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mTextPaint);
//生成隨機(jī)的文字顏色
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);
// 產(chǎn)生干擾效果1 -- 干擾點(diǎn)
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);
}
// 產(chǎn)生干擾效果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();
// 獲取控件的寬和高,此時(shí)已經(jīng)測(cè)量完成
int mHeight = getHeight();
int mWidth = getWidth();
mPoints.clear();
// 生成干擾點(diǎn)坐標(biāo)
for (int i = 0; i < 150; i++) {
PointF pointF = new PointF(mRandom.nextInt(mWidth) + 10, mRandom.nextInt(mHeight) + 10);
mPoints.add(pointF);
}
mPaths.clear();
// 生成干擾線坐標(biāo)
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);
// 初始化干擾點(diǎn)畫筆
mPointPaint = new Paint();
mPointPaint.setStrokeWidth(6);
mPointPaint.setStrokeCap(Paint.Cap.ROUND); // 設(shè)置斷點(diǎn)處為圓形
// 初始化干擾線畫筆
mPathPaint = new Paint();
mPathPaint.setStrokeWidth(5);
mPathPaint.setColor(Color.GRAY);
mPathPaint.setStyle(Paint.Style.STROKE); // 設(shè)置畫筆為空心
mPathPaint.setStrokeCap(Paint.Cap.ROUND); // 設(shè)置斷點(diǎn)處為圓形
}
init()方法請(qǐng)自行加在構(gòu)造方法里面
OK到這為止就完成了,以后我們用到只要移植就可以了,怎么樣,也很簡(jiǎn)單吧

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android自定義view制作絢麗的驗(yàn)證碼
- Android自定義控件通用驗(yàn)證碼輸入框的實(shí)現(xiàn)
- Android自定義控件深入學(xué)習(xí) Android生成隨機(jī)驗(yàn)證碼
- Android自定義View獲取注冊(cè)驗(yàn)證碼倒計(jì)時(shí)按鈕
- Android自定義Chronometer實(shí)現(xiàn)短信驗(yàn)證碼秒表倒計(jì)時(shí)功能
- Android自定義方框EditText注冊(cè)驗(yàn)證碼
- Android自定義View實(shí)現(xiàn)驗(yàn)證碼
- Android自定義控件實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)
- Android自定義View繪制隨機(jī)生成圖片驗(yàn)證碼
- Android View教程之自定義驗(yàn)證碼輸入框效果
相關(guān)文章
android中關(guān)于call撥號(hào)功能的實(shí)現(xiàn)方法
這篇文章主要介紹了android中關(guān)于call撥號(hào)功能實(shí)現(xiàn)的記錄,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Android開發(fā)實(shí)現(xiàn)ListView和adapter配合顯示圖片和文字列表功能示例
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)ListView和adapter配合顯示圖片和文字列表功能,涉及Android使用ListView結(jié)合adapter適配器實(shí)現(xiàn)圖文顯示功能相關(guān)的布局、解析、權(quán)限控制等操作技巧,需要的朋友可以參考下2019-04-04
札記:android手勢(shì)識(shí)別功能實(shí)現(xiàn)(利用MotionEvent)
現(xiàn)在手勢(shì)識(shí)別的應(yīng)用已經(jīng)很廣泛了。本篇文章主要介紹了android手勢(shì)識(shí)別功能實(shí)現(xiàn),具有一定的參考價(jià)值,有興趣的可以了解一下。2016-11-11
Flutter?彈性布局基石flex算法flexible示例詳解
這篇文章主要為大家介紹了Flutter?彈性布局基石flex算法flexible示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
Android獲取手機(jī)位置的實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Android獲取手機(jī)位置的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11
Android 自定義AlertDialog對(duì)話框樣式
實(shí)際的項(xiàng)目開發(fā)當(dāng)中,經(jīng)常需要根據(jù)實(shí)際的需求來自定義AlertDialog。最近在開發(fā)一個(gè)WIFI連接的功能,點(diǎn)擊WIFI需要彈出自定義密碼輸入框,具體代碼大家參考下本文2017-09-09
Android實(shí)現(xiàn)為L(zhǎng)istView同時(shí)設(shè)置點(diǎn)擊時(shí)的背景和點(diǎn)擊松手之后的背景
這篇文章主要介紹了Android實(shí)現(xiàn)為L(zhǎng)istView同時(shí)設(shè)置點(diǎn)擊時(shí)的背景和點(diǎn)擊松手之后的背景,以實(shí)例形式較為詳細(xì)的分析了界面元素與功能的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
Android 三級(jí)NestedScroll嵌套滾動(dòng)實(shí)踐
這篇文章主要介紹了Android 三級(jí)NestedScroll嵌套滾動(dòng)實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02

