Android仿支付宝支付密码输入框

实现一个仿支付宝支付密码的输入框,主要实现如下:

PasswordView.java

package com.jackie.alipay.password;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.EditText;
import android.widget.Toast;

/**
 * Created by Administrator on 2016/10/31.
 */

public class PasswordView extends EditText {
    private Paint mBorderPaint;     //外框画笔
    private Paint mLinePaint;       //线的画笔
    private Paint mPasswordPaint;   //密码画笔
    private int mPasswordTextLength;  //输入密码的长度
    private int mWidth;
    private int mHeight;

    private static final int PASSWORD_LENGTH = 6;//密码的长度
    private static final int PASSWORD_RADIUS = 15;

    public PasswordView(Context context) {
        this(context, null);
    }

    public PasswordView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PasswordView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initView();
    }

    private void initView() {
        setFocusable(true);

        mBorderPaint = new Paint();
        mBorderPaint.setStrokeWidth(8);
        mBorderPaint.setColor(Color.WHITE);
        mBorderPaint.setStyle(Paint.Style.FILL);

        mLinePaint = new Paint();
        mLinePaint.setColor(Color.parseColor("#838B8B"));
        mLinePaint.setStrokeWidth(4);

        mPasswordPaint = new Paint();
        mPasswordPaint.setColor(Color.BLACK);
        mPasswordPaint.setStrokeWidth(12);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();

        drawRoundRect(canvas);
        drawLine(canvas);
        drawPassword(canvas);
    }

    /**
     * 绘制圆角矩形背景
     * @param canvas
     */
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    private void drawRoundRect(Canvas canvas) {
        canvas.drawRoundRect(0, 0, mWidth, mHeight, 12, 12, mBorderPaint);

    }

    /**
     * 绘制分割线
     * @param canvas
     */
    private void drawLine(Canvas canvas) {
        for (int i = 1; i < PASSWORD_LENGTH; i++) {
            float x = mWidth * i / PASSWORD_LENGTH;
            canvas.drawLine(x, 12, x, mHeight - 12, mLinePaint);
        }
    }

    /**
     * 绘制密码
     * @param canvas
     */
    private void drawPassword(Canvas canvas) {
        float cx, cy = mHeight / 2;
        float half = mWidth / PASSWORD_LENGTH / 2;
        for (int i = 0; i < mPasswordTextLength; i++) {
            cx = mWidth * i / PASSWORD_LENGTH + half;
            canvas.drawCircle(cx, cy, PASSWORD_RADIUS, mPasswordPaint);
        }
    }

    @Override
    protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        super.onTextChanged(text, start, lengthBefore, lengthAfter);

        mPasswordTextLength = text.toString().length();

        if (mPasswordTextLength == PASSWORD_LENGTH) {
            Toast.makeText(getContext(), "您设置的密码为: " + text, Toast.LENGTH_SHORT).show();;
        }

        invalidate();
    }


    public void reset(){
        setText("");
        invalidate();
    }
}
效果图如下:


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值