本篇文章已授權微信公衆號 guolin_blog （郭霖）獨家發佈
轉載請註明出處：http://blog.csdn.net/chay_chan/article/details/63685905
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