Android带清除按钮、密码可见小眼睛的输入框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
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;//是否显示输入框左侧图片
 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;//输入类型，就做了不限制、数字、文本密码三种
 private boolean isInput = false;//输入1个字符后更改状态为true,保证小眼睛移动一次
 private boolean isHideClean = false;//输入字符后，清除了需要小眼睛归为，清除按钮隐藏
 private int ivWidth = 45;//关闭按钮的宽度

 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);
 }

 //代码设置是否显示清除按钮
 public void setEditClean(boolean isCanClose) {
  showClean = isCanClose;
 }

 //代码设置是否显示小眼睛
 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;
 }
 //输入监听
 public interface OnEditInputListener {
  void input(String content);
 }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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" />