文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android自定义View验证码输入框

2022-06-06 15:36

关注

本文实例为大家分享了Android自定义View验证码输入框的具体代码,供大家参考,具体内容如下

验证码输入框

1.先看下样式

2.直接上代码


public class MyVcode extends AppCompatEditText {
  private int mFigures = 0;// 验证码个数
  private int mCodeMargin = 0;// 验证码之间的间距
  private int mSelectColor = 0;// 选中框的颜色
  private int mNormalColor = 0;// 普通框的颜色
  private float mBorderWidth = 0f;// 边框的厚度
  Paint mNormalPaint = new Paint();
  Paint mSelectPaint = new Paint();
  Paint mOkContentPain = new Paint();//填写了内容的验证码
  private OnVerifyCodeChangedListener onVerifyCodeChangedListener;
  private int mCurrentPosition = 0;// 当前验证码的位置
  private int mEachRectLength = 0;// 矩形边长
  public MyVcode(Context context) {
    super(context, null);
  }
  public MyVcode(Context context, AttributeSet attrs) {
    super(context, attrs);
    initAttr(context,attrs);
    initPaint();
    setFocusableInTouchMode(true);
    initTextChangeListerner();
  }
  private void initTextChangeListerner() {
    addTextChangedListener(new TextWatcher() {
      @Override
      public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        mCurrentPosition = getText().length();
      }
      @Override
      public void onTextChanged(CharSequence s, int start, int before, int count) {
        mCurrentPosition = getText().length();
        postInvalidate();
        if (onVerifyCodeChangedListener!=null){
          onVerifyCodeChangedListener.onVerCodeChanged(getText().toString(),start,before,count);
        }
      }
      @Override
      public void afterTextChanged(Editable s) {
        mCurrentPosition = getText().length();
        postInvalidate();
        if (getText().length() == mFigures){
          if (onVerifyCodeChangedListener!=null){
            onVerifyCodeChangedListener.onInputCompleted(getText().toString());
          }
        }else if (getText().length()>mFigures){
          getText().delete(mFigures,getText().length());
        }
      }
    });
  }
  @Override
  public boolean onTouchEvent(MotionEvent event) {
    if (event.getAction()==MotionEvent.ACTION_DOWN){
      requestFocus();
      setSelection(getText().length());
      showKeyBoard(getContext());
      return false;
    }
    return super.onTouchEvent(event);
  }
  private void showKeyBoard( Context context) {
    InputMethodManager imm = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);
    imm.showSoftInput(this, InputMethodManager.SHOW_FORCED);
  }
  private void initAttr(Context context, AttributeSet attrs) {
    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.VerifyCodeEditText);
    mFigures = ta.getInteger(R.styleable.VerifyCodeEditText_figures, 6);
    mCodeMargin = (int) ta.getDimension(R.styleable.VerifyCodeEditText_codeMargin, 0f);
    mSelectColor = ta.getColor(R.styleable.VerifyCodeEditText_selectBorderColor,getResources().getColor(R.color.base_barcolor));
    mNormalColor =
        ta.getColor(
            R.styleable.VerifyCodeEditText_normalBorderColor,
            getResources().getColor(android.R.color.darker_gray)
        );
    mBorderWidth = ta.getDimension(R.styleable.VerifyCodeEditText_borderWidth, 1f);
   
   
  }
  private void initPaint() {
    mNormalPaint.setAntiAlias(true);
    mNormalPaint.setColor(mNormalColor);
    mNormalPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mNormalPaint.setStrokeWidth(mBorderWidth);
    mSelectPaint.setAntiAlias(true);
    mSelectPaint.setColor(mSelectColor);
    mSelectPaint.setStyle(Paint.Style.STROKE);
    mSelectPaint.setStrokeWidth(mBorderWidth);
    mOkContentPain.setAntiAlias(true);
    mOkContentPain.setColor(mSelectColor);
    mOkContentPain.setStyle(Paint.Style.FILL_AND_STROKE);
    mOkContentPain.setStrokeWidth(mBorderWidth);
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int size = MeasureSpec.getSize(heightMeasureSpec);
    // 每个矩形的宽度 相当于我门圆的直径
    mEachRectLength = size ;
  }
  @Override
  protected void onDraw(Canvas canvas) {
    //super.onDraw(canvas);
    Editable text = this.getText();
    mCurrentPosition = text.length();
    int width = mEachRectLength -getPaddingLeft() - getPaddingRight();
    for (int i =0 ;i< mFigures;i++){
      canvas.save();
      float start = width*i +mCodeMargin*i+mBorderWidth;
      float end = start+width - mBorderWidth;
      if (i==mFigures-1){
        end -= mBorderWidth;
      }
      RectF rect = new RectF(start, mBorderWidth, end, width - mBorderWidth);
      //画底色
      canvas.drawArc(rect, 0f, 360f, true, mNormalPaint);
      if (i == mCurrentPosition) {//选中的下一个状态
        canvas.drawArc(rect, 0f, 360f, true, mNormalPaint);
        canvas.drawArc(rect, 0f, 360f, true, mSelectPaint);
      }else {
        canvas.drawArc(rect, 0f, 360f, true, mNormalPaint);
      }
      if (mCurrentPosition>i){
        //画已经有内容的
        canvas.drawArc(rect, 0f, 360f, true, mOkContentPain);
      }
      canvas.restore();
    }
    String s = text.toString();
    //画文字
    for (int i = 0;i<mCurrentPosition;i++){
      canvas.save();
      int start = width * i + mCodeMargin * i;
      float x = start + width / 2f;
      TextPaint paint = getPaint();
      paint.setTextAlign(Paint.Align.CENTER);
      paint.setColor(getCurrentTextColor());
      Paint.FontMetrics fontMetrics = paint.getFontMetrics();
      float baseline = (width - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
      canvas.drawText(s.substring(i,i+1), x, baseline, paint);
      canvas.restore();
    }
  }
  
  interface OnVerifyCodeChangedListener {
    
    public void onVerCodeChanged(String s,int start, int before, int count);
    
    public void onInputCompleted(String s);
  }
}

3.自定义的属性


<!--验证码的属性-->
  <declare-styleable name="VerifyCodeEditText">
    <attr name="figures" format="integer"/><!--验证码的个数-->
    <attr name="codeMargin" format="dimension"/><!--验证码的之间的间隔-->
    <attr name="selectBorderColor" format="color|reference"/><!--选中的边框颜色-->
    <attr name="normalBorderColor" format="color|reference"/><!--普通的边框颜色-->
    <attr name="borderWidth" format="dimension"/><!--边框的厚度 -->
    <attr name="cursorColor" format="color|reference"/><!--已经有内容的颜色 -->
</declare-styleable>
您可能感兴趣的文章:Android实现自定义验证码输入框效果(实例代码)Android 自定义验证码输入框的实例代码(支持粘贴连续性)Android View教程之自定义验证码输入框效果Android自定义控件通用验证码输入框的实现Android仿滴滴出行验证码输入框功能实例代码Android实现常见的验证码输入框实例代码Android自动获取输入短信验证码库AutoVerifyCode详解


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