Android 입력 상자 컨트롤 ClearEditText 제거 기능 구현

본 고 는 여러분 에 게 매우 실 용적 인 작은 컨트롤 ClearEditText 를 가 져 다 드 립 니 다.바로 Android 시스템 의 입력 상자 오른쪽 에 작은 아이콘 을 추가 하 는 것 입 니 다.작은 아이콘 을 클릭 하면 입력 상자 안의 내용 을 지 울 수 있 습 니 다.IOS 위 에 특정한 속성 을 직접 설정 하면 이 기능 을 실현 할 수 있 습 니 다.그러나 Android 원생 EditText 는 이 기능 을 갖 추 지 못 하기 때문에 이 기능 을 실현 하려 면 EditText 를 다시 써 야 합 니 다.이제 여러분 을 데 리 고 이 작은 기능 을 이 루 도록 하 겠 습 니 다.
우 리 는 우리 의 입력 상자 에 상하 좌우 로 그림 을 설정 할 수 있다 는 것 을 알 고 있 습 니 다.그래서 우 리 는 속성 android:drawableRight 를 이용 하여 작은 아이콘 을 삭제 할 수 있 습 니 다.그림 과 같 습 니 다.

저 는 왼쪽 과 오른쪽 에 있 는 그림 을 설 치 했 습 니 다.만약 에 우리 가 오른쪽 에 있 는 그림 에 감청 을 설정 할 수 있다 면 오른쪽 에 있 는 그림 을 클릭 하여 입력 상자 의 내용 을 지우 고 아이콘 을 삭제 하 는 것 을 숨 길 수 있 습 니 다.그러면 이 작은 기능 은 쉽게 해 결 됩 니 다.그러나 안 드 로 이 드 는 우리 에 게 오른쪽 에 있 는 작은 아이콘 에 감청 을 할 수 있 는 기능 을 주지 않 았 습 니 다.이때 이 길이 통 하지 않 는 다 는 것 을 알 았 습 니까?사실은 아 닙 니 다.우 리 는 클릭 이 벤트 를 모 의 할 수 있 습 니 다.입력 상자 의 onTouchEvent()방법 으로 모 의 할 수 있 습 니 다.
우리 가 만 지고 들 면(바로 ACTION업 타임  입력 상자 왼쪽 에서 아이콘 왼쪽 까지 의 거리 보다 크 고 입력 상자 왼쪽 에서 그림 오른쪽 까지 의 거리 가 작 습 니 다.우 리 는 클릭 하여 그림 을 지 우 는 것 이 라 고 생각 합 니 다.물론 저 는 세로 방향 을 고려 하지 않 았 습 니 다.작은 아이콘 을 지 우 는 데 감청 만 하면 다른 것 은 모두 처리 할 수 있 습 니 다.저 는 먼저 코드 를 붙 이 고 설명 을 하 겠 습 니 다.

package com.example.clearedittext; 
 
import android.content.Context; 
import android.graphics.drawable.Drawable; 
import android.text.Editable; 
import android.text.TextWatcher; 
import android.util.AttributeSet; 
import android.view.MotionEvent; 
import android.view.View; 
import android.view.View.OnFocusChangeListener; 
import android.view.animation.Animation; 
import android.view.animation.CycleInterpolator; 
import android.view.animation.TranslateAnimation; 
import android.widget.EditText; 
 
public class ClearEditText extends EditText implements  
    OnFocusChangeListener, TextWatcher {  
  /** 
   *         
   */ 
  private Drawable mClearDrawable;  
  /** 
   *         
   */ 
  private boolean hasFoucs; 
  
  public ClearEditText(Context context) {  
    this(context, null);  
  }  
  
  public ClearEditText(Context context, AttributeSet attrs) {  
    //          ,           XML     
    this(context, attrs, android.R.attr.editTextStyle);  
  }  
   
  public ClearEditText(Context context, AttributeSet attrs, int defStyle) { 
    super(context, attrs, defStyle); 
    init(); 
  } 
   
   
  private void init() {  
    //  EditText DrawableRight,                 
    mClearDrawable = getCompoundDrawables()[2];  
    if (mClearDrawable == null) {  
//     throw new NullPointerException("You can add drawableRight attribute in XML"); 
      mClearDrawable = getResources().getDrawable(R.drawable.delete_selector);  
    }  
     
    mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());  
    //         
    setClearIconVisible(false);  
    //          
    setOnFocusChangeListener(this);  
    //                 
    addTextChangedListener(this);  
  }  
  
  
  /** 
   *          EditText      ,                      
   *            EditText    -            -         
   * EditText    -                      ,          
   */ 
  @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) { 
          this.setText(""); 
        } 
      } 
    } 
 
    return super.onTouchEvent(event); 
  } 
  
  /** 
   *  ClearEditText         ,                      
   */ 
  @Override  
  public void onFocusChange(View v, boolean hasFocus) {  
    this.hasFoucs = hasFocus; 
    if (hasFocus) {  
      setClearIconVisible(getText().length() > 0);  
    } else {  
      setClearIconVisible(false);  
    }  
  }  
  
  
  /** 
   *             ,  setCompoundDrawables EditText     
   * @param visible 
   */ 
  protected void setClearIconVisible(boolean visible) {  
    Drawable right = visible ? mClearDrawable : null;  
    setCompoundDrawables(getCompoundDrawables()[0],  
        getCompoundDrawables()[1], right, getCompoundDrawables()[3]);  
  }  
    
   
  /** 
   *                      
   */ 
  @Override  
  public void onTextChanged(CharSequence s, int start, int count,  
      int after) {  
        if(hasFoucs){ 
          setClearIconVisible(s.length() > 0); 
        } 
  }  
  
  @Override  
  public void beforeTextChanged(CharSequence s, int start, int count,  
      int after) {  
      
  }  
  
  @Override  
  public void afterTextChanged(Editable s) {  
      
  }  
   
   
  /** 
   *        
   */ 
  public void setShakeAnimation(){ 
    this.setAnimation(shakeAnimation(5)); 
  } 
   
   
  /** 
   *      
   * @param counts 1        
   * @return 
   */ 
  public static Animation shakeAnimation(int counts){ 
    Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0); 
    translateAnimation.setInterpolator(new CycleInterpolator(counts)); 
    translateAnimation.setDuration(1000); 
    return translateAnimation; 
  } 
  
  
} 
setClearIconVisible()방법,아이콘 을 숨 기 고 표시 하 는 방법 을 설정 합 니 다.setVisibility()방법 이 아 닙 니 다.setVisibility()방법 은 View 를 위 한 것 입 니 다.setCompoundDrawables(Drawable left,Drawable top,Drawable right,Drawable bottom)를 사용 하여 상하 좌우 아이콘 을 설정 할 수 있 습 니 다.
setOnFocusChangeListener(this)는 입력 상자 에 초점 을 설정 하여 감청 을 변경 합 니 다.입력 상자 에 초점 이 있 으 면 입력 상자 의 값 이 비어 있 는 지 판단 하고 비어 있 으 면 제거 아이콘 을 숨 깁 니 다.그렇지 않 으 면 표 시 됩 니 다.
addTextChanged Listener(this)는 입력 상자 에 내용 을 설정 하기 위해 감청 을 변경 합 니 다.사실은 간단 합 니 다.입력 상자 안의 내용 이 바 뀌 었 을 때 작은 아이콘 을 표시 하고 숨 기 는 것 을 처리 해 야 합 니 다.안의 내용 길 이 는 0 이 되 지 않 으 면 표시 합 니 다.그렇지 않 으 면 숨 깁 니 다.그러나 이 입력 상자 에 초점 이 있어 야 표시 하거나 숨 깁 니 다.왜 초점 이 필요 합 니까?예 를 들 어 우리 의 로그 인 인터페이스,우 리 는 사용자 이름과 비밀 번 호 를 저 장 했 습 니 다.로그 인 인터페이스 onCreate()를 할 때 우 리 는 우리 가 저장 한 비밀 번 호 를 사용자 이름 입력 상자 와 비밀번호 입력 상자 에 표시 합 니 다.입력 상자 안의 내용 이 바 뀌 어서 사용자 이름 입력 상자 와 비밀번호 입력 상자 안의 작은 아이콘 을 모두 표시 합 니 다.이것 은 우리 가 원 하 는 효과 가 아 닙 니 다.그래서 초점 이 있 는 지 없 는 지 판단 을 해 봤 습 니 다.
setShake Animation(),이 방법 은 입력 상자 의 좌우 떨 림 방법 입 니 다.예전 에 저 는 어떤 응용 프로그램 에서 비슷 한 기능 을 본 적 이 있 습 니 다.사용자 이름 이 틀 리 면 입력 상자 가 어디 에 떨 리 는 지 재 미 있 습 니 다.사실은 모 바 일 애니메이션 을 사용 한 다음 에 움 직 이 는 그림 의 변화 율 을 사인 곡선 으로 설정 합 니 다.
다음은 Activity 레이아웃,사용자 정의 입력 상자 두 개,단추 하 나 를 사용 합 니 다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:background="#95CAE4"> 
 
 
  <com.example.clearedittext.ClearEditText 
    android:id="@+id/username" 
    android:layout_marginTop="60dp" 
    android:layout_width="fill_parent" 
    android:background="@drawable/login_edittext_bg"  
    android:drawableLeft="@drawable/icon_user" 
    android:layout_marginLeft="10dip" 
    android:layout_marginRight="10dip" 
    android:singleLine="true" 
    android:drawableRight="@drawable/delete_selector" 
    android:hint="     " 
    android:layout_height="wrap_content" > 
 
  </com.example.clearedittext.ClearEditText> 
 
  <com.example.clearedittext.ClearEditText 
    android:id="@+id/password" 
    android:layout_marginLeft="10dip" 
    android:layout_marginRight="10dip" 
    android:layout_marginTop="10dip" 
    android:drawableLeft="@drawable/account_icon" 
    android:hint="    " 
    android:singleLine="true" 
    android:password="true" 
    android:drawableRight="@drawable/delete_selector" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@id/username" 
    android:background="@drawable/login_edittext_bg" > 
  </com.example.clearedittext.ClearEditText> 
 
  <Button 
    android:id="@+id/login" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="10dip" 
    android:layout_marginRight="10dip" 
    android:background="@drawable/login_button_bg" 
    android:textSize="18sp" 
    android:textColor="@android:color/white" 
    android:layout_below="@+id/password" 
    android:layout_marginTop="25dp" 
    android:text="  " /> 
 
