Android帶清除按鈕、密碼可見小眼睛的輸入框
更新時間：2021年01月04日 14:13:22 作者：花尾蝦
這篇文章主要介紹了Android帶清除按鈕、密碼可見小眼睛的輸入框,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
前言
相信不少小伙伴在開發(fā)登錄功能時候，或多或少都會用到輸入框清除按鈕、密碼可見與隱藏小眼睛按鈕，我之前也是但寫這個功能，但是在找回密碼、忘記密碼里面還要重新寫一次很是麻煩，現(xiàn)在我把它只做了一個自定義控件，可以配置清除按鈕、密碼可見小眼睛是否顯示以及圖標，有漸隱漸顯和橫向移動動畫，不知道怎么上傳可以直接觀看的視頻，附上三張效果圖，可以點擊鏈接觀看視頻是否是你想要的效果。
一、自定義控件ClearEditText
我的這個自帶清除、小眼睛的控件，是一個自定義控件，控件名稱ClearEditText.class，繼承RelativeLayout并有布局引用。在拷貝到項目里面后，使用時候只需要與普通輸入框控件一樣，進行相關(guān)的配置即可，部分屬性需要使用自定義屬性，具體見代碼。
二、使用步驟
1.拷貝ClearEditText.class
拷貝ClearEditText.class類到自己的項目里，再考拷貝它相關(guān)的布局文件、自定義屬性、默認圖片即可，下面貼出ClearEditText主要代碼：
public class ClearEditText extends RelativeLayout {
private ImageView ivLeftIcon;
private EditText myEdie;
private ImageView ivEditClean;
private ImageView ivEditEye;
private boolean isChecked = true;
private Context mContext;
private TypedArray mTypedArray;
private boolean showClean = true;//清空圖標是否顯示，true:顯示
private boolean showEye = false;//密碼可見圖標是否顯示，true:顯示
private int drawableLeft = -1;//是否顯示輸入框左側(cè)圖片
private int drawableEyeOpen = R.drawable.clear_icon_eye_open;//可以看見密碼小眼睛樣式
private int drawableEyeClose = R.drawable.clear_icon_eye_close;//不可見密碼小眼睛樣式
private int drawableClean = R.drawable.clear_icon_close;//清除按鈕圖片
private int cleanPadding = 0;//清除按鈕padding邊距
private String hintStr;
private String textStr;
private int mTextColorHint = Color.BLACK;
private int mTextColor = Color.BLACK;
private int mTextSize = -1;
private int mMaxLength = 2000;
private int mMaxLines = 1;
private int mInputType = 0;//輸入類型，就做了不限制、數(shù)字、文本密碼三種
private boolean isInput = false;//輸入1個字符后更改狀態(tài)為true,保證小眼睛移動一次
private boolean isHideClean = false;//輸入字符后，清除了需要小眼睛歸為，清除按鈕隱藏
private int ivWidth = 45;//關(guān)閉按鈕的寬度
public ClearEditText(Context context) {
super(context);
mContext = context;
initView();
}
public ClearEditText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mContext = context;
mTypedArray = mContext.obtainStyledAttributes(attrs, R.styleable.myEditText);
initView();
}
public ClearEditText(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
mTypedArray = mContext.obtainStyledAttributes(attrs, R.styleable.myEditText);
showClean = mTypedArray.getBoolean(R.styleable.myEditText_showClean, showClean);
drawableClean = mTypedArray.getResourceId(R.styleable.myEditText_drawableClean, drawableClean);
cleanPadding = mTypedArray.getDimensionPixelSize(R.styleable.myEditText_cleanPadding, cleanPadding);
showEye = mTypedArray.getBoolean(R.styleable.myEditText_showEye, showEye);
drawableLeft = mTypedArray.getResourceId(R.styleable.myEditText_drawableLeft, -1);
drawableEyeClose = mTypedArray.getResourceId(R.styleable.myEditText_drawableEyeClose, drawableEyeClose);
drawableEyeOpen = mTypedArray.getResourceId(R.styleable.myEditText_drawableEyeOpen, drawableEyeOpen);
hintStr = mTypedArray.getString(R.styleable.myEditText_hint);
textStr = mTypedArray.getString(R.styleable.myEditText_text);
mTextColorHint = mTypedArray.getColor(R.styleable.myEditText_textColorHint, mTextColorHint);
mTextColor = mTypedArray.getColor(R.styleable.myEditText_textColor, mTextColor);
mTextSize = mTypedArray.getDimensionPixelSize(R.styleable.myEditText_textSize, mTextSize);
mMaxLength = mTypedArray.getInteger(R.styleable.myEditText_maxLength, mMaxLength);
mMaxLines = mTypedArray.getDimensionPixelSize(R.styleable.myEditText_maxLines, mMaxLines);
mInputType = mTypedArray.getInteger(R.styleable.myEditText_inputType, mInputType);
mTypedArray.recycle();
initView();
}
// 初始化視圖
private void initView() {
View view = View.inflate(getContext(), R.layout.clear_layout_view, null);
ivLeftIcon = (ImageView) view.findViewById(R.id.iv_edit_left_icon);
myEdie = (EditText) view.findViewById(R.id.view_edit_show);
ivEditClean = (ImageView) view.findViewById(R.id.iv_edit_clean);
ivEditEye = (ImageView) view.findViewById(R.id.iv_edit_eye);
myEdie.setHint(hintStr);
myEdie.setHintTextColor(mTextColorHint);
myEdie.setText(textStr);
myEdie.setTextColor(mTextColor);
myEdie.setMaxLines(mMaxLines);
myEdie.setFilters(new InputFilter[]{new InputFilter.LengthFilter(mMaxLength)});
if (mTextSize != -1) {
myEdie.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextSize);
} else {
myEdie.setTextSize(15);
}
if (mInputType == 1) {
myEdie.setInputType(InputType.TYPE_CLASS_NUMBER);
} else if (mInputType == 2) {
myEdie.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD | InputType.TYPE_CLASS_TEXT);
} else {
myEdie.setInputType(InputType.TYPE_NUMBER_VARIATION_NORMAL | InputType.TYPE_CLASS_TEXT);
}
if (showEye) {
myEdie.setTransformationMethod(new AsteriskPasswordTransformationMethod());
}
if (showClean && showEye) {
int left = myEdie.getPaddingLeft();
int top = myEdie.getPaddingTop();
int bottom = myEdie.getPaddingBottom();
myEdie.setPadding(left, top, Utils.dp2px(mContext, 90), bottom);
} else if (!showClean && !showEye) {
int left = myEdie.getPaddingLeft();
int top = myEdie.getPaddingTop();
int right = myEdie.getPaddingRight();
int bottom = myEdie.getPaddingBottom();
myEdie.setPadding(left, top, right, bottom);
} else {
int left = myEdie.getPaddingLeft();
int top = myEdie.getPaddingTop();
int bottom = myEdie.getPaddingBottom();
myEdie.setPadding(left, top, Utils.dp2px(mContext, 45), bottom);
}
myEdie.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) {
if (s.length() > 0) {
isHideClean = false;
}
}
@Override
public void afterTextChanged(Editable s) {
if (s.length() > 0 && !isInput) {//輸入字符大于0且只有一個字符時候顯示清除按鈕動畫，小眼睛移動出位置給清除按鈕使用
showEditClean();
moveEditEye();
isInput = true;
} else if (s.length() == 0) {//無字符小眼睛歸位
UndoEditEye();
}
if (s.length() == 0 & !isHideClean) {
hideEditClean();
isHideClean = true;
isInput = false;
}
if (onEditInputListener != null) {
onEditInputListener.input(getText());
}
}
});
setEditClean(showClean);
ivEditClean.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
myEdie.setText("");
}
});
ivEditClean.setImageResource(drawableClean);
ivEditClean.setPadding(cleanPadding, cleanPadding, cleanPadding, cleanPadding);
setEditEye(showEye);
ivEditEye.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (isChecked) {
// 輸入一個對用戶可見的密碼
myEdie.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
myEdie.setSelection(getText().length());
ivEditEye.setImageResource(drawableEyeOpen);
isChecked = false;
} else {
// 輸入一個對用戶不可見的密碼
myEdie.setTransformationMethod(new AsteriskPasswordTransformationMethod());
myEdie.setSelection(getText().length());
ivEditEye.setImageResource(drawableEyeClose);
isChecked = true;
}
}
});
if (drawableLeft != -1) {
ivLeftIcon.setVisibility(View.VISIBLE);
ivLeftIcon.setImageResource(drawableLeft);
} else {
ivLeftIcon.setVisibility(View.GONE);
}
view.setLayoutParams(new LayoutParams(ViewPager.LayoutParams.MATCH_PARENT, ViewPager.LayoutParams.WRAP_CONTENT));
addView(view);
}
//密碼不可見時候，使用*替換密碼
public class AsteriskPasswordTransformationMethod extends PasswordTransformationMethod {
@Override
public CharSequence getTransformation(CharSequence source, View view) {
return new PasswordCharSequence(source);
}
private class PasswordCharSequence implements CharSequence {
private CharSequence mSource;
public PasswordCharSequence(CharSequence source) {
mSource = source; // Store char sequence
}
public char charAt(int index) {
return '*'; // This is the important part
}
public int length() {
return mSource.length(); // Return default
}
public CharSequence subSequence(int start, int end) {
return mSource.subSequence(start, end); // Return default
}
}
}
public String getText() {
return myEdie.getText().toString().trim();
}
public void setText(String text) {
myEdie.setText(text);
}
//代碼設(shè)置是否顯示清除按鈕
public void setEditClean(boolean isCanClose) {
showClean = isCanClose;
}
//代碼設(shè)置是否顯示小眼睛
public void setEditEye(boolean isCanSee) {
showEye = isCanSee;
if (showEye == true) {
ivEditEye.setVisibility(View.VISIBLE);
} else {
ivEditEye.setVisibility(View.GONE);
}
}
private void showEditClean() {
if (showClean == true) {
AnimationUtils.showAndHiddenCenterAnimation(ivEditClean, AnimationUtils.AnimationState.STATE_SHOW, 500);
}
}
private void hideEditClean() {
if (showClean == true) {
AnimationUtils.showAndHiddenCenterAnimation(ivEditClean, AnimationUtils.AnimationState.STATE_HIDDEN, 500);
}
}
private void moveEditEye() {
if (showEye) {
ObjectAnimator.ofFloat(ivEditEye, "translationX", -Utils.dp2px(mContext, ivWidth)).setDuration(500).start();
}
}
private void UndoEditEye() {
if (showEye) {
ObjectAnimator.ofFloat(ivEditEye, "translationX", 0).setDuration(500).start();
}
}
public OnEditInputListener onEditInputListener;
public void setOnEditInputListener(OnEditInputListener listener) {
onEditInputListener = listener;
}
//輸入監(jiān)聽
public interface OnEditInputListener {
void input(String content);
}
}
2.使用示例
下面是在xml布局時候，如何使用ClearEditText的示例，部分自定義屬性使用xmlns:app="http://schemas.android.com/apk/res-auto"引用調(diào)用。app:showEye屬性true-顯示小眼睛，false-關(guān)閉小眼睛。
<com.huaweixia.clear.ClearEditText android:id="@+id/et_login_password" android:layout_width="0dp" android:layout_height="45dp" android:layout_marginTop="30dp" android:background="@drawable/line_bg_white_only_bottom_d8" android:paddingLeft="10dp" app:hint="請輸入密碼" app:layout_constraintLeft_toLeftOf="@id/et_login_number" app:layout_constraintRight_toRightOf="@id/et_login_number" app:layout_constraintTop_toBottomOf="@id/et_login_number" app:showEye="true" app:textColor="@color/tv_black_333333" app:textColorHint="@color/tv_gray_999999" app:textSize="15sp" />
總結(jié)
一開始我之前自己用的自帶清空、密碼可見的自定義輸入框，是沒有清除按鈕顯示，密碼可見按鈕移動動效，清除按鈕顯示比較僵硬，在清除按鈕隱藏時候小眼睛按鈕后面有一定空白，顯示看著比較別扭，加了動效后視覺上感覺更加順暢，希望對部分需要的小伙伴有空，下面附上 下載demo的鏈接 地址，有需要可以下載看看。
到此這篇關(guān)于Android帶清除按鈕、密碼可見小眼睛的輸入框的文章就介紹到這了,更多相關(guān)android密碼輸入框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ViewPager頂部導航欄聯(lián)動效果(標題欄條目多)
這篇文章主要介紹了ViewPager頂部導航欄聯(lián)動效果,代碼簡單易懂，感興趣的朋友參考下吧2016-08-08
本篇文章主要介紹了Android中Edittext設(shè)置輸入條件的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
JSON解析和XML解析是較為普遍的兩種解析方式，其中JSON解析的市場分額更大。這篇文章主要介紹了JSON解析和XML解析區(qū)別對比,需要的朋友可以參考下2016-10-10
Android內(nèi)嵌Unity并實現(xiàn)互相跳轉(zhuǎn)的實例代碼
這篇文章主要介紹了Android內(nèi)嵌Unity并實現(xiàn)互相跳轉(zhuǎn)的實例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11
這篇文章主要為大家詳細介紹了android實現(xiàn)簡單拼圖游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
在Android中動態(tài)添加Panel框架的實現(xiàn)代碼
項目經(jīng)常會有這種需求，就是想動態(tài)的在某個界面上添加一個Panel。比如，有一個按鈕，點擊后會顯示下拉菜單式的界面。這種需求，就屬于動態(tài)添加一個Panel。需求多了，就要研究是否可以抽象出通用的框架代碼，以方便開發(fā)，所以就有了以下內(nèi)容2013-05-05
本篇文章小編為大家介紹，關(guān)于Android SDCard存儲的問題。需要的朋友參考下2013-04-04
Android開發(fā)中使用外部應(yīng)用獲取SD卡狀態(tài)的方法
這篇文章主要介紹了Android開發(fā)中使用外部應(yīng)用獲取SD卡狀態(tài)的方法,簡單分析了Android監(jiān)聽SD卡狀態(tài)的方法,并結(jié)合實例形式分析了Android外部應(yīng)用獲取SD卡狀態(tài)的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了 Android評論圖片可移動順序選擇器的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
Android ExpandableListView單選以及多選實現(xiàn)代碼
這篇文章主要為大家詳細介紹了Android ExpandableListView單選以及多選的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06