Android开源框架PowerfulViewLibrary——PowerfulEditText的介绍
很高兴自己写的前两篇博客都得到了郭霖（人称郭神）的认可，答应帮我发布在他的微信公众号上，这让我更有决心写好博客。我宁愿一个月一更，也不愿滥竽充数，写博客一方面是为了分享自己的技术和经验，另一方面是为了可以互相学习、交流和进步。最近决定开发一个开源框架，叫做PowerfulViewLibrary,也就是功能强大的View库，主要是为了方便开发，封装一些常用的控件，下面是相关介绍和使用。
PowerfulEditText具有的功能
1.自带清除文本功能
PowerfulEditText自带清除文本功能，只需在布局文件该View属性中添加funcType,指定为canClear,就可以自带清除文本功能，使用如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<com.chaychan.viewlib.PowerfulEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:funcType="canClear"
/>
</LinearLayout>
运行后，效果如下：
上图所示的删除图标是默认的，当然也可以指定右侧删除按钮的图标，只需添加多drawableRight属性，这里建议使用一个selector，分别为普通状态和按压状态设置一张图片，这样当按压图标的时候，会有一种按压的状态，selector的编写如下：
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="按压后的图标" />
<item android:drawable="普通状态的图标" />
</selector>源码分析：
public class PowerfulEditText extends EditText {
/**普通类型*/
private static final int TYPE_NORMAL = -1;
/**自带清除功能的类型*/
private static final int TYPE_CAN_CLEAR = 0;
/**自带密码查看功能的类型*/
private static final int TYPE_CAN_WATCH_PWD = 1;
public PowerfulEditText(Context context) {
this(context, null);
}
public PowerfulEditText(Context context, AttributeSet attrs) {
//这里构造方法也很重要，不加这个很多属性不能在XML里面定义
this(context, attrs, android.R.attr.editTextStyle);
}
public PowerfulEditText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
ta = context.obtainStyledAttributes(attrs, R.styleable.PowerfulEditText);
funcType = ta.getInt(R.styleable.PowerfulEditText_funcType, TYPE_NORMAL);
...
init();
}
}
PowerfulEditText继承于EditText,这里定义了三种类型，分别是普通类型、自带清除功能类型以及自带查看密码的功能，其中第二个构造方法，也就是只有两个参数的构造方法，里面调用该类的第三个构造方法（带三个参数的构造方法），需要传多一个int类型的参数，这里不能像以前定义其他View的时候那样直接传一个0，而是要传android.R.attr.editTextStyle，否则很多属性不能在XML里面定义。自己的逻辑操作init()方法，在第三个构造方法调用即可。
private void init() {
//获取EditText的DrawableRight,假如没有设置我们就使用默认的图片,左上右下
mRightDrawable = getCompoundDrawables()[2];
if (mRightDrawable == null) {
//如果右侧没有图标
if (funcType == TYPE_CAN_CLEAR) {
//有清除功能，设置默认叉号选择器
mRightDrawable = getResources().getDrawable(R.drawable.delete_selector);
}
}
//如果是清除功能，则一开始隐藏右侧默认图标，否则不隐藏右侧默认图标
setRightIconVisible(funcType == 0 ? false : true);
//设置输入框里面内容发生改变的监听
addTextChangedListener(new TextWatcher() {
/**
* 当输入框里面内容发生变化的时候回调的方法
*/
@Override
public void onTextChanged(CharSequence s, int start, int count,
int after) {
//如果是带有清除功能的类型，当文本内容发生变化的时候，根据内容的长度是否为0进行隐藏或显示
if (funcType == 0) {
setRightIconVisible(s.length() > 0);
}
if (textListener != null) {
textListener.onTextChanged(s, start, count, after);
}
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
if (textListener != null) {
textListener.beforeTextChanged(s, start, count, after);
}
}
@Override
public void afterTextChanged(Editable s) {
if (textListener != null) {
textListener.afterTextChanged(s);
}
}
});
}
/**
* 设置右侧图标的显示与隐藏，调用setCompoundDrawables为EditText绘制上去
*
* @param visible
*/
protected void setRightIconVisible(boolean visible) {
Drawable right = visible ? mRightDrawable : null;
setCompoundDrawables(getCompoundDrawables()[0],
getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
}
/**
* 输入框文本变化的回调，如果需要进行多一些操作判断，则设置此listen替代*TextWatcher
*/
public interface TextListener {
void onTextChanged(CharSequence s, int start, int count, int after);
void beforeTextChanged(CharSequence s, int start, int count, int after);
void afterTextChanged(Editable s);
}
在init()方法中，我们首先获取到输入框右侧的Drawable对象，通过getCompoundDrawables()[2]获取，getCompoundDrawables()方法是用于获取输入框四个方向图标的方法，返回的类型是一个Drawable数组，数组的元素排序分别是左（0）上（1）右（2）下（3）四个Drawable,这里我们需要获取右侧的图标对象，对应的下标为2。先判断右侧图标mRightDrawable是否为空，如果为空，并且当前的功能类型为自带清除功能,则使用默认的清除图标，通过调用getResources().getDrawable()加载对应的selector。
通过判断功能类型是否属于带有清除功能的类型，设置右侧图标初始化的时候是否显示，接着设置文本内容变化的监听，通过监听文本内容的变化，判断右侧图标是否要显示。由于此处已经设置TextWatcher进行文本的监听，并且在onTextChanged（）方法中进行了操作，所以在使用PowfulEditText的时候，如果需要在文本内容监听中做相应操作，则需要使用自己定义的TextListener来进行回调，而不是使用TextWatcher。
关于输入框右侧图标点击事件的处理，所采用的方法是重写onTouchEvent（）方法，对触摸响应进行处理，判断触摸的位置是否落在右侧图标的范围内，如果是，则认为是点击了该图标。
/**
* 因为我们不能直接给EditText设置点击事件，所以我们用记住我们按下的位置来模拟点击事件
* 当我们按下的位置 在 EditText的宽度 - 图标到控件右边的间距 - 图标的宽度 和
* EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标，竖直方向就没有考虑
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
if (getCompoundDrawables()[2] != null) {
boolean isTouched = event.getX() > (getWidth() - getTotalPaddingRight())
&& (event.getX() < ((getWidth() - getPaddingRight())));
if (isTouched) {
if (onRightClickListener == null) {
if (funcType == TYPE_CAN_CLEAR) {
//如果没有设置右边图标的点击事件，并且带有清除功能，默认清除文本
this.setText("");
} else if (funcType == TYPE_CAN_WATCH_PWD) {
//如果没有设置右边图标的点击事件，并且带有查看密码功能，点击切换密码查看方式
...
}
} else {
//如果有则回调
...
}
}
}
}
return super.onTouchEvent(event);
}
当按下的x值在EditText的宽度 - (图标到控件右边的间距 + 图标的宽度)(getTotalPaddingRight()) 和 EditText的宽度 - 图标到控件右边的间距之间，则认为是点击了图标（如果为了精确计算，可以考虑y值方向的判断）然后进行相应的操作，如果没有设置右侧图标的点击事件，并且当前属于带有清除功能类型，则默认清除文本。
2.自带密码输入框切换明文密文格式的功能
PowerfulEditText自带密码输入框切换明文密文格式的功能，目前大多数App密码输入栏一般支持密码明文、密文的显示，如果需要用到该功能，可以将funcType中指定为canWatchPwd,就可以轻松使用这种功能，使用如下：
<com.chaychan.viewlib.PowerfulEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:funcType="canWatchPwd"
android:inputType="textPassword"
/>
运行后，效果如下：
源码解析：
同样也是在onTouchEvent()方法中做处理，如果当前的功能类型属于查看密码功能类型，则根据eyeOpen这个标识进行判断，判断当前是否是明文，如果是，点击后则变成密文，否则变成明文。
/**
* 因为我们不能直接给EditText设置点击事件，所以我们用记住我们按下的位置来模拟点击事件
* 当我们按下的位置 在 EditText的宽度 - 图标到控件右边的间距 - 图标的宽度 和
* EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标，竖直方向就没有考虑
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
if (getCompoundDrawables()[2] != null) {
boolean isTouched = event.getX() > (getWidth() - getTotalPaddingRight())
&& (event.getX() < ((getWidth() - getPaddingRight())));
if (isTouched) {
if (onRightClickListener == null) {
if (funcType == TYPE_CAN_CLEAR) {
//如果没有设置右边图标的点击事件，并且带有清除功能，默认清除文本
...
} else if (funcType == TYPE_CAN_WATCH_PWD) {
//如果没有设置右边图标的点击事件，并且带有查看密码功能，点击切换密码查看方式
if (eyeOpen) {
//变为密文
this.setTransformationMethod(PasswordTransformationMethod.getInstance());
eyeOpen = false;
} else {
//变为明文
this.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
eyeOpen = true;
}
switchWatchPwdIcon();//切换图标
}
} else {
//如果有则回调
...
}
}
}
}
return super.onTouchEvent(event);
}
/**
* 切换查看密码的图标
*/
private void switchWatchPwdIcon() {
if (eyeOpen) {
//开启查看
setCompoundDrawables(getCompoundDrawables()[0],
getCompoundDrawables()[1], mEyeOpenDrawable, getCompoundDrawables()[3]);
} else {
//关闭查看
setCompoundDrawables(getCompoundDrawables()[0],
getCompoundDrawables()[1], mRightDrawable, getCompoundDrawables()[3]);
}
}
关于输入框明文和密文切换的设置有两种方法。
方法一:
setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);//密文密码
setInputType(EditorInfo.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD); //明文密码
方法二：
setTransformationMethod(PasswordTransformationMethod.getInstance());//密文密码
setTransformationMethod(HideReturnsTransformationMethod.getInstance());//明文密码
上述两种方法都可以实现明文密文的切换，但是方法一切换后EditText的光标会回到最左侧，所以这里选择使用方法二，个人觉得体验比较好一些。
上图所示的右侧图标是默认的，同样也可以指定开启查看密码的图标和关闭查看密码的图标，只需要在属性eyeOpen中指定开启查看密码引用的图片，在eyeClosed中指定关闭查看密码引用的图片即可，如下，更换开启查看密码的图标,如项目默认的图标ic_launcher
<com.chaychan.viewlib.PowerfulEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:funcType="canWatchPwd"
android:inputType="textPassword"
app:eyeOpen="@mipmap/ic_launcher"
/>运行后，效果如下：
这样开启查看密码的图标就更换了，如果还需要更换关闭密码查看的图标，可以指定eyeClose，引用对应的图标。
3.设置drawableLeft和drawableRight图片大小的功能
原生的EditText并不能在属性中指定drawableLeft或drawableRight图片的大小，所以一般开发的过程中，一些程序员会采用简单粗暴的方法，直接引用一张宽高都很小的图片。但是在不同屏幕分辨率下，兼容性就不是很好，比如在一些屏幕分辨率较高的手机上运行，图标会显得模糊。PowerfulEditText可以指定drawableLeft和drawableRight图片的宽高大小，可以指定为多少个dp,这样在开发的时候，可以在各个分辨率图片文件夹中放入不同尺寸的图标，通过设定图片的宽高属性来限制显示的大小，下面演示一下：
<com.chaychan.viewlib.PowerfulEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:funcType="canWatchPwd"
android:inputType="textPassword"
android:drawableLeft="@mipmap/ic_launcher"
/>
如图，指定了drawableLeft的图片为ic_laucher,图片看起来比较大，这时如果我们想要将其调小，则可以添加leftDrawableWidth、leftDrawableHeight指定左侧图片的宽高。
<com.chaychan.viewlib.PowerfulEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:funcType="canWatchPwd"
android:inputType="textPassword"
android:drawableLeft="@mipmap/ic_launcher"
app:leftDrawableWidth="30dp"
app:leftDrawableHeight="30dp"
/>
上面代码，指定了leftDrawableWidth和leftDrawableHeight的大小都为30dp，运行的效果如下：
可以看到左侧的图标变小了，同样也可以设置右侧图片的宽高，对应的属性是rightDrawableWidth、rightDrawableHeight。
源码解析：
public PowerfulEditText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
ta = context.obtainStyledAttributes(attrs, R.styleable.PowerfulEditText);
...
init();
}
if (leftDrawable != null) {
leftWidth = ta.getDimensionPixelOffset(R.styleable.PowerfulEditText_leftDrawableWidth,leftDrawable.getIntrinsicWidth());
leftHeight = ta.getDimensionPixelOffset(R.styleable.PowerfulEditText_leftDrawableHeight,leftDrawable.getIntrinsicHeight());
leftDrawable.setBounds(0, 0, leftWidth, leftHeight);
}
if (mRightDrawable != null) {
rightWidth = ta.getDimensionPixelOffset(R.styleable.PowerfulEditText_rightDrawableWidth,mRightDrawable.getIntrinsicWidth());
rightHeight = ta.getDimensionPixelOffset(R.styleable.PowerfulEditText_rightDrawableWidth,mRightDrawable.getIntrinsicHeight());
mRightDrawable.setBounds(0, 0, rightWidth, rightHeight);
if (mEyeOpenDrawable != null) {
mEyeOpenDrawable.setBounds(0, 0, rightWidth, rightHeight);
}
...
}
这里通过TypedArray获取XML中配置的对应leftDrawableWidth、leftDrawableHeight、rightDrawableWidth、rightDrawableHeight的尺寸大小，如果没有设置这些属性，则默认使用图标的宽和高，然后通过Drawable.setBounds()方法，设置右侧图标的宽高，达到改变两侧图标大小的目的。
设置右侧图标点击事件
PowerfulEditText同样支持右侧图片的点击事件，如果funcType指定为canClear，则默认点击是清除文本。如果需要进行一些额外的操作，则可以设置回调，比如搜索输入框，右侧是一个搜索的按钮，需要为其设置点击事件的回调。
布局文件：
<com.chaychan.viewlib.PowerfulEditText
android:id="@+id/pet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableRight="@mipmap/search"
/>Activity
PowerfulEditText petUsername = (PowerfulEditText) findViewById(R.id.pet);
petUsername.setOnRightClickListener(new PowerfulEditText.OnRightClickListener() {
@Override
public void onClick(EditText editText) {
String content = editText.getText().toString().trim();
if (！TextUtils.isEmpty(content)){
Toast.makeText(MainActivity.this, "执行搜索逻辑", Toast.LENGTH_SHORT).show();
}
}
});运行效果如下：
上面布局文件中，和普通的EditText属性一样，funcType一共有三个属性，分别是normal(默认)、canClear(带清除功能)、canWatchPwd（带查看密码功能）。如果不指定funcType，则默认是normal,普通方式。
Activity中，为PowerfulEditText设置右侧图片的点击事件，调用setOnRightClickListener设置点击后的回调，这里点击后如果有文本内容，则执行搜索逻辑。
这里仅对EditText的一些功能进行封装，对于样式的更改，就要靠开发者根据自己的需求进行修改，修改的方式也不难，只要将background指定为自己编写的的xml即可。
关于右侧图标点击事件的回调，和上面所讲到的是一致的，是在onTouchEvent()方法中，判断触摸范围是否落在右侧图标上，然后判断OnRightClickListener是否为null，如果不为null，则进行回调。OnRightClickListener接口很简单，回调的时候传递当前的EditText对象,如果需要对右侧图标点击事件进行自己的逻辑处理，则通过调用setOnRightClickListener（）进行回调。
/**
* 右边图标点击的回调
*/
public interface OnRightClickListener {
void onClick(EditText editText);
}
关于PowerfulEditText的相关属性，可以通过查看attr.xml便一目了然，如下：
<declare-styleable name="PowerfulEditText">
<!--功能的类型-->
<attr name="funcType">
<enum name="normal" value="-1"/>
<enum name="canClear" value="0"/>
<enum name="canWatchPwd" value="1" />
</attr>
<!--关闭查看密码的图标-->
<attr name="eyeClose" format="reference"/>
<!--开启查看密码的图标-->
<attr name="eyeOpen" format="reference"/>
<!--左侧Drawable的宽度-->
<attr name="leftDrawableWidth" format="dimension"/>
<!--左侧Drawable的高度-->
<attr name="leftDrawableHeight" format="dimension"/>
<!--右侧Drawable的宽度-->
<attr name="rightDrawableWidth" format="dimension"/>
<!--右侧Drawable的高度-->
<attr name="rightDrawableHeight" format="dimension"/>
</declare-styleable>
导入方式
在项目根目录下的build.gradle中的allprojects{}中，添加jitpack仓库地址，如下：
allprojects {
repositories {
jcenter()
maven { url 'https://jitpack.io' }//添加jitpack仓库地址
}
}打开app的module中的build.gradle，在dependencies{}中，添加依赖，如下：
dependencies {
......
compile 'com.github.chaychan:PowerfulViewLibrary:1.0'
}这样就可以使用PowerfulViewLibrary下的控件了,目前只对EditText的一些功能进行了封装，往后会把一些常用的View进行封装，方便项目的开发，我会保持对PowerfulViewLibrary的更新和维护的，也希望大家可以向我提出一些建议。
源码github地址：https://github.com/chaychan/PowerfulViewLibrary.git
随时随地看视频
