自定义虚线格式的EditText输入框

来源：互联网发布：淘宝晚礼服推荐编辑：程序博客网时间：2024/06/05 00:57

好久没有写博客，是觉得没有太多的东西可写，今天分享一下，自定义edittext的输入框，效果图如下：

这个效果是一个输入11位手机号的效果图，分为两个步骤实现：

1.画出虚线，确定宽度和高度

2.控制焦点的定位。

虚线并不是一个图片，而是继承了EditText后，画出来的，具体的代码如下：

public class VisitCodeEditText extends EditText {    private Paint paint;    private Paint textPaint;    private int perDashWidth;    private int perGapWidth;    public VisitCodeEditText(Context context) {        super(context);        init(context);    }    public VisitCodeEditText(Context context, AttributeSet attrs) {        super(context, attrs);        init(context);    }    public VisitCodeEditText(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context);    }    private void init(Context context) {        paint = new Paint();        paint.setStrokeWidth(2);        paint.setStyle(Paint.Style.STROKE);        paint.setColor(Color.parseColor("#7386e6"));        textPaint = new Paint();        //设置字体大小        textPaint.setTextSize(Util.dip2px(context,24));        //设置字体类型        textPaint.setTypeface(Typeface.DEFAULT);        textPaint.setColor(getResources().getColor(R.color.input_visit_text_color));        //每一个虚线的宽度,1只是代表一个字符占的宽度，用什么字符都可以        perDashWidth = (int) getTextLength("1");        //每两个虚线之间的空格的宽度        perGapWidth = (int) getTextLength("  ");    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int specMode = MeasureSpec.getMode(widthMeasureSpec);        //计算宽高，设置        int width = perDashWidth * 11 + perGapWidth * 10 + 20;        if (specMode == MeasureSpec.EXACTLY || specMode == MeasureSpec.AT_MOST) {            setMeasuredDimension(width, Util.dip2px(getContext(), 40));        }    }    @Override    protected void onDraw(Canvas canvas) {        int start = 10;        for (int i = 0; i < 11; i++) {            //画出每一个虚线            canvas.drawLine(start, getHeight() - 5, start + perDashWidth, getHeight() - 5, paint);            start += perDashWidth + perGapWidth;        }        //必须在此方法之前画，否则将被覆盖掉        super.onDraw(canvas);    }    //获取文字的宽度    private float getTextLength(String text) {        // 使用panit获取文字的宽度        float textLength = textPaint.measureText(text);        return textLength;    }}

这里面的代码比较完整，不在过多介绍。

 接下来就是控制焦点定位的过程，因为在绘制的样式过程中，没两个虚线之间加入了一个空格，那么当你输入完字符后，焦点会显示空格处，不会是下一个要输入的字符处，这就比较尴尬了，而且也非常不方便，需要做一下处理，主要就是使用Edittext的setSelection(int index)这个方法对焦点进行定位。

