Android 는 지우 기 단추,비밀 번 호 를 가지 고 작은 눈 을 볼 수 있 는 입력 상 자 를 가지 고 있 습 니 다.

머리말
많은 파트너 들 이 로그 인 기능 을 개발 할 때 입력 상자 지우 기 버튼,비밀 번 호 를 보 거나 작은 눈 단 추 를 숨 기 는 데 사용 할 것 이 라 고 믿 습 니 다.저도 예전 에 이 기능 을 썼 지만 비밀 번 호 를 찾 고 비밀 번 호 를 잊 어 버 리 면 다시 쓰 는 것 이 귀 찮 습 니 다.지금 은 사용자 정의 컨트롤 만 했 습 니 다.지우 기 단 추 를 설정 할 수 있 습 니 다.비밀 번 호 는 작은 눈 이 표시 되 는 지,아이콘 이 있 는 지,그 라 데 이 션 과 가로 이동 애니메이션 이 있 는 지,직접 볼 수 있 는 동 영상 을 어떻게 올 리 는 지 모 르 겠 습 니 다.세 장의 효과 도 를 첨부 하면 링크 를 클릭 하여 동 영상 을 볼 수 있 습 니 다.
 
사용자 정의 컨트롤 ClearEditText
이 자체 제거,작은 눈 을 가 진 컨트롤 은 사용자 정의 컨트롤 입 니 다.컨트롤 이름 ClearEditText.class 는 Relative Layout 를 계승 하고 레이아웃 참조 가 있 습 니 다.프로젝트 에 복사 한 후 사용 할 때 일반 입력 상자 컨트롤 과 마찬가지 로 관련 설정 을 하면 됩 니 다.일부 속성 은 사용자 정의 속성 을 사용 해 야 합 니 다.코드 를 구체 적 으로 볼 수 있 습 니 다.
2.사용 절차
 1.ClearEditText.class 복사
ClearEditText.class 클래스 를 자신의 항목 에 복사 하고 관련 레이아웃 파일,사용자 정의 속성,기본 그림 을 복사 하면 됩 니 다.다음은 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;//           
 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);
 }

}

2.예시 사용
다음은 xml 레이아웃 에서 ClearEditText 를 어떻게 사용 하 는 지 예제 입 니 다.일부 사용자 정의 속성 은 xmlns:app="http://schemas.android.com/apk/res-auto인용 호출.app:showEye 속성 true-작은 눈 보이 기,false-작은 눈 닫 기.

 <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" />

총결산
처음에 제 가 사용 한 자체 테이프 비우 기,비밀번호 가 보 이 는 사용자 정의 입력 상 자 는 지우 기 버튼 이 표시 되 지 않 았 습 니 다.비밀 번 호 는 버튼 이 움 직 이 는 효 과 를 볼 수 있 습 니 다.지우 기 버튼 이 경직 되 어 있 습 니 다.지우 기 버튼 이 숨 어 있 을 때 작은 눈 버튼 뒤에 공백 이 있 습 니 다.표시 가 어색 하고 효과 가 있 으 면 시각 적 으로 더욱 원활 합 니 다.일부 필요 한 총각 에 게 시간 이 있 으 면 아래데모 다운로드의 링크 주 소 를 첨부 하고 필요 하면 다운로드 해 볼 수 있 습 니 다.
안 드 로 이 드 테이프 지우 기 단추,비밀번호 가 작은 눈 을 볼 수 있 는 입력 상자 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 안 드 로 이 드 비밀번호 입력 상자 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!