Android 사용자 정의 PasswordInputView 비밀번호 입력

'사용자 정의 암호 입력 컨트롤 실현'장 에 오신 것 을 환영 합 니 다.PasswordInputView 는 암호 입력 의 감청 을 정의 합 니 다.레이아웃 파일 에서 속성 값 을 직접 정의 하고 암호 입력 의 길이,원본 암 호 를 직접 가 져 오 는 것 을 지원 합 니 다.
선 상세도

PasswordInputView 는 무엇 을 합 니까?
PasswordInputView 는 사용자 정의 암호 입력 컨트롤 로 알 리 페 이,위 챗 결제 와 같은 암호 입력 과 함께 암호 입력 의 감청 을 정의 합 니 다.레이아웃 파일 에서 속성 값 을 직접 정의 하고 암호 입력 의 길이,원본 암호 등 을 직접 가 져 오 는 것 을 지원 하 며 다른 방법 도 확장 할 수 있 습 니 다.스스로 실현 하 십시오.
실현 원리
1.'PasswordInputView'클래스 를 만 들 고 EditText 를 계승 합 니 다.사용자 정의 view 는 암호 로 입력 하기 때문에 EditText 를 계승 해 야 합 니 다.
2.레이아웃(layot)파일(.xml)에서 PasswordInputView 의 각 속성의 값 을 직접 정의 하기 위해 서 는 PasswordInputView 에 AttributeSet 매개 변 수 를 가 진 구조 방법 을 정의 해 야 합 니 다.

public PasswordInputView(Context context, AttributeSet attr) {
  super(context, attr);
  init(context, attr);
}

3.'value/attrs.xml'에서 PasswordInputView 의 각 속성 과 유형 을 정의 합 니 다.예 를 들 어:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="Passwordinputview">
    <attr name="passwordLength" format="integer"/>
    <attr name="borderWidth" format="dimension"/>
    <attr name="borderRadius" format="dimension"/>
    <attr name="borderColor" format="color"/>
    <attr name="passwordWidth" format="dimension"/>
    <attr name="passwordColor" format="color"/>
  </declare-styleable>
</resources>

4.OnDraw(Canvas canvas)방법 을 다시 불 러 오고 실제 테두리,내용 영역(채 우기 모드 로 Paint.Style.FILL 그리 기),분할 선 그리 기,옹 골 진 원점 그리 기(비밀번호).테두리,분할 선 을 그리 면 되 는데 왜 내용 영역 을 그 려 야 하 느 냐 고 물 을 수도 있다.잘 물 었 습 니 다.필 자 는 실현 과정 에서 이 문 제 를 만 났 습 니 다.그 당시 에 내용 구역 을 그리 지 않 았 기 때문에 입력 한 원시 내용 도 나 타 났 습 니 다(아래 이상 그림).그래서 내용 구역(충전 모드 로 Paint.Style.FILL 을 그립 니 다)은 원시 내용 이 발견 되 지 않도록 덮 기 위해 서 입 니 다.반드시 적어 서 는 안 됩 니 다.

정확 한 코드 는 다음 과 같 습 니 다.

 private void init(Context context, AttributeSet attr) {
  TypedArray ta = context.obtainStyledAttributes(attr, R.styleable.Passwordinputview);
  try {
   passwordLength = ta.getInt(R.styleable.Passwordinputview_passwordLength, passwordLength);
   borderWidth = ta.getDimensionPixelSize(R.styleable.Passwordinputview_borderWidth, borderWidth);
   borderRadius = ta.getDimensionPixelSize(R.styleable.Passwordinputview_borderRadius, borderRadius);
   borderColor = ta.getColor(R.styleable.Passwordinputview_borderColor, borderColor);
   passwordWidth = ta.getDimensionPixelSize(R.styleable.Passwordinputview_passwordWidth, passwordWidth);
   passwordColor = ta.getColor(R.styleable.Passwordinputview_passwordColor, passwordColor);
  } catch (Exception e) {

  }
  ta.recycle();

  borderPaint = new Paint();
  borderPaint.setAntiAlias(true);
  borderPaint.setColor(borderColor);
  borderPaint.setStrokeWidth(borderWidth);
  borderPaint.setStyle(Paint.Style.FILL); //       ，            

  passwordPaint = new Paint();
  passwordPaint.setAntiAlias(true);
  passwordPaint.setColor(passwordColor);
  passwordPaint.setStrokeWidth(passwordWidth);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  // TODO Auto-generated method stub
  super.onDraw(canvas);
  int width = getWidth();
  int height = getHeight();

  //   
  RectF rect = new RectF(0, 0, width, height);
  borderPaint.setColor(borderColor);
  canvas.drawRoundRect(rect, borderRadius, borderRadius, borderPaint);

  //     ,    borderPaint.setStyle(Paint.Style.FILL)  ,             
  RectF rectContent = new RectF(rect.left + defaultContentMargin, rect.top + defaultContentMargin, rect.right - defaultContentMargin, rect.bottom - defaultContentMargin);
  borderPaint.setColor(Color.WHITE);
  canvas.drawRoundRect(rectContent, borderRadius, borderRadius, borderPaint);

  //    :          1
  borderPaint.setColor(borderColor);
  borderPaint.setStrokeWidth(defaultSplitLineWidth);
  for (int i = 1; i < passwordLength; i++) {
   float x = width * i / passwordLength;
   canvas.drawLine(x, 0, x, height, borderPaint);
  }

  //     
  float px, py = height / 2;
  float halfWidth = width / passwordLength / 2;
  for (int i = 0; i < textLength; i++) {
   px = width * i / passwordLength + halfWidth;
   canvas.drawCircle(px, py, passwordWidth, passwordPaint);
  }
}

5."속성 값 설정"방법 을 정의 합 니 다.

public void setBorderWidth(int borderWidth) {
 this.borderWidth = borderWidth;
 borderPaint.setStrokeWidth(borderWidth);
 postInvalidate();
}

동태 도

프로젝트 원본 코드
이 링크 를 누 르 십시오
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.