自定义控件——SmartEditText，一个灵活好玩的EditText

转载请注明出处，谢谢~~

控件还有很大的优化和提升控件，欢迎star和pr~！

之前做的一个控件，一直没有写一篇相关的博客，今天打算提笔，写下来。不多说，一贯风格，有图有真相。





控件之始，当然是一些初始化的操作

private void init(){
setWillNotDraw(false);
paint = new Paint();
paint.setFlags(Paint.ANTI_ALIAS_FLAG);//消除锯齿
tPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
tPaint.setTextSize(dp2px(hintTextSize));
super.setPadding((int)dp2px(paddingLeft), (int)dp2px(paddingTop),
(int)dp2px(paddingRight), (int)dp2px(paddingBottom) );
mainTextSize = getTextSize();
}

这里主要是对画笔和一些padding的设定

然后在onMeasure里记录了宽高

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getWidth();
height = getHeight();
}

之后主要的操作就是在OnDraw()里，我们看下代码：

@Override
protected void onDraw(Canvas canvas) {
if (!hasFocus()) {
drawDefaultLineAndText(canvas);
}else {
animateLableOut(canvas);
}
if(ratioOut >=0 && ratioOut <=1  || ratioIn >=0 && ratioIn <= 1) {
invalidate();
}
super.onDraw(canvas);
}

这里首先用hasFocus()方法来判断焦点，根据不同的焦点执行不同的绘制逻辑，然后用ratioOut和ratioIn这两个参数控制重绘时机。我们首先看下当没有获取焦点时的绘制逻辑：

private void drawDefaultLineAndText(Canvas canvas) {
ratioOut = 0;
paint.setColor(defaultLineColor);
//      tPaint.setColor(defaultTextColor);
canvas.drawRect(dp2px(lineLeft), height-dp2px(lineHeight), width-dp2px(lineLeft), height, paint);
ratioIn -= INCREMENT;
if (ratioIn <= 0) {
ratioIn = 0;
ratioOut = ratioIn;
}
paint.setColor(endLineColor);
if (ratioIn == 0) {
canvas.drawRect(dp2px(lineLeft), height-dp2px(lineHeight), dp2px(lineLeft), height, paint);//解决一些手机上会绘制0-left的横线
}else {
canvas.drawRect(dp2px(lineLeft), height-dp2px(lineHeight), ratioIn*((float)(width-dp2px(lineLeft))), height, paint);
}
if (TextUtils.isEmpty(this.getText().toString().trim())) {
if (isLableOut) {
if (ratioIn == 0) {
tPaint.setColor(defaultTextColor);
canvas.drawText(hintText, dp2px(paddingLeft), (float)(height-dp2px(textMarginTop)), tPaint);
}else {
tPaint.setColor(endTextColor);
canvas.drawText(hintText, dp2px(paddingLeft), (float)(height-dp2px(textMarginTop))-(ratioIn*(mainTextSize + dp2px(10f))), tPaint);
}
}else{
if (ratioIn == 0) {
tPaint.setColor(defaultTextColor);
canvas.drawText(hintText, dp2px(paddingLeft), (float)(height-dp2px(textMarginTop)), tPaint);
}
}
}else{
if (ratioIn == 0) {
tPaint.setColor(defaultTextColor);
}else {
tPaint.setColor(endTextColor);
}
canvas.drawText(hintText, dp2px(paddingLeft), (height-(cursorSize + dp2px(textMarginTop))), tPaint);
}
}

大致讲下这里，具体的思路可以看下代码，全部代码会在文章最后给出。

首先，ratioOut和ratioIn是控制绘制的机制，这两个是一直在变的。首先在没有获取焦点的时候，会绘制一条默认的线和提示文字，提示文字在线的左边，但是如果EditText里面有用户输入的文字的话，提示文字就不会在线上绘制，就会在EditText的上方绘制。

然后贴下当获取焦点时绘制的代码：

private void animateLableOut(Canvas canvas) {
ratioOut += INCREMENT;
paint.setColor(defaultLineColor);
canvas.drawRect(dp2px(lineLeft), height-dp2px(lineHeight), width-dp2px(lineLeft), height, paint);
paint.setColor(endLineColor);
tPaint.setColor(endTextColor);
if (ratioOut >= 1) {
ratioOut = 1;
ratioIn = ratioOut;
}
canvas.drawRect(dp2px(lineLeft), height-dp2px(lineHeight), ratioOut*((float)(width-dp2px(lineLeft))), height, paint);
if (TextUtils.isEmpty(this.getText().toString().trim())) {
//          canvas.drawText(hintText, dp2px(paddingLeft), (float)(height-dp2px(textMarginTop))-(ratioOut*(mainTextSize + dp2px(10f))), tPaint);
canvas.drawText(hintText, dp2px(paddingLeft), (float)(height-dp2px(textMarginTop))-(ratioOut*(cursorSize)), tPaint);
}else {
//          canvas.drawText(hintText, dp2px(paddingLeft), (height-(mainTextSize + dp2px(22.5f))), tPaint);
canvas.drawText(hintText, dp2px(paddingLeft), (height-(cursorSize + dp2px(textMarginTop))), tPaint);
//          ratio = 1.1f;//阻止重绘
}

isLableOut = true;
}

当获取焦点时，会对线和提示文字做一个重绘操作，当然，也要判断当前EditText是否有文字输入。

总体的逻辑大致如此，具体的细节看代码即可。希望这篇文章能对大家有些帮助。

控件还有很大的优化和提升控件，欢迎star和pr~！

代码地址：eclipse版本github代码下载地址

Android studio 版本github代码下载地址