自定义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.youkuaiyun.com/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