【Android】自定义控件实现自动补齐邮箱后缀的输入框

自定义控件实现自动补齐邮箱后缀输入框

前言

前段时间项目中需要实现一个能够自动补齐，并判断邮箱格式是否正确的控件，在GitHub上学习了几位大神的思路，自己结合需求，实现了一下，写的不好的地方，欢迎大家留言指教。先看一下效果：


我们可以看到，本文实现的邮箱输入框主要做了以下几件事：

1. 自定义输入框的样式，包括背景色、hint颜色、字体颜色、输入框形状等。
2. 实时校验输入的邮箱格式是否正确。
3. 校验结果正确，根据校验结果在输入框右侧显示不同的图片以提示用户。
4. 如果用户输入的内容可以自动补齐邮箱后缀，帮助用户补齐。当触摸控件外部，把补齐内容写入edittext。

思路

下面我们对每点需求进行分析：

需求1：可以通过常用的自定义控件实现，这点在接下来的代码中呈现。
需求2：实时校验，第一反应应该联想到给我们的EditText添加一个监听来监听输入的内容，在afterTextChanged里面使用正则表达式对输入内容进行校验，这个接下来在代码中呈现。
需求3：我们知道EditText以及TextView其实自带一个setCompoundDrawables()方法,这个方法可以给我们的EditText/TextView的上下左右设置一个图片，但是使用这个方法有一个弊端就是只能放一张图片，我们在实现需求4的时候使用了这个方法来在输入内容的尾部画出我们要补全的内容，所以这里不再使用这个方法设置一个用来提示用户的图片。转而考虑实现一个自定义ViewGroup，在ViewGroup的右边放一个imageview来呈现结果。
需求4：实时校验的结果取得后，我们希望讲我们的补齐内容以类似于hint的灰色文字的形式呈现在输入内容的右边，简单的设置文本不能满足这个需求，所以考虑使用画笔画出我们想要补齐的文字，再通过EditText的setCompoundDrawables方法将我们画出的结果放在右边。

实现

实力分（bi）析（bi）了一波，两横一竖就是干！上代码：

/**
 * 自定义一个线性布局
 * @创建人: lingeng
 */
public class AutoCompleteEmailView extends LinearLayout implements TextWatcher, View.OnFocusChangeListener, View.OnTouchListener {
   

    ImageView iv_check;//右侧显示校验结果的ImageView
    LinearLayout ll_container;//整个控件的线性布局
    EditText et_email;//我们的输入框
    Drawable ok;//校验正确图片
    Drawable error;//错误图片
    String hint;
    int txt_color;
    Drawable bg_drawable;
    int hint_color;
    float txt_size;

    private Bitmap mBitmap;
    private int mHeight;
    private int mWidth;
    private Paint mPaint;
    private int mBaseLine;
    private Canvas mCanvas;
    private BitmapDrawable mDrawable;
    private boolean mFlag;//标记是否需要绘制空文本：false不需要，true需要
    private String mAddedText;
    private float mPaddingStart;
    private float mPaddingEnd;

    //定义默认资源，当我们不去自定义这些属性的时候，有一个默认的值

    final Drawable default_bg_color = getContext().getResources().getDrawable(R.drawable.edit_3dffffff);//整个控件的背景色
    final int default_txt_color = getContext().getResources().getColor(R.color.beijingbai);//输入字颜色
    final int default_hint_color = getContext().getResources().getColor(R.color.hint_txt_color);//hint颜色
    final int default_txt_size = getContext().getResources().getDimensionPixelSize(R.dimen.step_hint_size_small);
    final Drawable default_ok_res = getContext().getResources().getDrawable(R.drawable.icon_edit_v_ok);//实时校验通过图标
    final Drawable default_err_res = getContext().getResources().getDrawable(R.drawable.icon_edit_v_err);//实时校验错误图标
    final float default_content_padding_start = 5;
    final float default_content_padding_end = 10;
    /**
     * 正则表达式：验证邮箱
     */
    public static final String REGEX_EMAIL = "\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*";

    /**
     * 常用邮箱
     */
    final String[] emails = new String[]{
  "@gmail.com", "@yahoo.com", "@hotmail.com", "@aol.com"};

    /**
    *这个接口用来返回我们的edittext，以便外部可以获取我们的输入框的内容
    */
    public EditText getEt_email() {
        return et_email;
    }

    public AutoCompleteEmailView(Context context) {
        super(context);
           }

    //在这个构造方法中，我们获取