自定义View之自定义支付宝密码输入控件

效果如图上边(录像文件被压缩有些失真)

1、可以设置密码位数

2、每个格子能输入一位的数字

3、背景框、分割线、圆点颜色可以设置

4、位数输入满后可直接进行提示或后续操作

首先设置下需要的属性attrs文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="passwordEditText">
<attr name="colorPoint" format="color"  />
<attr name="colorLine" format="color" />
<attr name="colorBound" format="color" />
<attr name="passwordLength" format="integer" />
<attr name="pointRadius" format="integer" />
</declare-styleable>

</resources>

属性依次是设置点颜色、分隔线颜色、边框线颜色、可输入的密码长度、圆点的半径。

然后自定义一个继承EditText的控件

package com.copyalipaypassword.cc;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.EditText;

/**
* @author Created by cc on 17/5/25.
* @fileName PasswordEditText
* @githublink https://github.com/cc0819 * @csdnlink http://blog.csdn.net/qq_25404567 */

public class PasswordEditText extends EditText {
private int clLine;
private int clPoint;
private int clBound;
private int passwordLength;
private int pointRadius;

private Paint paintLine;
private Paint paintPoint;
private Paint paintBound;

private int mWidth;
private int mHeight;

private int psdTextLength;

public OnTextEndListener onTextEndListener;

public void SetOnTextEndListener(OnTextEndListener onTextEndListener){
this.onTextEndListener = onTextEndListener;
}

public PasswordEditText(Context context, AttributeSet attrs) {
super(context, attrs);
initType(context,attrs);
}

public PasswordEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initType(context,attrs);
}

private void initType(Context context,AttributeSet attrs){
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.passwordEditText);
clLine = typedArray.getColor(R.styleable.passwordEditText_colorLine, Color.RED);
clPoint = typedArray.getColor(R.styleable.passwordEditText_colorPoint, Color.BLUE);
clBound = typedArray.getColor(R.styleable.passwordEditText_colorBound, Color.RED);
passwordLength = typedArray.getInteger(R.styleable.passwordEditText_passwordLength, 4);
pointRadius = typedArray.getInteger(R.styleable.passwordEditText_pointRadius, 10);
init();
//回收防内存泄漏
typedArray.recycle();
}

private void init() {
setFocusable(true);
setFocusableInTouchMode(true);
setCursorVisible(false);

paintBound = new Paint();
paintBound.setStrokeWidth(4);
paintBound.setAntiAlias(true);
paintBound.setColor(clBound);
paintBound.setStyle(Paint.Style.STROKE);

paintLine = new Paint();
paintLine.setStrokeWidth(1);
paintLine.setAntiAlias(true);
paintLine.setColor(clLine);

paintPoint = new Paint();
paintPoint.setStrokeWidth(12);
paintPoint.setAntiAlias(true);
paintPoint.setColor(clPoint);

}

@Override
protected void onDraw(Canvas canvas) {
mWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
//        drawRoundLine(canvas);
drawDivisionLine(canvas);
drawPassword(canvas);
}

//绘制边框
private void drawRoundLine(Canvas canvas) {
canvas.drawRoundRect(0,0,mWidth,mHeight,8,8,paintBound);
}

//绘制分割线
private void drawDivisionLine(Canvas canvas) {
for (int i = 1; i < passwordLength; i++) {
float mX = mWidth * i / passwordLength;
canvas.drawLine(mX, 8, mX, mHeight-8, paintLine);
}
}

//绘制密码点
private void drawPassword(Canvas canvas) {
float cx, cy = mHeight / 2;
float half = mWidth / passwordLength;
for (int i = 0; i < psdTextLength; i++) {
cx = half / 2 + half * i;
canvas.drawCircle(cx, cy, pointRadius, paintPoint);
}
}

@Override
protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
super.onTextChanged(text, start, lengthBefore, lengthAfter);
psdTextLength = text.toString().length();
if (psdTextLength == passwordLength && passwordLength != 0){
Log.e("info","---输入完成了---");
onTextEndListener.onTextEndListener(text.toString());
}
invalidate();
}

public int getClLine() {
return clLine;
}

public void setClLine(int clLine) {
this.clLine = clLine;
}

public int getClPoint() {
return clPoint;
}

public void setClPoint(int clPoint) {
this.clPoint = clPoint;
}

public int getPasswordLength() {
return passwordLength;
}

public void setPasswordLength(int passwordLength) {
this.passwordLength = passwordLength;
}

public int getPointRadius() {
return pointRadius;
}

public void setPointRadius(int pointRadius) {
this.pointRadius = pointRadius;
}

//重置
public void reset(){
setText("");
invalidate();
}

//输入完成回调
public  interface OnTextEndListener{
void onTextEndListener(String string);
}

}

也借鉴了网上其他人写的方法，其实主要就是画背景框、分割线和圆点。

如上代码其实并未用到画背景框的方法，是因为画出来我总是感觉不大好看，总是有一个小角儿。

后来所幸就不用这个画了，直接用drawable画了一个圆角的背景放入控件中

如代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<solid android:color="#FFFFFF" />

<stroke
android:width="1.0px"
android:color="#ee3939" />
<corners android:radius="8dp" />

</shape>

为了方便颜色也直接写里面了

设置定义好的控件

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

<com.copyalipaypassword.cc.PasswordEditText
android:id="@+id/psdEditText"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/bg_alipay"
android:maxLength="6"
psw:passwordLength = "6"
/>
</RelativeLayout>

这里要注意设置的

passwordLength设置的长度要和maxLength设置的长度要一样。

拿设置6位密码来举例：

如果输入已经到6位还是继续输入的话，虽然试图中没有变化，但是你打印长度可以看出来还是继续增长的，

其次在自定义控件中我想设置maxLength根据用户设置的passwordLength来的，奈何实在没有找到。

如果哪位大佬设置成功还请告诉小弟。

最后是主页面中代码

package com.copyalipaypassword.cc;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;
import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

@BindView(R.id.psdEditText)
PasswordEditText psdEditText;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
psdEditText.SetOnTextEndListener(new PasswordEditText.OnTextEndListener() {
@Override
public void onTextEndListener(String string) {
Toast.makeText(MainActivity.this, "输入完毕输出是" + string, Toast.LENGTH_SHORT).show();
}
});
}

}

github下载地址：https://github.com/cc0819/CopyAliPayPassword