如何實現(xiàn)Android自定義View驗證碼輸入框

這篇文章主要講解了如何實現(xiàn)Android自定義View驗證碼輸入框,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。

我們提供的服務(wù)有:做網(wǎng)站、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、大方ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的大方網(wǎng)站制作公司

驗證碼輸入框

1.先看下樣式

如何實現(xiàn)Android自定義View驗證碼輸入框

2.直接上代碼

public class MyVcode extends AppCompatEditText {
  private int mFigures = 0;// 驗證碼個數(shù)
  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();//填寫了內(nèi)容的驗證碼

  private OnVerifyCodeChangedListener onVerifyCodeChangedListener;
  private int mCurrentPosition = 0;// 當(dāng)前驗證碼的位置
  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);

   /* mCursorColor =
        ta.getColor(
            R.styleable.VerifyCodeEditText_cursorColor,
            getResources().getColor(android.R.color.darker_gray)
        );
    ta.recycle();*/

   /* // force LTR because of bug: https://github.com/JustKiddingBaby/VercodeEditText/issues/4
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
      layoutDirection = LAYOUT_DIRECTION_LTR
    }*/
  }

  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);
    // 每個矩形的寬度 相當(dāng)于我門圓的直徑
    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) {//選中的下一個狀態(tài)
        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){
        //畫已經(jīng)有內(nè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();
    }


  }

  /**
   * 驗證碼變化時候的監(jiān)聽事件
   */
  interface OnVerifyCodeChangedListener {
    /**
     * 當(dāng)驗證碼變化的時候
     */
    public void onVerCodeChanged(String s,int start, int before, int count);

    /**
     * 輸入完畢后的回調(diào)
     */
    public void onInputCompleted(String s);
  }


}

3.自定義的屬性

<!--驗證碼的屬性-->
  <declare-styleable name="VerifyCodeEditText">
    <attr name="figures" format="integer"/><!--驗證碼的個數(shù)-->
    <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"/><!--已經(jīng)有內(nèi)容的顏色 -->
</declare-styleable>

看完上述內(nèi)容,是不是對如何實現(xiàn)Android自定義View驗證碼輸入框有進一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標(biāo)題:如何實現(xiàn)Android自定義View驗證碼輸入框
文章網(wǎng)址:http://muchs.cn/article30/ppphso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、外貿(mào)建站、網(wǎng)站改版服務(wù)器托管、關(guān)鍵詞優(yōu)化做網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)