自定义验证码输入框

最新推荐文章于 2022-03-25 16:52:01 发布
最新推荐文章于 2022-03-25 16:52:01 发布
阅读量1.9k 收藏
点赞数
文章标签： android android studio 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wei844067872/article/details/121496607
版权 


//实现原理，监听EditText的输入，将输入或粘贴的值画到指定位置(设置字体间距也可以这样实现)；监听系统复制粘贴应该也可以，大家可以试试

public class EditTextCodeView extends androidx.appcompat.widget.AppCompatEditText {
    public Context context;
    private float wX;
    private float height;
    private float mX;
    private float rXY;
    private Paint paint,paintText,paintCursor;
    private float distance,distance2;
    private String str="";
    private boolean flag = true;
    private RectF rectF1,rectF2,rectF3,rectF4,rectF5,rectF6;
    private float clickBgWidth1,clickBgWidth2,clickBgWidth3,clickBgWidth4,clickBgWidth5,clickBgWidth6;
    private boolean initFlag=true;

    private Handler handler = new Handler(Looper.myLooper()){

        @Override
        public void handleMessage(@NonNull Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case 0:
                    setInvalidate();
                    break;
            }
        }
    };


    public EditTextCodeView(Context context) {
        super(context);
        this.context=context;
    }

    public EditTextCodeView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
    }

    public EditTextCodeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context=context;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (initFlag){
            initFlag = false;
            initData();

        }

//这里是自定义每个数字的背景，（根据需求定义自己需要的，我这里是圆角边框）
        rectF1 = new RectF(0,0,wX,height);
        canvas.drawRoundRect(rectF1,rXY,rXY,paint);

        rectF2 = new RectF(wX+mX,0,2*wX+mX,height);
        canvas.drawRoundRect(rectF2,rXY,rXY,paint);

        rectF3 = new RectF(2*wX+2*mX,0,3*wX+2*mX,height);
        canvas.drawRoundRect(rectF3,rXY,rXY,paint);

        rectF4 = new RectF(3*wX+3*mX,0,4*wX+3*mX,height);
        canvas.drawRoundRect(rectF4,rXY,rXY,paint);

        rectF5 = new RectF(4*wX+4*mX,0,5*wX+4*mX,height);
        canvas.drawRoundRect(rectF5,rXY,rXY,paint);

        rectF6 = new RectF(5*wX+5*mX,0,6*wX+5*mX,height);
        canvas.drawRoundRect(rectF6,rXY,rXY,paint);

//光标初始化(也可以不初始化)
        if (TextUtils.isEmpty(str)){
            //文字的宽度
            if (flag){
                canvas.drawText("I", rectF1.centerX(),rectF1.centerY()+ distance2,paintCursor);
                flag = false;
            }else {
                canvas.drawText("", rectF1.centerX(),rectF1.centerY()+ distance2,paintCursor);
                flag = true;
            }
        }