 定位这个事情是在TextWatcher中实现的，如下：

public class InputVisitCodeTextWatcher implements TextWatcher {    private EditText mEditText;    //是否按了回退键    private boolean keyDel;    //临时字符串变量    private String tempStr;    public static final String CH = "  ";    public InputVisitCodeTextWatcher(EditText mEditText) {        this.mEditText = mEditText;    }    @Override    public void beforeTextChanged(CharSequence s, int start, int count, int after) {    }    @Override    public void onTextChanged(CharSequence s, int start, int before, int count) {        String str = s.toString();        if (tempStr != null && tempStr.length() > str.length()) {            keyDel = true;        } else {            keyDel = false;        }        if (!keyDel) {            if (str.length() == 1) {                setCustomSelection(s + CH);                return;            } else if (str.length() == 2) {                //按回退键后，再次输入字符                setCustomSelection(str.substring(0, 1) + CH + str.substring(1));                return;            } else if (str.length() == 4) {                setCustomSelection(s + CH);                return;            } else if (str.length() == 5) {                //按回退键后，再次输入字符                setCustomSelection(str.substring(0, 4) + CH + str.substring(4));                return;            } else if (str.length() == 7) {                setCustomSelection(s + CH);            } else if (str.length() == 8) {                //按回退键后，再次输入字符                setCustomSelection(str.substring(0, 7) + CH + str.substring(7));                return;            } else if (str.length() == 10) {                setCustomSelection(s + CH);                return;            } else if (str.length() == 11) {                //按回退键后，再次输入字符                setCustomSelection(str.substring(0, 10) + CH + str.substring(10));                return;            } else if (str.length() == 13) {                setCustomSelection(s + CH);                return;            } else if (str.length() == 14) {                //按回退键后，再次输入字符                setCustomSelection(str.substring(0, 13) + CH + str.substring(13));                return;            } else if (str.length() == 16) {                setCustomSelection(s + CH);                return;            } else if (str.length() == 17) {                //按回退键后，再次输入字符                setCustomSelection(str.substring(0, 16) + CH + str.substring(16));                return;            } else if (str.length() == 19) {                setCustomSelection(s + CH);                return;            } else if (str.length() == 20) {                //按回退键后，再次输入字符                setCustomSelection(str.substring(0, 19) + CH + str.substring(19));                return;            } else if (str.length() == 22) {                setCustomSelection(s + CH);                return;            } else if (str.length() == 23) {                //按回退键后，再次输入字符                setCustomSelection(str.substring(0, 22) + CH + str.substring(22));                return;            } else if (str.length() == 25) {                setCustomSelection(s + CH);                return;            } else if (str.length() == 26) {                //按回退键后，再次输入字符                setCustomSelection(str.substring(0, 25) + CH + str.substring(25));                return;            } else if (str.length() == 28) {                setCustomSelection(s + CH);                return;            } else if (str.length() == 29) {                //按回退键后，再次输入字符                setCustomSelection(str.substring(0, 28) + CH + str.substring(28));                return;            }//            Log.e("zouguibao", "length = " + str.length());        } else {            if (str.length() == 30 || str.length() == 29) {                setCustomSelection(str.substring(0, 28));                return;            } else if (str.length() == 27 || str.length() == 26) {                setCustomSelection(str.substring(0, 25));                return;            } else if (str.length() == 24 || str.length() == 23) {                setCustomSelection(str.substring(0, 22));                return;            } else if (str.length() == 21 || str.length() == 20) {                setCustomSelection(str.substring(0, 19));                return;            } else if (str.length() == 18 || str.length() == 17) {                setCustomSelection(str.substring(0, 16));                return;            } else if (str.length() == 15 || str.length() == 14) {                setCustomSelection(str.substring(0, 13));                return;            } else if (str.length() == 12 || str.length() == 11) {                setCustomSelection(str.substring(0, 10));                return;            } else if (str.length() == 9 || str.length() == 8) {                setCustomSelection(str.substring(0, 7));                return;            } else if (str.length() == 6 || str.length() == 5) {                setCustomSelection(str.substring(0, 4));                return;            } else if (str.length() == 3 || str.length() == 2) {                setCustomSelection(str.substring(0, 1));                return;            }//            Log.e("zouguibao", "back to word index = " + str.length());        }        tempStr = mEditText.getText().toString();    }    @Override    public void afterTextChanged(Editable s) {    }    private void setCustomSelection(String content) {        if (!TextUtils.isEmpty(content)) {            mEditText.setText(content);            mEditText.setSelection(mEditText.getText().length());        }    }}
以上的两步做完基本就算是完成了，接下来是使用时的一些介绍：

<xx.VisitCodeEditText    android:id="@+id/input_visit_code_view"    android:layout_width="match_parent"    android:layout_height="40dp"    android:background="@null"    android:inputType="number"    android:maxLength="31"//这个是要输入的字符加上空格一共可输入的字符数    android:paddingLeft="10px"    android:textColor="@color/code_click_color"    android:singleLine="true"    />
引用时：

visitCodeEditText.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 24f);//这个必须和自定义的类里面设置的字体大小一致，否则效果会不一致InputVisitCodeTextWatcher inputVisitCodeTextWatcher = new InputVisitCodeTextWatcher(visitCodeEditText);visitCodeEditText.addTextChangedListener(inputVisitCodeTextWatcher);
基本上就这些啦，如果更好的想法，欢迎交流！

阅读全文

0 0