原博:仿微信支付
今天项目中用到该功能 , 借鉴这个自定义的EditText,以下
按我理解的来说,加深对自定义view的理解和使用
在样式上没有太多要求 ,都用系统自带就行
首先画面 如上图所示 由5个正方形组成也可能是长方形,首先定义:
/**
* 宽度
*/
private int mWidth;
/**
* 高度
*/
private int mHeight;
/**
* 密码框
*/
private Rect mRect;
Rect个容器
其实根据需求,我们的框直接是有间距的,所以:
/**
* 间隔
*/
private final int PWD_SPACING = 5;
间隔不是很大,然后是密码位置及大小的确定:
/**
* 密码大小
*/
private final int PWD_SIZE = 5;
/**
* 密码长度
*/
private final int PWD_LENGTH = 5;
密码长度是框的数量 我们定位5位数,然后我们需要2只画笔来分别画出密码框与密码
/**
* 密码画笔
*/
private Paint mPwdPaint;
/**
* 密码框画笔
*/
private Paint mRectPaint;
以上要用的到定义完成后,构造函数中初始化画笔:
public NewEditText(Context context, AttributeSet attrs) {
super(context, attrs);
// 初始化密码画笔
mPwdPaint = new Paint();
mPwdPaint.setColor(Color.BLACK);
mPwdPaint.setStyle(Paint.Style.FILL);
mPwdPaint.setAntiAlias(true);
// 初始化密码框
mRectPaint = new Paint();
mRectPaint.setStyle(Paint.Style.STROKE);
mRectPaint.setColor(Color.LTGRAY);
mRectPaint.setAntiAlias(true);
}
画笔的很多方法不一一描述了,就是颜色,实心空心等常用方法,在有了画笔之后,就可以在画布上画我们想要的东西了:
首先我们要确定这个view的大小:
计算出宽高:
mWidth = getWidth();
mHeight = getHeight();
xml中写死
重新new一个画笔
Paint paint = new Paint();
paint.setColor(Color.WHITE);
canvas.drawRect(0, 0, mWidth, mHeight, paint);
调用drawrect 自行百度
接下来开始计算每个密码框的宽度,我们的高度就是view的高度,所以不用计算,因为宽度与数量有关,所以以下:
// 计算每个密码框宽度
int rectWidth = (mWidth - PWD_SPACING * (PWD_LENGTH - 1)) / PWD_LENGTH;
用xml中定义的宽度-间隔*密码长度-1 / 密码的长度 就是我们单个框的宽度了,
有了宽度我们就可以计算我们需要的个数了:
for (int i = 0; i < PWD_LENGTH; i++) {
int left = (rectWidth + PWD_SPACING) * i;
int top = 2;
int right = left + rectWidth;
int bottom = mHeight - top;
mRect = new Rect(left, top, right, bottom);
canvas.drawRect(mRect, mRectPaint);
}
遍历下我们密码的个数,绘制这个框与4边的距离,底部顶部右部较简单,昨天的距离是单个框与最左边的距离
,有了框之后可以绘制密码了:
// 绘制密码
for (int i = 0; i < mInputLength; i++) {
int cx = rectWidth / 2 + (rectWidth + PWD_SPACING) * i;
int cy = mHeight / 2;
canvas.drawCircle(cx, cy, PWD_SIZE, mPwdPaint);
}
同样是遍历下输入密码的长度
我们需要在这个框内绘制,所以计算出中心坐标,大家可以在纸上画下 ,有点抽象,有了中心坐标 ,定义字体大小后就用画笔画上去即可
,最后到了输入后监听,微信是最后一位输入就开始判断,我们要继承了EditText 所以可以使用
onTextChanged(),这个方法,
@Override protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) { super.onTextChanged(text, start, lengthBefore, lengthAfter); this.mInputLength = text.toString().length(); invalidate(); if ( mOnInputFinishListener != null) { mOnInputFinishListener.onInputFinish(text.toString()); } }
最后写了一个接口将内容放置框中,借口如下
public interface OnInputFinishListener { /** * 密码输入结束监听 * * @param password */ void onInputFinish(String password); } /** * 设置输入完成监听 * * @param onInputFinishListener */ public void setOnInputFinishListener( OnInputFinishListener onInputFinishListener) { this.mOnInputFinishListener = onInputFinishListener; }
在activity中直接调用即可password自己根据需求来使用即可