Android自定義控件實現(xiàn)通用驗證碼輸入框（二）
更新時間：2021年01月28日 14:01:45 作者：bravetou
這篇文章主要為大家詳細介紹了Android自定義控件實現(xiàn)通用驗證碼輸入框的第二篇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Android實現(xiàn)通用驗證碼輸入框第2篇具體實現(xiàn)代碼，供大家參考，具體內(nèi)容如下
效果圖
話不多說，我們還是先上效果圖，可以先先看看是不是自己想要的
閑聊
這種驗證碼輸入框使用組合控件就比較煩人了，所以這邊直接使用自定View步奏實現(xiàn)
源碼
自定義輸入框?qū)傩裕╝ttrs.xml）
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CodeInputView">
<!-- 邊框?qū)挾?-->
<attr name="borderWidth"
format="dimension" />
<!-- 邊框高度 -->
<attr name="borderHeight"
format="dimension" />
<!-- 邊框間距 -->
<attr name="borderSpacing"
format="dimension" />
<!-- 邊框背景圖 -->
<attr name="borderImage"
format="reference" />
<!-- 最大輸入長度 -->
<attr name="android:maxLength" />
</declare-styleable>
</resources>
資源文件（code_input_view_border_bg.xml）
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape android:shape="rectangle">
<corners android:radius="5mm" />
<stroke android:width="2mm"
android:color="@color/colorMain" />
</shape>
</item>
<item android:state_enabled="true">
<shape android:shape="rectangle">
<corners android:radius="5mm" />
<stroke android:width="2mm"
android:color="@color/colorTextLight" />
</shape>
</item>
</selector>
自定義控件（CodeInputView.java）
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.text.InputFilter;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.widget.EditText;
import androidx.annotation.RequiresApi;
import androidx.core.content.ContextCompat;
/**
* <pre>
* <b>author</b> ：BraveTou
* <b>blog</b> ：https://blog.csdn.net/bravetou
* <b>time</b> ：2020/9/8 11:49
* <b>desc</b> ：<pre>
* 自定義驗證碼輸入框
* </pre>
* </pre>
*/
@SuppressLint("AppCompatCustomView")
public class CodeInputView extends EditText {
// <!-- 最大輸入長度 -->
private int mMaxLength = 4;
// <!-- 邊框?qū)挾?-->
private int mBorderWidth = 100;
// <!-- 邊框高度 -->
private int mBorderHeight = 100;
// <!-- 邊框間距 -->
private int mBorderSpacing = 24;
// <!-- 邊框背景圖 -->
private Drawable mBorderImage;
// 用矩形來保存方框的位置、大小信息
private final Rect mRect = new Rect();
// 文本顏色
private int mTextColor;
public CodeInputView(Context context) {
super(context);
init(context, null);
}
public CodeInputView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public CodeInputView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public CodeInputView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context, attrs);
}
// 初始化
private void init(Context context, AttributeSet attrs) {
if (null == mBorderImage) {
mBorderImage = ContextCompat.getDrawable(context,
R.drawable.code_input_view_border_bg);
}
initAttrs(context, attrs);
// 設置最大輸入長度
setMaxLength(mMaxLength);
// 禁止長按
setLongClickable(false);
// 去掉背景顏色
setBackgroundColor(Color.TRANSPARENT);
// 不顯示光標
setCursorVisible(false);
}
// 設置最大長度
private void setMaxLength(int maxLength) {
if (maxLength >= 0) {
setFilters(new InputFilter[]{new InputFilter.LengthFilter(maxLength)});
} else {
setFilters(new InputFilter[0]);
}
}
// 初始化屬性
private void initAttrs(Context context, AttributeSet attrs) {
if (null != attrs) {
// AttributeSet 屬性值的索引
TypedArray o = context.obtainStyledAttributes(attrs, R.styleable.CodeInputView);
// <!-- 最大輸入長度 -->
mMaxLength = o.getInteger(R.styleable.CodeInputView_android_maxLength, 4);
// <!-- 邊框?qū)挾?-->
mBorderWidth = (int) o.getDimension(R.styleable.CodeInputView_borderWidth, 100f);
// <!-- 邊框高度 -->
mBorderHeight = (int) o.getDimension(R.styleable.CodeInputView_borderHeight, 100f);
// <!-- 邊框間距 -->
mBorderSpacing = (int) o.getDimension(R.styleable.CodeInputView_borderSpacing, 24);
// <!-- 邊框背景圖 -->
Drawable drawable = o.getDrawable(R.styleable.CodeInputView_borderImage);
if (null != drawable) {
mBorderImage = drawable;
}
// 回收資源
o.recycle();
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 當前輸入框的寬高信息
int width = getMeasuredWidth();
int height = getMeasuredHeight();
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
// 判斷高度是否小于自定義邊框高度
height = height < mBorderHeight ? mBorderHeight : height;
// 自定義輸入框?qū)挾?= 邊框?qū)挾?* 數(shù)量 + 邊框間距 * (數(shù)量 - 1)
int customWidth = mBorderWidth * mMaxLength
+ mBorderSpacing * ((mMaxLength - 1) > 0 ? (mMaxLength - 1) : 0);
// 判斷寬度是否小于自定義寬度
width = width < customWidth ? customWidth : width;
widthMeasureSpec = MeasureSpec.makeMeasureSpec(width, widthMode);
heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, heightMode);
// 重新設置測量布局
setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
// 獲取當前輸入文本顏色
mTextColor = getCurrentTextColor();
// 屏蔽系統(tǒng)文本顏色，直接透明
setTextColor(Color.TRANSPARENT);
// 父類繪制
super.onDraw(canvas);
// 重新設置文本顏色
setTextColor(mTextColor);
// 重繪背景
drawBorderBackground(canvas);
// 重繪文本
drawText(canvas);
}
// 繪制背景
private void drawBorderBackground(Canvas canvas) {
// 下面繪制方框背景顏色
// 確定反饋位置
mRect.left = 0;
mRect.top = 0;
mRect.right = mBorderWidth;
mRect.bottom = mBorderHeight;
// 當前畫布保存的狀態(tài)
int count = canvas.getSaveCount();
// 保存畫布
canvas.save();
// 獲取當前輸入字符串長度
int length = getEditableText().length();
for (int i = 0; i < mMaxLength; i++) {
// 設置位置
mBorderImage.setBounds(mRect);
// 設置圖像狀態(tài)
if (i == length) {
// 當前輸入位高亮的索引
mBorderImage.setState(new int[]{android.R.attr.state_focused});
} else {
// 其他輸入位置默認
mBorderImage.setState(new int[]{android.R.attr.state_enabled});
}
// 畫到畫布上
mBorderImage.draw(canvas);
// 確定下一個方框的位置
// X坐標位置
float dx = mRect.right + mBorderSpacing;
// 保存畫布
canvas.save();
// [注意細節(jié)] 移動畫布到下一個位置
canvas.translate(dx, 0);
}
// [注意細節(jié)] 把畫布還原到畫反饋之前的狀態(tài)，這樣就還原到最初位置了
canvas.restoreToCount(count);
// 畫布歸位
canvas.translate(0, 0);
}
// 繪制文本
private void drawText(Canvas canvas) {
int count = canvas.getSaveCount();
canvas.translate(0, 0);
int length = getEditableText().length();
for (int i = 0; i < length; i++) {
String text = String.valueOf(getEditableText().charAt(i));
TextPaint textPaint = getPaint();
textPaint.setColor(mTextColor);
// 獲取文本大小
textPaint.getTextBounds(text, 0, 1, mRect);
// 計算(x,y) 坐標
int x = mBorderWidth / 2 + (mBorderWidth + mBorderSpacing) * i - (mRect.centerX());
int y = canvas.getHeight() / 2 + mRect.height() / 2;
canvas.drawText(text, x, y, textPaint);
}
canvas.restoreToCount(count);
}
}
使用
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<*.*.*.widget.CodeInputView
android:id="@+id/mCodeInputView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginTop="56mm"
android:maxLength="5"
android:text="156"
android:textSize="48mm"
app:borderHeight="88mm"
app:borderSpacing="24mm"
app:borderWidth="88mm" />
</RelativeLayout>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Android側(cè)滑菜單之DrawerLayout用法詳解
今天小編就為大家分享一篇關于Android側(cè)滑菜單之DrawerLayout用法詳解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
利用Jetpack?Compose復刻游戲Flappy?Bird
Flappy?Bird是13年紅極一時的小游戲，其簡單有趣的玩法和變態(tài)的難度形成了強烈反差，引發(fā)全球玩家競相把玩！本文將通過Jetpack?Compose復刻這一游戲，感興趣的小伙伴可以了解一下2022-02-02
Android 實現(xiàn)WebView點擊圖片查看大圖列表及圖片保存功能
這篇文章主要介紹了Android 實現(xiàn)WebView點擊圖片查看大圖列表及圖片保存功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細介紹了android自定義view仿今日頭條加載文字變色效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
Android RecyclerView實現(xiàn)滑動刪除
這篇文章主要為大家詳細介紹了Android RecyclerView實現(xiàn)滑動刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
android studio 一直卡在Gradle:Build Running的幾種解決辦法
這篇文章主要介紹了android studio 一直卡在Gradle:Build Running的解決辦法，非常具有實用價值，需要的朋友可以參考下2017-10-10
最近幾天在學習使用phonegap進行android應用的開發(fā)，網(wǎng)上的資料比較亂，個人參考了很多資料，也試驗了很多次，一直在摸索，總算小有心得，這此過程中也遇到了一些問題，這里給大家分享下解決Phonegap使用拍照功能時的內(nèi)存問題的方法，這里簡單的整理一下2015-05-05
這篇文章主要為大家詳細介紹了Android評分RationBar控件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
Android開發(fā)獲取傳感器數(shù)據(jù)的方法示例【加速度傳感器，磁場傳感器，光線傳感器，方向傳感器】
這篇文章主要介紹了Android開發(fā)獲取傳感器數(shù)據(jù)的方法,結(jié)合實例形式分析了Android獲取加速度傳感器、磁場傳感器、光線傳感器及方向傳感器數(shù)據(jù)的相關操作技巧,需要的朋友可以參考下2017-11-11
這篇文章主要給大家介紹了關于Android sqlite設置主鍵自增長的方法教程，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-06-06