EditText在项目中有不同的需求,输入验证码,或者输入密码的情况,这些需要自定义EditText 的一些背景框例如下面
思路:
1.隐藏掉EditText 录入的文字
2.绘确定需要绘制背景框的个数,计算好间距,大小,并绘制背景框
3.获取到录入的文字,并重新绘制在界面上
代码:
public class BorderEditTextextends AppCompatEditText {
private PaintmPaint;
private ContextmContext;
private int count =6;
private int width =44;//默认单位dp
private int margin =8;
private int radius =2;
public BorderEditText(Context context) {
this(context, null);
}
public BorderEditText(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.BorderEditText);
count = array.getInt(R.styleable.BorderEditText_border_Count, 6);
width = array.getInt(R.styleable.BorderEditText_border_Width, 44);
margin = array.getInt(R.styleable.BorderEditText_border_Margin, 8);
array.recycle();
mContext = context;
initView();
}
private void initView() {
width = AppTools.dp2px(mContext, width);
margin = AppTools.dp2px(mContext, margin);
/**
* 这个可以自定义属性 放在资源文件中设置 懒的加了
*/
radius = AppTools.dp2px(mContext, 10);
mPaint =new Paint();
mPaint.setColor(Color.parseColor("#eeeeee"));
mPaint.setStrokeWidth(AppTools.dp2px(mContext, 1));
mPaint.setAntiAlias(true);
mPaint.setDither(true);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int _width =width *count + AppTools.dp2px(mContext, (count -1) *8 +4);
super.onMeasure(MeasureSpec.makeMeasureSpec(_width, MeasureSpec.EXACTLY), heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.parseColor("#eeeeee"));
/**
* 此处可以自己绘制 想要的效果图
*/
for (int a =0; a
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
canvas.drawRoundRect(a *width + a *margin, 0, (a +1) *width + a *margin, getMeasuredHeight(), radius, radius, mPaint);
}else {
canvas.drawRoundRect(new RectF(a *width + a *margin, 0, (a +1) *width + a *margin, getMeasuredHeight()), radius, radius, mPaint);
}
}
mPaint.setColor(getResources().getColor(R.color.colorNormalIndecator));
mPaint.setTextSize(getTextSize());
mPaint.setStyle(Paint.Style.FILL);
/**
* 计算文字的宽高
*/
Rect textRect =new Rect();
float v =mPaint.measureText("9");
mPaint.getTextBounds("9", 0, 1, textRect);
String trim = getText().toString().trim();
if (!TextUtils.isEmpty(trim)) {
for (int a =0; a < trim.length(); a++) {
canvas.drawText(String.valueOf(trim.charAt(a)), a *width + a *margin +width /2 - v /2, getMeasuredHeight() /2 + textRect.height() /2, mPaint);
}
}
}
@Override
protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
super.onTextChanged(text, start, lengthBefore, lengthAfter);
invalidate();
}
}
定义的styleable
<declare-styleable name="BorderEditText">
<attr name="border_Count" format="integer"/>
<attr name="border_Width" format="integer"/>
<attr name="border_Margin" format="integer"/>
</declare-styleable>
AppTools 类 中的方法 dp2px
public class AppTools{
public static int dp2px(Context context,int value){
return (int) (context.getResources().getDisplayMetrics().density * value +0.5f);
}
}
使用：
<wedgit.BorderEditText
android:layout_width="wrap_content"
android:layout_height="38dp"
android:background="@null"
android:inputType="number"
android:maxLength="6"
android:textSize="23sp"
app:border_Width="38" />
到这里就全部完成了.主要是绘制背景框和绘制文字
