自定义 View 之 EditText -[Android_YangKe]

尊重劳动者创作，转发请注明出处

首先看本文实现的效果。

yangke.png

yangke.png

一个自定义 EditText 实现了删除、密码明文切换功能。老实说 Android 已经为我们提供了很多可供直接使用的组件，比如：TextView、EditText、ListView 等。现实中原生组件往往都是丑陋拿不出手的，为了提高用户体验往往需要我们对原生控件进行强化。

首先什么是 EditText，我们看看官方的解释：

EditText is a thin veneer over TextView that configures itself to be editable.

This is supposed to be a very thin veneer over TextView.Do not make any changes here that do anything that a TextView with a key listener and a movement method wouldn't do!

简单来说 EditText 是继承 TextView 且具有编辑功能的一个组件，从 UI 上看 EditText 就是一个输入框支持手机号、邮箱、文本、密码等常用格式。

上面已经对 EditText 进行了了解，下面我们进入今天的主题 EditTextS。 EditTextS 从名字上看顾名思义这是 EditText 的加强版，对，没有错，这是基于 EditText 进行的拓展，在 EditText 的基础上新增了点击右侧清除图标进行文本框的清空，也可在此基础上 xml 文件中加上app:is_pwd="true"即可实现点击右侧图标密码明文的切换（两种方式的切换只需一行代码）。

1>我们看下如何初始化组件的属性

public EditTextS(Context context) { super(context); initView(null); }

public EditTextS(Context context, AttributeSet attrs) { super(context, attrs); initView(attrs); }

public EditTextS(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initView(attrs); }

private void initView(AttributeSet attrs) {
    if (attrs == null)
        return;

    /** 清空密码模式*/
    if (pwdModel(attrs))
        return;

    /** 清空文本模式 */
    clearTextModel();
}

细心的同学一定会发现每个构造方法中都调用了 initView(xxx) 函数，顾名思义对于继承控件（EditTextS 继承了 EditText），属性的初始化都是在构造方法中完成的。下面继续看：

private boolean pwdModel(AttributeSet attrs) {
    mIsPwdModel = getContext().obtainStyledAttributes(attrs, EditTextS_RES).getBoolean(R.styleable.EditTextS_RES_is_pwd, false);
    if (mIsPwdModel) {
        mRightIcon = getContext().getResources().getDrawable(R.drawable.browse);
        setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
        setCompoundDrawablesWithIntrinsicBounds(null, null, mRightIcon, null);
        setCompoundDrawablePadding(mDrawablePadding);
        return true;
    }
    return false;
}

private void clearTextModel() {
    mRightIcon = getContext().getResources().getDrawable(R.mipmap.delete);
    addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {}
        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {}
        @Override
        public void afterTextChanged(Editable s) {
            iniDelIcon();
        }
    });
    iniDelIcon();
}

private void iniDelIcon() {
    if (length() < 1)
        setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
    else
        setIcon(mRightIcon);

}

这里 pwdModel() 函数主要是对密码模式的一个逻辑处理 clearTextModel() 函数是对清空文本框的一个处理。

• pwdModel：主要对右侧密码图标的初始化以及图标 padding 控制。
• clearTextModel：主要对右侧删除图标的初始化和padding 控制。

到这里一些自定义 view 已经完成了一小半，下面我们加上点击事件，来完成收尾工作。

 /** 图标事件处理 */
@Override
public boolean onTouchEvent(MotionEvent event) {
    int eventX = (int) event.getRawX();
    int eventY = (int) event.getRawY();
    Rect rect = new Rect();
    getGlobalVisibleRect(rect);
    // "-55" 用来调整点击图标的坐标，图标过大或过小可以微调此值
    rect.left = rect.right - 38;

    // 密码模式
    if (mIsPwdModel && event.getAction() == MotionEvent.ACTION_UP && rect.contains(eventX, eventY)) {
        if (eyeIsClick == true) {
            setIcon(getContext().getResources().getDrawable(R.drawable.edit));
            setInputType(InputType.TYPE_CLASS_TEXT);
            eyeIsClick = false;
        } else {
            this.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
            setIcon(getContext().getResources().getDrawable(R.drawable.browse));
            eyeIsClick = true;
        } setSelection(getText().length());
        
    // 清空模式
    } else {
        if (event.getAction() == MotionEvent.ACTION_UP && rect.contains(eventX, eventY)) {
            // Log.e(EditTextS.class.getSimpleName(), "l= " + rect.left + "; r= " + rect.right);
            setText("");
        }
    }
    return super.onTouchEvent(event);
}

private void setIcon(Drawable mDeleIcon) {
    setCompoundDrawablesWithIntrinsicBounds(null, null, mDeleIcon, null);
    setCompoundDrawablePadding(mDrawablePadding);
}

到这里核心代码已经完全贴出，onTouchEvent() 函数主要是对用户触摸屏幕的区域、触摸的状态 输入框的模式进行不同的处理，代码里面都有注释 一步一步分析，没有什么很难的东西，最后放出动态图，看效果。

yangke.gif

图片里上面两个是同一个控件，唯一的区别就是一行代码的区别，具体可以参考 demo 进行编写，好意见欢迎提出。

OK，自定义 View 介绍完了，了解到自定义控件实现有三种方式，分别是：组合控件、自绘控件和继承控件。这只是其中一种实现方式，后续有时间我会持续进行更新，喜欢就关注，帅比杨不只帅还有才华。

ps: 有帮助的话: 喜欢、评论、转发，动一动你的小手让更多的人知道！关注 帅比-杨。

dowload EditTexts