自定义View——仿支付宝支付弹窗界面

上面这个是采用自定view方式实现的一个仿支付宝支付弹窗的效果；

1、自定义view并初始化自定义属性

public class PasswordEditText extends EditText{
//一个密码所占的宽度
private int mPasswordItemWidth;
//密码的个数默认6个
private int mPasswordNumder=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);
initAttributeSet(context, attrs);

}
/**
* 初始化属性
* @param context
* @param attrs
*/
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,dip2px(mBgCorner));
//获取颜色
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();
}
}

继承自EditText的话可以用使用EditText中的一些属性和方法，在初始化完自定义属性后要记得调用recycle()方法进行回收；

2、初始化画笔

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

在第三个构造函数中调用就可以了，

3、在onDraw()方法中进行绘制

在绘制的时候先要计算出一个密码所占的宽度

//一个密码的宽度
private int mPasswordItemWidth=(getWidth()-2*mBgSize-(mPasswordNumder-1)*mDivisionLineSize)/mPasswordNumder;

一个密码的宽度=(整个输入框的宽度-(最左边边框的宽度+最右边边框的宽度)-(密码个数-1)*密码之间分割线的宽度)/密码的个数

获取到一个密码的宽度后就可以进行绘制；

3.1、绘制密码输入框的背景

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

没有圆角的话，就调用canvas.drawRect(rect,mPaint);绘制矩形，第一个参数是RectF对象，第二个参数是Paint(画笔)；

/* @param left   The X coordinate of the left side of the rectangle
* @param top    The Y coordinate of the top of the rectangle
* @param right  The X coordinate of the right side of the rectangle
* @param bottom The Y coordinate of the bottom of the rectangle
*/
public RectF(float left, float top, float right, float bottom) {
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
}

RectF源码对四个参数都有说明；

left=输入框边框的大小；
top=输入框边框的大小；
right=getWidth()-输入框边框的大小；
bottom=getHeight()-输入框边框的大小;

如果有圆角的话，就调用canvas.drawRoundRect(rect,mBgCorner,mBgCorner,mPaint);绘制圆角矩形，

/**
* @param rect  The rectangular bounds of the roundRect to be drawn
* @param rx    The x-radius of the oval used to round the corners
* @param ry    The y-radius of the oval used to round the corners
* @param paint The paint used to draw the roundRect
*/
public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint) {
drawRoundRect(rect.left, rect.top, rect.right, rect.bottom, rx, ry, paint);
}

drawRoundRect源码也对要传入的参数做了说明；

3.2、绘制密码输入框之间的分割线

private void drawDivisionLine(Canvas canvas) {
mPaint.setStrokeWidth(mDivisionLineSize);
mPaint.setColor(mDivisionLineColor);
for (int i=0;i<mPasswordNumder-1;i++){
int startX=mBgSize+(i+1)*mPasswordItemWidth+i*mDivisionLineSize;
int startY=mBgSize;
int endX=startX;
int endY=getHeight()-mBgSize;
canvas.drawLine(startX,startY,endX,endY,mPaint);

}
}

在绘制分割线的时候需要注意，假设密码的个数是6，只需要绘制5个分割线，调用canvas.drawLine(startX,startY,endX,endY,mPaint);方法进行绘制，

/**
* @param startX The x-coordinate of the start point of the line
* @param startY The y-coordinate of the start point of the line
* @param paint  The paint used to draw the line
*/
public void drawLine(float startX, float startY, float stopX, float stopY,
@NonNull Paint paint) {
native_drawLine(mNativeCanvasWrapper, startX, startY, stopX, stopY, paint.getNativeInstance());
}

上面是drawLine方法的源码，第一个参数是X的起始位置，第二个参数是Y的起始位置，第三个参数是X的终点位置，第四个参数是Y的终点位置；