//画出数字
        for (int  i=0;i<str.length();i++){
            char charAt = str.charAt(i);
            switch (i){
                case 0:
                    float baseline1= rectF1.centerY()+ distance;
                    canvas.drawText(""+charAt, rectF1.centerX(),baseline1,paintText);

//判断是最后一个数字，显示光标
                    if (i==(str.length()-1)){
                        //文字的宽度
                        clickBgWidth1 = paintText.measureText(""+charAt);
                        if (flag){
                            canvas.drawText("I", rectF1.centerX()+clickBgWidth1/2+2,rectF1.centerY()+ distance2,paintCursor);
                            flag = false;
                        }else {
                            canvas.drawText("", rectF1.centerX()+clickBgWidth1/2+2,rectF1.centerY()+ distance2,paintCursor);
                            flag = true;
                        }
                    }

                    break;

                case 1:
                    float baseline2= rectF2.centerY()+ distance;
                    canvas.drawText(""+charAt, rectF2.centerX(),baseline2,paintText);
//判断是最后一个数字，显示光标
                    if (i==(str.length()-1)){
                        //文字的宽度
                        clickBgWidth2 = paintText.measureText(""+charAt);
                        if (flag){
                            canvas.drawText("I", rectF2.centerX()+clickBgWidth2/2+2,rectF2.centerY()+ distance2,paintCursor);
                            flag = false;
                        }else {
                            canvas.drawText("", rectF2.centerX()+clickBgWidth2/2+2,rectF2.centerY()+ distance2,paintCursor);
                            flag = true;
                        }
                    }
                    break;

                case 2:
                    float baseline3= rectF3.centerY()+ distance;
                    canvas.drawText(""+charAt, rectF3.centerX(),baseline3,paintText);
//判断是最后一个数字，显示光标
                    if (i==(str.length()-1)){
                        //文字的宽度
                        clickBgWidth3 = paintText.measureText(""+charAt);
                        if (flag){
                            canvas.drawText("I", rectF3.centerX()+clickBgWidth3/2+2,rectF3.centerY()+ distance2,paintCursor);
                            flag = false;
                        }else {
                            canvas.drawText("", rectF3.centerX()+clickBgWidth3/2+2,rectF3.centerY()+ distance2,paintCursor);
                            flag = true;
                        }
                    }
                    break;

                case 3:
                    float baseline4= rectF4.centerY()+ distance;
                    canvas.drawText(""+charAt, rectF4.centerX(),baseline4,paintText);
//判断是最后一个数字，显示光标
                    if (i==(str.length()-1)){
                        //文字的宽度
                        clickBgWidth4 = paintText.measureText(""+charAt);
                        if (flag){
                            canvas.drawText("I", rectF4.centerX()+clickBgWidth4/2+2,rectF4.centerY()+ distance2,paintCursor);
                            flag = false;
                        }else {
                            canvas.drawText("", rectF4.centerX()+clickBgWidth4/2+2,rectF4.centerY()+ distance2,paintCursor);
                            flag = true;
                        }
                    }
                    break;

                case 4:
                    float baseline5= rectF5.centerY()+ distance;
                    canvas.drawText(""+charAt, rectF5.centerX(),baseline5,paintText);
//判断是最后一个数字，显示光标
                    if (i==(str.length()-1)){
                        //文字的宽度
                        clickBgWidth5 = paintText.measureText(""+charAt);
                        if (flag){
                            canvas.drawText("I", rectF5.centerX()+clickBgWidth5/2+2,rectF5.centerY()+ distance2,paintCursor);
                            flag = false;
                        }else {
                            canvas.drawText("", rectF5.centerX()+clickBgWidth5/2+2,rectF5.centerY()+ distance2,paintCursor);
                            flag = true;
                        }
                    }
                    break;

                case 5:
                    float baseline6= rectF6.centerY()+ distance;
                    canvas.drawText(""+charAt, rectF6.centerX(),baseline6,paintText);
//判断是最后一个数字，显示光标
                    if (i==(str.length()-1)){
                        //文字的宽度
                        clickBgWidth6 = paintText.measureText(""+charAt);
                        if (flag){
                            canvas.drawText("I", rectF6.centerX()+clickBgWidth6/2+2,rectF6.centerY()+ distance2,paintCursor);
                            flag = false;
                        }else {
                            canvas.drawText("", rectF6.centerX()+clickBgWidth6/2+2,rectF6.centerY()+ distance2,paintCursor);
                            flag = true;
                        }
                    }
                    break;
            }
        }

        handler.removeMessages(0);
        handler.sendEmptyMessageDelayed(0,500);
    }

    private void initData() {
        paint = new Paint();
        paint.setColor(getResources().getColor(R.color.color_all));

        wX = (getWidth() - (Util.dip2px(context, 14) * 5)) / 6;//子view宽度
        mX = Util.dip2px(context, 14);//边距
        rXY = Util.dip2px(context, 4);//圆角
        height = Util.dip2px(context, 60);//高度

        paintText = new Paint();
        /*画上数字*/
        paintText.setColor(Color.BLACK);
        paintText.setTextSize(60);
        paintText.setStyle(Paint.Style.FILL);
        paintText.setTextAlign(Paint.Align.CENTER);
        //计算baseline
        Paint.FontMetrics fontMetrics=paintText.getFontMetrics();
        distance = (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom;


        paintCursor = new Paint();
        paintCursor.setColor(Color.BLACK);
        paintCursor.setTextSize(80);
        paintCursor.setStyle(Paint.Style.FILL);
        paintCursor.setTextAlign(Paint.Align.CENTER);
        //计算baseline
        Paint.FontMetrics fontMetrics2=paintCursor.getFontMetrics();
        distance2 = (fontMetrics2.bottom - fontMetrics2.top)/2 - fontMetrics2.bottom;


    }

    public void setOnPaintText(String str){
        this.str = str;
    }

    public void setInvalidate(){
        //更新绘制
        invalidate();
    }

    /**
     * @description 销毁
     * @param
     */
    public void setDestroy(){
        if (handler!=null){
            handler.removeCallbacksAndMessages(null);
            handler=null;
        }
    }


}



<!--布局，字体颜色和背景色一个颜色-->
<com......EditTextCodeView
            android:id="@+id/et_code_view"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp_60"
            android:layout_marginTop="@dimen/dp_30"
            android:cursorVisible="false"
            android:maxLength="6"
            android:inputType="number"
            android:digits="0123456789"
            android:textColor="@color/white"
            android:background="@null"/>


//当前类调用控件和EditText的输入监听
EditTextCodeView et_code_view = view.findViewById(R.id.et_code_view);
        et_code_view.setSelection(et_code_view.length());//将光标移至文字末尾
        et_code_view.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void afterTextChanged(Editable editable) {
                et_code_view.setOnPaintText(editable.toString());
                //et_code_view.setInvalidate();//刷新
            }
        });

