簡書App 是我很喜歡的一款軟件颗品。今天就模仿了一下他的登錄框肯尺。先上圖：
好了下面上代碼，自定義ImgEditText 繼承與EditText躯枢。重寫一些方法则吟。
// lyf on 2016/12/6.
// 自定義的EditText右邊帶圖片，可以設(shè)置點(diǎn)擊事件
public class ImgEditText extends EditText implements TextWatcher {
//控件左邊的圖片
private Drawable leftDrawable = null;
//控件右邊的圖片
private Drawable rightDrawable = null;
// 控件是否有焦點(diǎn)
private boolean hasFoucs;
private IMyRightDrawableClick mightDrawableClick;
public ImgEditText(Context context) {
this(context, null);
}
public ImgEditText(Context context, AttributeSet attrs) {
//這里構(gòu)造方法也很重要锄蹂，不加這個很多屬性不能再XML里面定義
this(context, attrs, android.R.attr.editTextStyle);
}
public ImgEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
//初始化基本圖片
private void init() {
//獲取RadioButton的圖片集合
Drawable[] drawables = getCompoundDrawables();
leftDrawable = drawables[0];
rightDrawable = drawables[2];
setCompoundDrawablesWithIntrinsicBounds(leftDrawable, null, null, null);
//設(shè)置輸入框里面內(nèi)容發(fā)生改變的監(jiān)聽
addTextChangedListener(this);
}
//設(shè)置顯示圖片的大小
public void setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom) {
super.setCompoundDrawablesWithIntrinsicBounds(left, top, right, bottom);
//這里只要改后面兩個參數(shù)就好了氓仲，一個寬一個是高，如果想知道為什么可以查找源碼
if (left != null) {
left.setBounds(0, 0, 50, 50);
}
if (right != null) {
right.setBounds(0, 0, 50, 50);
}
if (top != null) {
top.setBounds(0, 0, 100, 100);
}
if (bottom != null) {
bottom.setBounds(0, 0, 100, 100);
}
setCompoundDrawables(left, top, right, bottom);
}
//光標(biāo)選中時判斷
@Override
protected void onFocusChanged(boolean focused, int direction, Rect previouslyFocusedRect) {
super.onFocusChanged(focused, direction, previouslyFocusedRect);
this.hasFoucs = focused;
if (focused) {
setImageVisible(getText().length() > 0);
} else {
setImageVisible(false);
}
}
//設(shè)置清除圖標(biāo)的顯示與隱藏得糜，調(diào)用setCompoundDrawables為EditText繪制上去
protected void setImageVisible(boolean flag) {
//如果當(dāng)前右側(cè)有圖片則覆蓋右側(cè)的圖片敬扛，如果沒有還是顯示原來的圖片
if (getCompoundDrawables()[2] != null) {
rightDrawable = getCompoundDrawables()[2];
}
if (flag) {
setCompoundDrawables(getCompoundDrawables()[0], null, rightDrawable, null);
} else {
setCompoundDrawables(getCompoundDrawables()[0], null, null, null);
}
}
//文本框監(jiān)聽事件
@Override
public void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
if (hasFoucs) {
if (text.length() > 0) {
setImageVisible(true);
} else {
setImageVisible(false);
}
}
}
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
public void afterTextChanged(Editable s) {
}
/**
* 因?yàn)槲覀儾荒苤苯咏oEditText設(shè)置點(diǎn)擊事件，所以我們用記住我們按下的位置來模擬點(diǎn)擊事件
* 當(dāng)我們按下的位置 在 EditText的寬度 - 圖標(biāo)到控件右邊的間距 - 圖標(biāo)的寬度 和
* EditText的寬度 - 圖標(biāo)到控件右邊的間距之間我們就算點(diǎn)擊了圖標(biāo)朝抖，豎直方向就沒有考慮
* （參考 http://blog.csdn.net/xiaanming/article/details/11066685/）
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
if (getCompoundDrawables()[2] != null) {
boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())
&& (event.getX() < ((getWidth() - getPaddingRight())));
if (touchable) {
//調(diào)用點(diǎn)擊事件（外部實(shí)現(xiàn)）
mightDrawableClick.rightDrawableClick();
}
}
}
return super.onTouchEvent(event);
}
//設(shè)置右側(cè)按鈕的點(diǎn)擊事件啥箭，外部調(diào)用的時候?qū)崿F(xiàn)該方法
public void setDrawableClick( IMyRightDrawableClick myMightDrawableClick){
this.mightDrawableClick = myMightDrawableClick;
}
//自定義接口（實(shí)現(xiàn)右邊圖片點(diǎn)擊事件）
public interface IMyRightDrawableClick {
void rightDrawableClick();
}
//允許外部修改右側(cè)顯示的圖片
public void setRightDrawable(Drawable drawable){
rightDrawable = drawable;
setCompoundDrawablesWithIntrinsicBounds(leftDrawable, null, rightDrawable, null);
}
}
以上就是自定義類的主要代碼了，注釋比較清楚治宣。
布局布局文件里直接引用就好急侥。
<lyf.myimgedittextdemo.ImgEditText
android:id="@+id/pwdIet"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@null"
android:drawableLeft="@mipmap/mm_image"
android:drawableRight="@mipmap/eye_normal"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="5dp"
android:drawablePadding="15dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:hint="密碼"
android:inputType="numberPassword" />
下面看代碼中的設(shè)置
pwdIet = (ImgEditText) this.findViewById(R.id.pwdIet);
pwdIet.setDrawableClick(new ImgEditText.IMyRightDrawableClick() {
@Override
public void rightDrawableClick() {
if (isHidden) {
//設(shè)置EditText文本為可見的
pwdIet.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
pwdIet.setRightDrawable(getResources().getDrawable(R.mipmap.eye_selected));
} else {
//設(shè)置EditText文本為隱藏的
pwdIet.setTransformationMethod(PasswordTransformationMethod.getInstance());
pwdIet.setRightDrawable(getResources().getDrawable(R.mipmap.eye_normal));
}
isHidden = !isHidden;
pwdIet.postInvalidate();
//切換后將EditText光標(biāo)置于末尾
CharSequence charSequence = pwdIet.getText();
if (charSequence instanceof Spannable) {
Spannable spanText = (Spannable) charSequence;
Selection.setSelection(spanText, charSequence.length());
}
}
});
這樣我們的例子就完成了砌滞。
不懂的可以下載看源碼，很簡單坏怪。
源碼下載
