Android自定义 edittext,自定义 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: 有帮助的话: 喜欢、评论、转发，动一动你的小手让更多的人知道！关注 帅比-杨。