Android仿支付宝淘宝 - 自定义密码输入框和键盘

1.概述

　　点击打开链接

最近有人在问我要所有项目的代码，我在这里声明一下我不是这几个项目公司内部人员，之所以录视频和写博客也是喜欢与人分享和学习而已，最终所有的代码肯定会上传的，只不过会要等全部的效果以及设计模式搞完。在这里感谢内涵段子这个项目，感谢那些提供帮助的博客牛人，希望有一天也能和你们一样。

　　

　　部分人看了视频的反馈某些地方没讲的很细，首先这肯定是我的问题，但是有很多东西其实是基础，比如我们用到了属性动画很多地方用到了canvas画图如果没怎么接触过可能会有点难度，我到后期也会去录制一些基础的视频，不过要等博客的访问量到达一定的数量，自己也需要去沉淀。

　　

　　今天我们就来写一个相对简单的效果，就是仿淘宝确定收货和支付宝转账的自定义密码输入框和键盘。视频地址：http://pan.baidu.com/s/1mhOVT3a

　　

　　



这里写图片描述

2．效果实现　

　　
2.1 实现思路：

　　这个效果主要的实现就是Canvas画图，我们可以去搜搜看看别人怎么实现的，大部分都是自定义控件去绘制，还有一小部分是直接用LinearLayout写死了，直接就是用的代码去控制布局。我们这里使用自定义控件去实现

　　2.1.1 主要涉及到三个部分需要去绘制：背景、分割线、密码圆点

　　2.1.2 继承自谁都可以，最好还是不要继承自View，这样就需要多实现一个onMeasure()方法，这里考虑到可能有些地方不会使用自定义的键盘，所以决定继承EditText。 　　

2.2 绘制：背景、分割线、密码圆点：

　　

　　这里需要使用自定义属性，这个相信大家都比较了解就不做过多的讲解，大概涉及的属性有：背景圆角、背景边框大小、背景边框颜色、分割线大小、分割线颜色、密码圆点的颜色、密码圆点的半径大小。具体的attrs.xml就是： 　　

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="PasswordEditText">
<!-- 密码的个数 -->
<attr name="passwordNumber" format="integer"/>
<!-- 密码圆点的半径 -->
<attr name="passwordRadius" format="dimension" />
<!-- 密码圆点的颜色 -->
<attr name="passwordColor" format="color" />
<!-- 分割线的颜色 -->
<attr name="divisionLineColor" format="color" />
<!-- 分割线的大小 -->
<attr name="divisionLineSize" format="color" />
<!-- 背景边框的颜色 -->
<attr name="bgColor" format="color" />
<!-- 背景边框的大小 -->
<attr name="bgSize" format="dimension" />
<!-- 背景边框的圆角大小 -->
<attr name="bgCorner" format="dimension"/>
</declare-styleable>
</resources>

　　接下来我们就需要去绘制了，首先获取自定义属性，然后在onDraw()中去绘制

/**
* Created by Darren on 2016/12/14.
* Email: 240336124@qq.com
* Description: 密码输入框
*/

public class PasswordEditText extends EditText {
// 画笔
private Paint mPaint;
// 一个密码所占的宽度
private int mPasswordItemWidth;
// 密码的个数默认为6位数
private int mPasswordNumber = 6;
// 背景边框颜色
private int mBgColor = Color.parseColor("#d1d2d6");
// 背景边框大小
private int mBgSize = 1;
// 背景边框圆角大小
private int mBgCorner = 0;
// 分割线的颜色
private int mDivisionLineColor = mBgColor;
// 分割线的大小
private int mDivisionLineSize = 1;
// 密码圆点的颜色
private int mPasswordColor = mDivisionLineColor;
// 密码圆点的半径大小
private int mPasswordRadius = 4;

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

public PasswordEditText(Context context, AttributeSet attrs) {
super(context, attrs);
initPaint();
initAttributeSet(context, attrs);
// 设置输入模式是密码
setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);
// 不显示光标
setCursorVisible(false);
}

/**
* 初始化属性
*/
private void initAttributeSet(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PasswordEditText);
// 获取大小
mDivisionLineSize = (int) array.getDimension(R.styleable.PasswordEditText_divisionLineSize, dip2px(mDivisionLineSize));
mPasswordRadius = (int) array.getDimension(R.styleable.PasswordEditText_passwordRadius, dip2px(mPasswordRadius));
mBgSize = (int) array.getDimension(R.styleable.PasswordEditText_bgSize, dip2px(mBgSize));
mBgCorner = (int) array.getDimension(R.styleable.PasswordEditText_bgCorner, 0);
// 获取颜色
mBgColor = array.getColor(R.styleable.PasswordEditText_bgColor, mBgColor);
mDivisionLineColor = array.getColor(R.styleable.PasswordEditText_divisionLineColor, mDivisionLineColor);
mPasswordColor = array.getColor(R.styleable.PasswordEditText_passwordColor, mDivisionLineColor);
array.recycle();
}

/**
* 初始化画笔
*/
private void initPaint() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
}

/**
* dip 转 px
*/
private int dip2px(int dip) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
dip, getResources().getDisplayMetrics());
}

@Override
protected void onDraw(Canvas canvas) {
int passwordWidth = getWidth() - (mPasswordNumber - 1) * mDivisionLineSize;
mPasswordItemWidth = passwordWidth / mPasswordNumber;
// 绘制背景
drawBg(canvas);
// 绘制分割线
drawDivisionLine(canvas);
// 绘制密码
drawHidePassword(canvas);
}

