Android自定義控件實(shí)現(xiàn)通用驗(yàn)證碼輸入框(二)
本文實(shí)例為大家分享了Android實(shí)現(xiàn)通用驗(yàn)證碼輸入框第2篇具體實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
效果圖
話不多說,我們還是先上效果圖,可以先先看看是不是自己想要的
閑聊
這種驗(yàn)證碼輸入框使用組合控件就比較煩人了,所以這邊直接使用自定View步奏實(shí)現(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> * 自定義驗(yàn)證碼輸入框 * </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); // 設(shè)置最大輸入長度 setMaxLength(mMaxLength); // 禁止長按 setLongClickable(false); // 去掉背景顏色 setBackgroundColor(Color.TRANSPARENT); // 不顯示光標(biāo) setCursorVisible(false); } // 設(shè)置最大長度 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); // 當(dāng)前輸入框的寬高信息 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); // 重新設(shè)置測(cè)量布局 setMeasuredDimension(widthMeasureSpec, heightMeasureSpec); } @Override protected void onDraw(Canvas canvas) { // 獲取當(dāng)前輸入文本顏色 mTextColor = getCurrentTextColor(); // 屏蔽系統(tǒng)文本顏色,直接透明 setTextColor(Color.TRANSPARENT); // 父類繪制 super.onDraw(canvas); // 重新設(shè)置文本顏色 setTextColor(mTextColor); // 重繪背景 drawBorderBackground(canvas); // 重繪文本 drawText(canvas); } // 繪制背景 private void drawBorderBackground(Canvas canvas) { // 下面繪制方框背景顏色 // 確定反饋位置 mRect.left = 0; mRect.top = 0; mRect.right = mBorderWidth; mRect.bottom = mBorderHeight; // 當(dāng)前畫布保存的狀態(tài) int count = canvas.getSaveCount(); // 保存畫布 canvas.save(); // 獲取當(dāng)前輸入字符串長度 int length = getEditableText().length(); for (int i = 0; i < mMaxLength; i++) { // 設(shè)置位置 mBorderImage.setBounds(mRect); // 設(shè)置圖像狀態(tài) if (i == length) { // 當(dāng)前輸入位高亮的索引 mBorderImage.setState(new int[]{android.R.attr.state_focused}); } else { // 其他輸入位置默認(rèn) mBorderImage.setState(new int[]{android.R.attr.state_enabled}); } // 畫到畫布上 mBorderImage.draw(canvas); // 確定下一個(gè)方框的位置 // X坐標(biāo)位置 float dx = mRect.right + mBorderSpacing; // 保存畫布 canvas.save(); // [注意細(xì)節(jié)] 移動(dòng)畫布到下一個(gè)位置 canvas.translate(dx, 0); } // [注意細(xì)節(jié)] 把畫布還原到畫反饋之前的狀態(tài),這樣就還原到最初位置了 canvas.restoreToCount(count); // 畫布?xì)w位 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); // 計(jì)算(x,y) 坐標(biāo) 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)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android側(cè)滑菜單之DrawerLayout用法詳解
今天小編就為大家分享一篇關(guān)于Android側(cè)滑菜單之DrawerLayout用法詳解,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-03-03利用Jetpack?Compose復(fù)刻游戲Flappy?Bird
Flappy?Bird是13年紅極一時(shí)的小游戲,其簡單有趣的玩法和變態(tài)的難度形成了強(qiáng)烈反差,引發(fā)全球玩家競相把玩!本文將通過Jetpack?Compose復(fù)刻這一游戲,感興趣的小伙伴可以了解一下2022-02-02Android 實(shí)現(xiàn)WebView點(diǎn)擊圖片查看大圖列表及圖片保存功能
這篇文章主要介紹了Android 實(shí)現(xiàn)WebView點(diǎn)擊圖片查看大圖列表及圖片保存功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02Android RecyclerView實(shí)現(xiàn)滑動(dòng)刪除
這篇文章主要為大家詳細(xì)介紹了Android RecyclerView實(shí)現(xiàn)滑動(dòng)刪除,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07android studio 一直卡在Gradle:Build Running的幾種解決辦法
這篇文章主要介紹了android studio 一直卡在Gradle:Build Running的解決辦法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10Phonegap使用拍照功能時(shí)的內(nèi)存問題
最近幾天在學(xué)習(xí)使用phonegap進(jìn)行android應(yīng)用的開發(fā),網(wǎng)上的資料比較亂,個(gè)人參考了很多資料,也試驗(yàn)了很多次,一直在摸索,總算小有心得,這此過程中也遇到了一些問題,這里給大家分享下解決Phonegap使用拍照功能時(shí)的內(nèi)存問題的方法,這里簡單的整理一下2015-05-05Android評(píng)分RationBar控件使用詳解
這篇文章主要為大家詳細(xì)介紹了Android評(píng)分RationBar控件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12Android開發(fā)獲取傳感器數(shù)據(jù)的方法示例【加速度傳感器,磁場傳感器,光線傳感器,方向傳感器】
這篇文章主要介紹了Android開發(fā)獲取傳感器數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了Android獲取加速度傳感器、磁場傳感器、光線傳感器及方向傳感器數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11Android sqlite設(shè)置主鍵自增長的方法教程
這篇文章主要給大家介紹了關(guān)于Android sqlite設(shè)置主鍵自增長的方法教程,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06