欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android自定義PasswordInputView密碼輸入

 更新時(shí)間:2018年08月21日 11:58:50   作者:天外來客1009  
這篇文章主要為大家詳細(xì)介紹了Android自定義PasswordInputView密碼輸入功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

歡迎來到“實(shí)現(xiàn)自定義密碼輸入控件”這一章節(jié),PasswordInputView定義了密碼輸入的監(jiān)聽,支持直接在布局文件定義屬性值、支持直接獲取密碼輸入的長(zhǎng)度、原始密碼……

先上圖

PasswordInputView是做什么的?

PasswordInputView是一個(gè)自定義密碼輸入的控件,類似支付寶、微信支付的密碼輸入,同時(shí)定義了密碼輸入的監(jiān)聽,支持直接在布局文件定義屬性值、支持直接獲取密碼輸入的長(zhǎng)度、原始密碼等,還可以擴(kuò)展其他方法,請(qǐng)自行實(shí)現(xiàn)。

實(shí)現(xiàn)原理

1.創(chuàng)建一個(gè)類 ‘PasswordInputView' ,讓其繼承EditText,因?yàn)槲覀円獙?shí)現(xiàn)的自定義view是用來密碼輸入的,所以必須繼承EditText。

2.為了在布局(layout)文件(.xml)能直接定義PasswordInputView各個(gè)屬性的值,我們需要定義PasswordInputView帶AttributeSet 參數(shù)的構(gòu)造方法。

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

3.在'value/attrs.xml'中定義PasswordInputView各個(gè)屬性及其類型,如:

<?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)方法,并在其實(shí)現(xiàn)畫邊框、畫內(nèi)容區(qū)域(以填充模式繪制Paint.Style.FILL)、畫分割線、畫實(shí)心圓點(diǎn)(密碼)。有人可能會(huì)問:畫了邊框、分割線,就可以了,為什么還要畫內(nèi)容區(qū)域?問得好,筆者在實(shí)現(xiàn)過程中也碰到這個(gè)問題,當(dāng)時(shí)沒有畫內(nèi)容區(qū)域,導(dǎo)致輸入的原始內(nèi)容也顯示出來了(如下異常圖),所以畫內(nèi)容區(qū)域(以填充模式繪制Paint.Style.FILL)是為了掩蓋原始內(nèi)容不被發(fā)現(xiàn),切記必不可少。

正確代碼如下:

 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); //以填充模式來畫,防止原始輸入內(nèi)容顯示出來

  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);

  //畫內(nèi)容區(qū)域,與上面的borderPaint.setStyle(Paint.Style.FILL)對(duì)應(yīng), 防止原始輸入內(nèi)容顯示出來
  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);

  //畫分割線:分割線數(shù)量比密碼數(shù)少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);
  }

  //畫密碼內(nèi)容
  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.定義“設(shè)置屬性值”的方法,如下

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

動(dòng)態(tài)圖

項(xiàng)目源碼

點(diǎn)此鏈接

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論