自定義密碼輸入框

摘要： 如果是做電商或者金融借貸的App，可能會用到密碼輸入框的情況。這也是一個簡單的View，通過繪製邊框、分割線，密碼圓點實現。該view自定義了密碼長度，線粗細、顏色，圓點大小、顏色等屬性。 效果圖： PsdBoxView程式碼： /** * 密碼輸入框：可自定...

如果是做電商或者金融借貸的App，可能會用到密碼輸入框的情況。這也是一個簡單的View，通過繪製邊框、分割線，密碼圓點實現。該view自定義了密碼長度，線粗細、顏色，圓點大小、顏色等屬性。

效果圖：

PsdBoxView程式碼：

/**
 * 密碼輸入框：可自定義屬性包括：密碼長度，邊框顏色，邊框粗細，圓點顏色，圓點大小
 */
public class PsdBoxView extends AppCompatEditText {
private Paint borderPaint, dotPaint;
/** 當前輸入文字長度 */
private int curTextLeng;
private OnInputFinishListener finishListener;
/** 密碼長度 */
private int maxLength;
/** 邊框長度 */
private float borderWidth;
/** 邊框顏色 */
private int borderColor;
/** 圓角半徑 */
private float borderRadus;
/** 圓點半徑 */
private float dotRadus;
/** 圓點顏色 */
private int dotColor;

public PsdBoxView(Context context) {
super(context);
init();
}

public PsdBoxView(Context context, AttributeSet attrs) {
super(context, attrs);

initAttrs(context, attrs);
init();
}

@TargetApi(Build.VERSION_CODES.M)
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PsdBoxView);
maxLength = array.getInteger(R.styleable.PsdBoxView_maxleng, 6);
borderWidth = array.getDimension(R.styleable.PsdBoxView_border_width, 1);
borderColor = array.getColor(R.styleable.PsdBoxView_border_color, context.getColor(R.color.colorPrimary));
borderRadus = array.getDimension(R.styleable.PsdBoxView_border_radus, 5);
dotRadus = array.getDimension(R.styleable.PsdBoxView_dot_radus, 2);
dotColor = array.getColor(R.styleable.PsdBoxView_dot_color, context.getColor(R.color.colorPrimary));
}

private void init() {
initPaint();
setInputType(InputType.TYPE_CLASS_NUMBER);
setTextSize(0);//隱藏預設的文字，設定字型大小為0，或者設定文字顏色透明
setEditTextListener();
}

/**
* 初始畫筆
*/
private void initPaint() {
borderPaint = new Paint();
borderPaint.setColor(borderColor);
borderPaint.setStrokeWidth(borderWidth);
borderPaint.setStyle(Paint.Style.STROKE);

dotPaint = new Paint();
dotPaint.setColor(dotColor);
dotPaint.setStyle(Paint.Style.FILL);
}

/**
* 設定輸入框數字監聽
*/
private void setEditTextListener() {
addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) { }

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) { }

@Override
public void afterTextChanged(Editable s) {
//文字長度改變，重新重新整理繪製
curTextLeng = s.toString().length();
invalidate();
if (curTextLeng == maxLength) {
//監聽是否輸入結束
if (finishListener != null) {
finishListener.onfinish(s.toString());
}
}
}
});
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

//繪製自身大小的圓角邊框
RectF rectF = new RectF(0, 0, getWidth(), getHeight());
canvas.drawRoundRect(rectF, borderRadus, borderRadus, borderPaint);

int spaceWidth = getWidth() / maxLength;//每隔方框寬度
//繪製分割線
for (int i = 1; i < maxLength; i++) {
canvas.drawLine(spaceWidth * i, 0, spaceWidth * i, getHeight(), borderPaint);
}

//繪製圓點
for (int i = 0; i < curTextLeng; i++) {
int left = spaceWidth / 2 + spaceWidth * i;
canvas.drawOval(left - dotRadus, getHeight() / 2 - dotRadus, left + dotRadus, getHeight() / 2 + dotRadus, dotPaint);
}
}

public void setInputFinishListener(OnInputFinishListener finishListener) {
this.finishListener = finishListener;
}

public interface OnInputFinishListener {
void onfinish(String number);
}

}

自定義屬性：

<declare-styleable name="PsdBoxView">
<attr name="maxleng" format="integer"/>
<attr name="border_width" format="dimension"/>
<attr name="border_color" format="color"/>
<attr name="border_radus" format="dimension"/>
<attr name="dot_radus" format="dimension"/>
<attr name="dot_color" format="color"/>
</declare-styleable>

佈局檔案：

稍微改了屬性值的兩個view。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity">

<com.example.com.passwordboxview.PsdBoxView
android:id="@+id/view_psd"
android:layout_width="250dp"
android:layout_height="50dp"
android:maxLength="6"
android:background="@null"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:cursorVisible="false"
app:maxleng="6"
app:border_width="1.5dp"
app:border_color="@color/colorPrimary"
app:border_radus="8dp"
app:dot_radus="5dp"
app:dot_color="@color/colorAccent"/>

<com.example.com.passwordboxview.PsdBoxView
android:layout_width="200dp"
android:layout_height="50dp"
android:maxLength="6"
android:background="@null"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:cursorVisible="false"
android:layout_below="@id/view_psd"
app:maxleng="4"
app:border_width="1.5dp"
app:border_color="#000"
app:border_radus="5dp"
app:dot_radus="4dp"
app:dot_color="@color/colorPrimary" />

</RelativeLayout>