Android 開發仿簡書登入框可刪除內容或顯示密碼框的內容_Android

簡書App 是我很喜歡的一款軟體。今天就模仿了一下他的登入框。先上圖：

好了下面上代碼，自訂ImgEditText 繼承與EditText。重寫一些方法。

package lyf.myimgedittextdemo;import android.content.Context;import android.graphics.Rect;import android.graphics.drawable.Drawable;import android.text.Editable;import android.text.TextWatcher;import android.util.AttributeSet;import android.view.MotionEvent;import android.widget.EditText;/*** lyf on 2016/12/6.* 自訂的EditText右邊帶圖片，可以設定點擊事件*/public class ImgEditText extends EditText implements TextWatcher {//控制項左邊的圖片private Drawable leftDrawable = null;//控制項右邊的圖片private Drawable rightDrawable = null;// 控制項是否有焦點private boolean hasFoucs;private IMyRightDrawableClick mightDrawableClick;public ImgEditText(Context context) {this(context, null);}public ImgEditText(Context context, AttributeSet attrs) {//這裡構造方法也很重要，不加這個很多屬性不能再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);//設定輸入框裡面內容發生改變的監聽addTextChangedListener(this);}//設定顯示圖片的大小public void setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom) {super.setCompoundDrawablesWithIntrinsicBounds(left, top, right, bottom);//這裡只要改後面兩個參數就好了，一個寬一個是高，如果想知道為什麼可以尋找源碼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);}//游標選中時判斷@Overrideprotected 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);}}//設定清除表徵圖的顯示與隱藏，調用setCompoundDrawables為EditText繪製上去protected void setImageVisible(boolean flag) {//如果當前右側有圖片則覆蓋右側的圖片，如果沒有還是顯示原來的圖片if (getCompoundDrawables()[2] != null) {rightDrawable = getCompoundDrawables()[2];}if (flag) {setCompoundDrawables(getCompoundDrawables()[0], null, rightDrawable, null);} else {setCompoundDrawables(getCompoundDrawables()[0], null, null, null);}}//文字框監聽事件@Overridepublic 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) {}/*** 因為我們不能直接給EditText設定點擊事件，所以我們用記住我們按下的位置來類比點擊事件* 當我們按下的位置 在 EditText的寬度 - 表徵圖到控制項右邊的間距 - 表徵圖的寬度 和* EditText的寬度 - 表徵圖到控制項右邊的間距之間我們就算點擊了表徵圖，豎直方向就沒有考慮* （參考 http://blog.csdn.net/xiaanming/article/details/11066685/）*/@Overridepublic 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) {//調用點擊事件（外部實現）mightDrawableClick.rightDrawableClick();}}}return super.onTouchEvent(event);}//設定右側按鈕的點擊事件，外部調用的時候實現該方法public void setDrawableClick( IMyRightDrawableClick myMightDrawableClick){this.mightDrawableClick = myMightDrawableClick;}//自訂介面（實現右邊圖片點擊事件）public interface IMyRightDrawableClick {void rightDrawableClick();}//允許外部修改右側顯示的圖片public void setRightDrawable(Drawable drawable){rightDrawable = drawable;setCompoundDrawablesWithIntrinsicBounds(leftDrawable, null, rightDrawable, null);}}

以上就是自訂類的主要代碼了，注釋比較清楚。

布局布局檔案裡直接引用就好。

<lyf.myimgedittextdemo.ImgEditTextandroid: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" />

下面看代碼中的設定

pwdIet = (ImgEditText) this.findViewById(R.id.pwdIet);pwdIet.setDrawableClick(new ImgEditText.IMyRightDrawableClick() {@Overridepublic void rightDrawableClick() {if (isHidden) {//設定EditText文本為可見的pwdIet.setTransformationMethod(HideReturnsTransformationMethod.getInstance());pwdIet.setRightDrawable(getResources().getDrawable(R.mipmap.eye_selected));} else {//設定EditText文本為隱藏的pwdIet.setTransformationMethod(PasswordTransformationMethod.getInstance());pwdIet.setRightDrawable(getResources().getDrawable(R.mipmap.eye_normal));}isHidden = !isHidden;pwdIet.postInvalidate();//切換後將EditText游標置於末尾CharSequence charSequence = pwdIet.getText();if (charSequence instanceof Spannable) {Spannable spanText = (Spannable) charSequence;Selection.setSelection(spanText, charSequence.length());}}});

這樣我們的例子就完成了。

以上所述是小編給大家介紹的Android 開發仿簡書登入框可刪除內容或顯示密碼框的內容，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！