</RelativeLayout>
 
그 다음 에 인터페이스 코드 의 작성 입 니 다.주로 입력 상자 가 좌우 로 흔 들 리 는 것 을 테스트 할 뿐 간단 합 니 다.

package com.example.clearedittext; 
 
import android.app.Activity; 
import android.os.Bundle; 
import android.text.TextUtils; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.widget.Button; 
import android.widget.Toast; 
 
public class MainActivity extends Activity { 
  private Toast mToast; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
     
    final ClearEditText username = (ClearEditText) findViewById(R.id.username); 
    final ClearEditText password = (ClearEditText) findViewById(R.id.password); 
     
    ((Button) findViewById(R.id.login)).setOnClickListener(new OnClickListener() { 
       
      @Override 
      public void onClick(View v) { 
        if(TextUtils.isEmpty(username.getText())){ 
          //     
          username.setShakeAnimation(); 
          //     
          showToast("       "); 
          return; 
        } 
         
        if(TextUtils.isEmpty(password.getText())){ 
          password.setShakeAnimation(); 
          showToast("      "); 
          return; 
        } 
      } 
    }); 
  } 
   
  /** 
   *   Toast   
   * @param msg 
   */ 
  private void showToast(String msg){ 
    if(mToast == null){ 
      mToast = Toast.makeText(this, msg, Toast.LENGTH_SHORT); 
    }else{ 
      mToast.setText(msg); 
    } 
    mToast.show(); 
  } 
 
 
} 
프로젝트 를 실행 합 니 다.그림,비극,애니메이션 효과 가 없습니다.됐 습 니 다.이렇게 하 세 요.당신 도 프로젝트 에 넣 고 싶 지 않 습 니까?어서 요!

이상 은 본 고의 모든 내용 입 니 다.여러분 이 안 드 로 이 드 소프트웨어 프로 그래 밍 을 배 우 는 데 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기