startX=输入框边框的宽度+(每个密码的宽度)*当前绘制的位置(当前绘制第几个)+单个分割线的宽度*当前绘制的位置(当前绘制第几个)；
startY=输入框边框的宽度；
stopX=startX；
stopY=getHeight()-输入框边框的宽度；

3.3、绘制密码

private void drawPassword(Canvas canvas) {
//设置实心样式
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mPasswordColor);
String text=getText().toString().trim();
int passwordLength=text.length();
for(int i=0;i<passwordLength;i++){
int cx=mBgSize+i*mPasswordItemWidth+i*mDivisionLineSize+mPasswordItemWidth/2;
int cy=getHeight()/2;
canvas.drawCircle(cx,cy,mPasswordRadius,mPaint);
}
}

在绘制密码黑圆点之前先要获取到输入的字符的长度，根据长度遍历该字符串调用canvas.drawCircle(cx,cy,mPasswordRadius,mPaint);进行绘制，

drawCircle()源码：

/**
* @param cx     The x-coordinate of the center of the cirle to be drawn
* @param cy     The y-coordinate of the center of the cirle to be drawn
* @param radius The radius of the cirle to be drawn
* @param paint  The paint used to draw the circle
*/
public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint) {
native_drawCircle(mNativeCanvasWrapper, cx, cy, radius, paint.getNativeInstance());
}

第一个参数是X的位置，第二个参数是Y的位置，第三个参数是圆的半径，第四个参数是画笔；

cx=输入框边框的宽度+单个分割线的宽度*当前绘制哪一个+密码框的宽度*当前绘制哪一个+密码框的宽度/2;
cy=getHeight()/2;

到这里输入框背景、分割线、密码都已经绘制完毕了，在这里面添加一个密码添加和删除的方法；

/**
* 设置密码
* @param numder
*/
public void addPassword(String numder) {
//把之前的密码取出来
String password=getText().toString().trim();
//判断密码的长度，不能超过当前设置的密码的个数
if(password.length()>=mPasswordNumder){
return;
}
//密码叠加
password+=numder;
setText(password);
}

/**
* 删除最后一位密码
*/
public void deleteLastPassword() {
//把之前的密码取出来
String password=getText().toString().trim();
//判断当前密码是否为空
if(TextUtils.isEmpty(password)){
return;
}
password=password.substring(0,password.length()-1);
setText(password);
}

剩下还有键盘没有弄好，键盘的实现是在xml布局里面写好，添加到LinearLayout中；

4、输入键盘的实现

public class CustomerKeyboard extends LinearLayout implements View.OnClickListener {
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);
}
}

添加进来后，设置相应的点击事件；

/**
* 设置点击事件
* @param view
*/
private void setItemClickListener(View view) {
if(view instanceof ViewGroup){
ViewGroup viewGroup= (ViewGroup) view;
int childCount = viewGroup.getChildCount();
for (int i=0;i<childCount;i++){
View childView = viewGroup.getChildAt(i);
setItemClickListener(childView);
}
}else{
view.setOnClickListener(this);
}
}

@Override
public void onClick(View v) {
if(v instanceof TextView){
//点击的是文本
String number=((TextView) v).getText().toString().trim();
if(mListener!=null&&number.length()!=0){
mListener.click(number);
}
}
if(v instanceof ImageView){
//点击的是删除
if(mListener!=null){
mListener.delete();
}
}
}

差不多效果就实现了，在点击的地方调用就可以了；

//弹出dialog输入框
AlertDialog dialog=new AlertDialog.Builder(this).
setContentView(R.layout.activity_main).
fullWith().
formBottom(true).
setCancelable(true).
show();
passwordEditText=dialog.getView(R.id.password);
mCustomerKeyboard=dialog.getView(R.id.customer_keyboard);

mCustomerKeyboard.setOnCustomerKeyboardClickListener(this);
passwordEditText.setEnabled(false);
passwordEditText.setOnPasswordFullListener(this);

源码地址：

http://download.csdn.net/download/wangwo1991/9894467