/**
* 绘制背景
*/
private void drawBg(Canvas canvas) {
mPaint.setColor(mBgColor);
// 设置画笔为空心
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(mBgSize);
RectF rectF = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize);
// 如果没有设置圆角，就画矩形
if (mBgCorner == 0) {
canvas.drawRect(rectF, mPaint);
} else {
// 如果有设置圆角就画圆矩形
canvas.drawRoundRect(rectF, mBgCorner, mBgCorner, mPaint);
}
}

/**
* 绘制隐藏的密码
*/
private void drawHidePassword(Canvas canvas) {
int passwordLength = getText().length();
mPaint.setColor(mPasswordColor);
// 设置画笔为实心
mPaint.setStyle(Paint.Style.FILL);
for (int i = 0; i < passwordLength; i++) {
int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;
canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint);
}
}

/**
* 绘制分割线
*/
private void drawDivisionLine(Canvas canvas) {
mPaint.setStrokeWidth(mDivisionLineSize);
mPaint.setColor(mDivisionLineColor);
for (int i = 0; i < mPasswordNumber - 1; i++) {
int startX = (i + 1) * mDivisionLineSize + (i + 1) * mPasswordItemWidth + mBgSize;
canvas.drawLine(startX, mBgSize, startX, getHeight() - mBgSize, mPaint);
}
}
}

　

　 目前的效果就是点击之后会弹出系统的键盘，实现了基本的效果，接下来我们再加入监听也就说当密码输入完成我们需要回调监听。

　

　



这里写图片描述

　2.2 自定义键盘：

　　接下来我们看看自定义键盘吧，自定义键盘我们可以使用GridView或是RecyclerView去显示，最好还是不要去画了,采用自定义View加载一个layout布局，给每个按钮一个点击事件然后回调出去即可。

/**
* Created by Darren on 2016/12/14.
* Email: 240336124@qq.com
* Description: 自定义键盘
*/

public class CustomerKeyboard extends LinearLayout implements View.OnClickListener {
private CustomerKeyboardClickListener mListener;

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

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

public CustomerKeyboard(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
inflate(context, R.layout.ui_customer_keyboard, this);
setChildViewOnclick(this);
}

/**
* 设置键盘子View的点击事件
*/
private void setChildViewOnclick(ViewGroup parent) {
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
// 不断的递归设置点击事件
View view = parent.getChildAt(i);
if (view instanceof ViewGroup) {
setChildViewOnclick((ViewGroup) view);
continue;
}
view.setOnClickListener(this);
}
}

@Override
public void onClick(View v) {
View clickView = v;
if (clickView instanceof TextView) {
// 如果点击的是TextView
String number = ((TextView) clickView).getText().toString();
if (!TextUtils.isEmpty(number)) {
if (mListener != null) {
// 回调
mListener.click(number);
}
}
} else if (clickView instanceof ImageView) {
// 如果是图片那肯定点击的是删除
if (mListener != null) {
mListener.delete();
}
}
}

/**
* 设置键盘的点击回调监听
*/
public void setOnCustomerKeyboardClickListener(CustomerKeyboardClickListener listener) {
this.mListener = listener;
}

/**
* 点击键盘的回调监听
*/
public interface CustomerKeyboardClickListener {
public void click(String number);
public void delete();
}
}

　
2.3. 自定义密码输入框配套自定义键盘

　　

　　自定义密码输入框写好了，自定义键盘也完成了，最后就是需要把他们两个套在一起。首先密码输入框点击再也不能弹系统键盘，点击键盘的时候需要往密码输入框里面塞密码，还需要删除，所以密码输入框还得提供两个方法

/**
* Created by Darren on 2016/12/14.
* Email: 240336124@qq.com
* Description: 密码输入框
*/

public class PasswordEditText extends EditText {
// 省略之前的代码...
/**
* 添加密码
*/
public void addPassword(String number) {
number = getText().toString().trim() + number;
if (number.length() > mPasswordNumber) {
return;
}
setText(number);
}

/**
* 删除最后一位密码
*/
public void deleteLastPassword() {
String currentText = getText().toString().trim();
if (TextUtils.isEmpty(currentText)) {
return;
}
currentText = currentText.substring(0, currentText.length() - 1);
setText(currentText);
}
}

　2.4. 最后的测试　

/**
* Created by Darren on 2016/12/14.
* Email: 240336124@qq.com
* Description: 自定义键盘和自定义密码输入框测试
*/
public class MainActivity extends Activity implements CustomerKeyboard.CustomerKeyboardClickListener,
PasswordEditText.PasswordFullListener{

private CustomerKeyboard mCustomerKeyboard;
private PasswordEditText mPasswordEditText;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mPasswordEditText = (PasswordEditText) findViewById(R.id.password_et);
mCustomerKeyboard = (CustomerKeyboard) findViewById(R.id.custom_key_board);
// 设置监听
mCustomerKeyboard.setOnCustomerKeyboardClickListener(this);
mPasswordEditText.setOnPasswordFullListener(this);
}

/**
* 键盘数字点击监听回调方法
*/
@Override
public void click(String number) {
mPasswordEditText.addPassword(number);
}

/**
* 键盘删除点击监听回调方法
*/
@Override
public void delete() {
mPasswordEditText.deleteLastPassword();
}

/**
* 密码输入完毕回调方法
*/
@Override
public void passwordFull(String password) {
Toast.makeText(this, "密码填充完毕：" + password, Toast.LENGTH_SHORT).show();
}
}

这里写图片描述

　　最后我们整合到Dialog中就好了，Dialog我们也需要利用Builder设计模式自己去封装通用的效果，因为系统的太过于麻烦，这里就不做介绍我们后面再说吧，具体请看视频讲解：http://pan.baidu.com/s/1mhOVT3a

　　附源码地址：

　　

　　https://github.com/Shenmowen/PasswordEditText