//直接粘贴就可以使用

wei844067872
关注
自定义验证码输入控件
未名部落格
07-29 496
控件代码深度参考了掘金文章Android仿滴滴出行验证码输入框效果，增加了 setText() 方法 控件采用多个横向排列的 EditText 组合控件来实现验证码录入框。 自定义属性文件 attrs.xml <!--自定义短信验证码输入控件声明--> <declare-styleable name="vericationCodeInput"> ...
Android自定义数字验证码输入框
张可的博客
04-07 4916
先上效果图设计思路刚开始想过使用EditText来实现，但是具体实施时发现并不是这么容易，而且还有一堆的坑，不如直接继承View自定义来的方便，先在onDraw方法中绘制边框及验证码，调整弹出输入法只能输入数字，监听输入法输入，每输入一个字符都需要重新绘制，另外考虑到扩展性需要重写onMeasure方法来计算View的大小。具体实现首先需要在onDraw中绘制外面带有圆角的矩形边框以及数字中间的分割
Android自定义验证码输入框
04-09
这是一个自定义的验证码输入框并且运用到了软件盘的显示和隐藏。
Android修行手册 - 自定义验证码输入框
空名先生
03-25 1万+
本文约8.2千字，新手阅读需要9分钟，复习需要4分钟 【收藏随时查阅不再迷路】 👉关于作者 众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣 ！！！ 专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等） 有什么需要欢迎私我，交流群让学习不再孤单。 👉前提 这是小空坚持写的Android新手向系列，欢迎品尝。 大佬（×） 新手（.
Android实现自定义验证码输入框效果(实例代码)
08-25
Android 实现自定义验证码输入框效果 本文主要介绍了 Android 实现自定义验证码输入框效果的方法，通过实例代码给大家介绍了非常详细的实现步骤，具有一定的参考借鉴价值。下面是实现自定义验证码输入框效果的知识...
Android 自定义验证码输入框的实例代码(支持粘贴连续性)
08-25
Android 自定义验证码输入框实例代码解析 Android 自定义验证码输入框是一个非常重要的组件，它广泛应用于各种验证码输入场景。今天，我们将详细介绍如何使用 Android 自定义验证码输入框实例代码，实现支持粘贴...
Android 自定义View (验证码)项目实例完整源码
04-21
代码为博客的示例代码，详细讲解参考：http://blog.csdn.net/lmj623565791/article/details/24252901 有问题，请留言~
登陆界面用户输入信息验证
10-20
javascript+html+jsp登陆界面验证用户输入的正确性。
HTML5为输入框添加语音输入功能的实现方法
09-27
本文给大家介绍如何使用html5为输入框添加语音输入功能，实现方法很简单，需要的朋友参考下本
Android View教程之自定义验证码输入框效果
08-26
Android View教程之自定义验证码输入框效果 Android View教程之自定义验证码输入框效果是Android开发者们常用的技术之一，它能够帮助开发者实现自定义的验证码输入框效果。在这篇教程中，我们将学习如何使用自定义...
自定义手机验证码输入框
qq_24505921的博客
10-19 454
类似上图，几个输入框横线排列。 具体思路：使用linearLayout 横向添加几个ediTtext,第一个首先获取焦点，当输入完成第一个，焦点依次传递到下一个，如果是键盘删除按钮删除，判断当前获取焦点的输入框是否有内容，如果有内容则清空内容，如果无内容那么焦点往前一个输入框传递。 关于动态修改光标的样式，EditText没有提供api,那么一想肯定就是反射了，代码如下： /** * ...
使用js自制输入框验证
不是本人的博客
03-23 1150
为了实现一个管理系统，少不了用户的输入作为系统的内容。一旦涉及输入就需要对用户的输入内容进行判断，避免错误，无效，有害数据内容进入系统。 今天通过javascript对页面的输入框进行校验，主要思路是通过正则表达式对输入内容进行校验，并结合上一篇博客《自制右下角弹窗》http://blog.csdn.net/u010115177/article/details/44526279给用户友好提示。
自定义验证码输入界面
weixin_34291004的博客
01-11 252
在很多APP(银行,理财等APP)中都有输入验证码的功能，因为朋友需要，就简单就目前功能进行了简单的封装，先给出效果图： 图一： 图二： 图三： 实现的主要效果 进入界面即可输入 输入完毕自动隐藏键盘和光标 可回删 主要代码逻辑 demo源码可以在demo中查看 具体的使用方式 引入WLInputView和WLTextField 外界指定验证码个数[self.inputView...
开发小技巧：创建自定义的HTML5输入框验证出错信息
会写代码的哈士奇
09-28 1005
很多时候，我们在做输入框的时候，总希望
Android自定义验证码输入框实现教程
"Android实现自定义验证码输入框效果(实例代码)\n主要介绍了Android实现自定义验证码输入框效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下\n\n这里提一下，这个当时也是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值