끝에 cross (x) 버튼으로 EditText를 만드는 방법은 무엇입니까?


198

EditText크로스 버튼이 포함 된 위젯이 있습니까 , 아니면 EditText자동으로 생성되는 속성 이 있습니까? 십자 버튼으로 작성된 텍스트를 삭제하고 싶습니다 EditText.


2
표준 위젯으로 보이지 않습니다. 그러나 "android edittext clear button x"에 대한 Google 검색을 통해 몇 가지 접근 방식을 찾을 수 있습니다. 그래서 저는 "클리어 버튼"이라고 부르는 것 같습니다. 또한 관련 질문에 대한이 답변을 참조하십시오 : stackoverflow.com/questions/4175398/clear-edittext-on-click/…
HostileFork는 SE

당신은 여기에 소스를 다운로드 할 수 있습니다 github.com/GhOsTTT/editTextXbutton는 좋은 하루 되세요
고칸 Musapaşaoğluヅ

본질적으로 중복되는 또 다른 질문은 안드로이드에서 uitextfield 속성을 구현
Alex Cohn

답변:


166

다음 레이아웃을 사용하십시오.

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="9dp"
    android:padding="5dp">

    <EditText
        android:id="@+id/calc_txt_Prise"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"  
        android:layout_marginTop="20dp"
        android:textSize="25dp"
        android:textColor="@color/gray"
        android:textStyle="bold"
        android:hint="@string/calc_txt_Prise"
        android:singleLine="true" />

    <Button
        android:id="@+id/calc_clear_txt_Prise"      
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_gravity="right|center_vertical"
        android:background="@drawable/delete" />

</FrameLayout>

버튼의 ID를 사용하고 onClickListener 메소드에서 원하는 작업을 수행 할 수도 있습니다.


8
이것은 비효율적 인 방법입니다. yanchenko의 대답은 복합 드로어 블을 사용하는 올바른 접근법입니다.
numan salati

4
이 솔루션을 선택하고 이미지가 너무 많이 늘어난 경우 일반 버튼 대신 ImageButton을 사용해야합니다.
personne3000

3
이 솔루션은 "비효율적"이지만 맹인에게는 훨씬 더 접근하기 쉽습니다. 드로어 블을 사용하면 사용자가 X 버튼으로 빠르게 할 수있는 텍스트를 지우는 매우 복잡한 작업을 수행해야합니다.
Daniel Monteiro

2
이것에 대한 비효율은 무엇입니까?
데니

121

DroidParts 사용하는 경우 ClearableEditText 추가했습니다 .

다음 abs__ic_clear_holo_lightActionBarSherlock 에서 사용자 정의 배경 및 명확한 아이콘으로 설정된 모습입니다 .

여기에 이미지 설명을 입력하십시오


11
클래스가 확장되므로 최상의 솔루션 EditText입니다. Thx @yanchenko
tbruyelle

2
@stephanek. 개발 브랜치에서 이것을 고쳤습니다. 1.4.3 릴리스의 일부가 될 것입니다.
yanchenko

4
감사! DroidParts에 ClearableAutoCompleteTextView를 포함시킬 수도 있다면 정말 멋질 것입니다. DroidParts 라이브러리를 사용하여 ClearableEditText에서 코드를 복사하고 AutoCompleteTextView를 확장하십시오.
RobinDeCroon

2
이것은 폭탄입니다! 일반 TextWatcher와 함께 TextWatcherAdapter 종속성을 변경하여 독립형으로 사용할 수도 있습니다.
Pimentoso

1
@yanchenko 당신의 구현을 살펴 보았습니다. 허용되는 터치 영역 사이가 다소 작고 편집 텍스트 내에서 y 축을 따라 터치 이벤트를 수락하는 기본 높이보다 큰 편집 텍스트가있는 것처럼 보입니다. 귀하의 구현은 전자이고 후자는 내 것입니다. 비슷한 상황에서 동일한 작업을 수행 하시겠습니까? 즉, 누르거나 누를 수있는 더 작은 히트 상자를 사용하십시오. 확대하거나 큰 편집 텍스트를 사용하면 프레스가 드로어 블 경계 바깥에있을 수 있습니다.
Jack.Ramsden

64

Android 용 Material Design Components를 통한 2020 솔루션 :

Gradle 설정에 재료 구성 요소 추가 :

https://maven.google.com/ 에서 최신 버전을 찾으십시오.

implementation 'com.google.android.material:material:1.1.0'

또는 AndroidX 라이브러리 사용으로 업데이트하지 않은 경우 다음과 같이 추가 할 수 있습니다.

implementation 'com.android.support:design:28.0.0'

그때

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint_text"
    app:endIconMode="clear_text">

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

</com.google.android.material.textfield.TextInputLayout>

: 지불에 대한 관심 응용 프로그램 : endIconMode = "clear_text"

여기에서 논의한 바와 같이 머티리얼 디자인 문서


10
이것은 새로운 대답이되어야합니다. 필자의 경우 AndroidX 라이브러리로 업데이트하지 않고 구현할 수 없었습니다.

@Ben

모든 xml 속성이 아직 지원되지는 않으므로 설명서를 반드시 읽으십시오. 때로는 정확한 구현 세부 정보가있는 곳이므로 소스를 확인하거나 메시지를 커밋해야 할 수도 있습니다. 사용자 정의 endIcon에 대해 이러한 유형의 문제가있었습니다. 커밋 메시지는 xml 속성이 아직이를 지원하는 구현이 없음을 나타냅니다. 구현이 완료 될 때까지 다른 접근 방식을 사용해야합니다.
M. Smith

2020 년 최고의 답변.
Sam Chen

app : endIconMode = "clear_text"가 작동 <androidx.appcompat.widget.AppCompatEditText/>합니까? 당신도 저를 도와주세요
Arbaz.in

32

이것은 코 틀린 솔루션입니다. 이 도우미 메소드를 kotlin 파일에 넣으십시오.

fun EditText.setupClearButtonWithAction() {

    addTextChangedListener(object : TextWatcher {
        override fun afterTextChanged(editable: Editable?) {
            val clearIcon = if (editable?.isNotEmpty() == true) R.drawable.ic_clear else 0
            setCompoundDrawablesWithIntrinsicBounds(0, 0, clearIcon, 0)
        }

        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = Unit
        override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) = Unit
    })

    setOnTouchListener(View.OnTouchListener { _, event ->
        if (event.action == MotionEvent.ACTION_UP) {
            if (event.rawX >= (this.right - this.compoundPaddingRight)) {
                this.setText("")
                return@OnTouchListener true
            }
        }
        return@OnTouchListener false
    })
}

그런 다음 onCreate방법에 따라 다음과 같이 사용하십시오.

yourEditText.setupClearButtonWithAction()

BTW, 당신은 R.drawable.ic_clear먼저 또는 명확한 아이콘 을 추가해야합니다 . 이것은 google- https://material.io/tools/icons/?icon=clear&style=baseline 에서 온 것입니다.


this.clearFocus()return true 문 앞에 삽입 하면 onFocusChange리스너 를 통해 EditText 호출자에서이 이벤트를들을 수 있습니다.
Joost Schepel

문제가 발생했습니다. 문제는 AppCompatEditText에서 드로어 블 왼쪽 아이콘을 설정 하고이 기능을 호출하면 제거됩니다. 문제가 무엇인지 알려주시겠습니까?
Arbaz.

@ Arbaz.in 메소드 호출 때문입니다 setCompoundDrawablesWithIntrinsicBounds(0, 0, clearIcon, 0). 왼쪽 드로어 블 아이콘 ID를이 함수의 새 매개 변수로 전달하여 호출에 넣을 수 있습니다.
Gulshan

@ Gulshan 난 여전히 그 drawable을 제거했습니다
Arbaz.in

20

Android의 지원 라이브러리에는 정확히이 작업을 수행하는 SearchView클래스가 있습니다. ( EditText그러나 파생되지는 않았으므로 SearchView.OnQueryTextListener대신 을 사용해야 합니다 TextWatcher)

텍스트가없는 검색보기 (및 힌트 텍스트 "검색")

여기에 이미지 설명을 입력하십시오

XML에서 다음과 같이 사용하십시오.

  <android.support.v7.widget.SearchView
            android:id="@+id/searchView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:iconifiedByDefault="false"
            android:queryHint="@string/SearchHint"
            app:iconifiedByDefault="false"
            app:queryHint="@string/SearchHint" />

16
Drawable x = getResources().getDrawable(R.drawable.x);
x.setBounds(0, 0, x.getIntrinsicWidth(), x.getIntrinsicHeight());
mEditText.setCompoundDrawables(null, null, x, null);

여기서 x는 다음과 같습니다.

여기에 이미지 설명을 입력하십시오


8
여전히 onClickListener를 할당해야합니까? 빠른 검색은 나에게 이것을 주었다 . 더 나은 해결책은 Framelayout과 함께하는 것입니다. 그래도 고마워!
VenoM


6

사용자 정의보기 또는 특수 레이아웃을 사용하지 않으려면 9 패치를 사용하여 (X) 버튼을 만들 수 있습니다.

예 : http://postimg.org/image/tssjmt97p/ (StackOverflow에 이미지를 게시하기에 충분한 포인트가 없습니다)

오른쪽 및 아래쪽 검은 색 픽셀의 교차점은 콘텐츠 영역을 나타냅니다. 그 영역 밖의 모든 것은 패딩입니다. 따라서 사용자가 x를 클릭했음을 감지하려면 다음과 같이 OnTouchListener를 설정할 수 있습니다.

editText.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                if (motionEvent.getAction() == MotionEvent.ACTION_UP){
                    if (motionEvent.getX()>(view.getWidth()-view.getPaddingRight())){
                        ((EditText)view).setText("");
                    }
                }
                return false;
            }
        });

필요에 따라이 솔루션은 경우에 따라 더 잘 작동 할 수 있습니다. XML을 덜 복잡하게 유지하는 것을 선호합니다. 9 패치에 간단히 포함시킬 수 있으므로 왼쪽에 아이콘이있는 경우에도 도움이됩니다.


4

아래처럼 UI 부분을 수행했습니다.

<RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:layout_marginTop="9dp"
            android:padding="5dp">

            <EditText
                android:id="@+id/etSearchToolbar"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:textSize="13dp"
                android:padding="10dp"
                android:textColor="@android:color/darker_gray"
                android:textStyle="normal"
                android:hint="Search"
                android:imeOptions="actionSearch"
                android:inputType="text"
                android:background="@drawable/edittext_bg"
                android:maxLines="1" />

            <ImageView
                android:id="@+id/ivClearSearchText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginRight="6dp"
                android:src="@drawable/balloon_overlay_close"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true" />


        </RelativeLayout>

edittext_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<solid android:color="#FFFFFF" />

<stroke
    android:width="1dp"
    android:color="#C9C9CE" />

<corners
    android:bottomLeftRadius="15dp"
    android:bottomRightRadius="15dp"
    android:topLeftRadius="15dp"
    android:topRightRadius="15dp" />

balloon_overlay_close.png여기에 이미지 설명을 입력하십시오

크로스 / 클리어 버튼 숨기기 / 표시 :

searchBox.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            if(charSequence.length() > 0){
                clearSearch.setVisibility(View.VISIBLE);
            }else{
                clearSearch.setVisibility(View.GONE);
            }
        }

        @Override
        public void afterTextChanged(Editable editable) {}
    });

검색 항목 처리 (즉, 사용자가 소프트 키보드에서 검색을 클릭 할 때)

searchBox.setOnEditorActionListener(new TextView.OnEditorActionListener() {
        @Override
        public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
            if (actionId == EditorInfo.IME_ACTION_SEARCH) {
                String contents = searchBox.getText().toString().trim();
                if(contents.length() > 0){
                    //do search

                }else
                    //if something to do for empty edittext

                return true;
            }
            return false;
        }
    });`

지우기 / 십자 버튼

  clearSearch.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            searchBox.setText("");
        }
    });


2

다음은 위젯이 포함 된 전체 라이브러리입니다. https://github.com/opprime/EditTextField

그것을 사용하려면 의존성을 추가해야합니다 :

compile 'com.optimus:editTextField:0.2.0'

layout.xml 파일에서 위젯 설정으로 재생할 수 있습니다.

xmlns:app="http://schemas.android.com/apk/res-auto"
  • app : clearButtonMode는 다음과 같은 값을 가질 수 있습니다.

  • app : clearButtonDrawable

작동중인 샘플 :

여기에 이미지 설명을 입력하십시오


2

다음과 같이 십자가를 가깝게 넣으 drawableEnd십시오 EditText.

<EditText
     ...
    android:drawableEnd="@drawable/ic_close"
    android:drawablePadding="8dp"
     ... />

확장 프로그램 사용 하여 클릭을 처리하십시오 (또는에서 OnTouchListener직접 사용 EditText).

fun EditText.onDrawableEndClick(action: () -> Unit) {
    setOnTouchListener { v, event ->
        if (event.action == MotionEvent.ACTION_UP) {
            v as EditText
            val end = if (v.resources.configuration.layoutDirection == View.LAYOUT_DIRECTION_RTL)
                v.left else v.right
            if (event.rawX >= (end - v.compoundPaddingEnd)) {
                action.invoke()
                return@setOnTouchListener true
            }
        }
        return@setOnTouchListener false
    }
}

확장 사용법 :

editText.onDrawableEndClick {
    // TODO clear action
    etSearch.setText("")
}

1

이 스 니펫은 하나 이상의 단추에 Jaydip 응답과 함께 사용할 수 있습니다. ET 및 버튼 요소에 대한 참조를 얻은 후 호출하십시오. vecotr 버튼을 사용 했으므로 Button 요소를 ImageButton으로 변경해야합니다.

private void setRemovableET(final EditText et, final ImageButton resetIB) {

        et.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus && et.getText().toString().length() > 0)
                    resetIB.setVisibility(View.VISIBLE);
                else
                    resetIB.setVisibility(View.INVISIBLE);
            }
        });

        resetIB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                et.setText("");
                resetIB.setVisibility(View.INVISIBLE);
            }
        });

        et.addTextChangedListener(new TextWatcher() {
            @Override
            public void afterTextChanged(Editable s) {}
            @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){
                    resetIB.setVisibility(View.VISIBLE);
                }else{
                    resetIB.setVisibility(View.INVISIBLE);
                }
            }
        });
    }

0

프레임 레이아웃에 있거나 프레임 레이아웃을 만들 수 있다면 다른 접근법을 시도했습니다 ....

<TextView
    android:id="@+id/inputSearch"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableRight="@drawable/ic_actionbar"
    android:layout_alignParentBottom="true"
    android:layout_toRightOf="@+id/back_button"/>

<Button
    android:id="@+id/clear_text_invisible_button"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_gravity="right|center_vertical"
    android:background="@color/transparent"
    android:layout_alignBaseline="@+id/inputSearch"
    android:layout_alignBottom="@+id/inputSearch"
    android:layout_alignRight="@+id/inputSearch"
    android:layout_alignEnd="@+id/inputSearch"
    android:layout_marginRight="13dp"
    />

이것은 십자형 아이콘을 오른쪽 드로어 블로 배치하는 편집 텍스트이며 UPON보다 투명 버튼을 사용하여 텍스트를 지 웁니다.


0
    <EditText
    android:id="@+id/idSearchEditText"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dimen_40dp"
    android:drawableStart="@android:drawable/ic_menu_search"
    android:drawablePadding="8dp"
    android:ellipsize="start"
    android:gravity="center_vertical"
    android:hint="Search"
    android:imeOptions="actionSearch"
    android:inputType="text"
    android:paddingStart="16dp"
    android:paddingEnd="8dp"
/>

EditText mSearchEditText = findViewById(R.id.idSearchEditText);
mSearchEditText.addTextChangedListener(this);
mSearchEditText.setOnTouchListener(this);


@Override
public void afterTextChanged(Editable aEditable) {
    int clearIcon = android.R.drawable.ic_notification_clear_all;
    int searchIcon = android.R.drawable.ic_menu_search;
    if (aEditable == null || TextUtils.isEmpty(aEditable.toString())) {
        clearIcon = 0;
        searchIcon = android.R.drawable.ic_menu_search;
    } else {
        clearIcon = android.R.drawable.ic_notification_clear_all;
        searchIcon = 0;
    }
    Drawable leftDrawable =  null;
    if (searchIcon != 0) {
        leftDrawable = getResources().getDrawable(searchIcon);
    }
    Drawable rightDrawable = null;
    if (clearIcon != 0) {
        rightDrawable = getResources().getDrawable(clearIcon);
    }

    mSearchEditText.setCompoundDrawablesWithIntrinsicBounds(leftDrawable, null, rightDrawable, null);
}


@Override
public boolean onTouch(View aView, MotionEvent aEvent) {
    if (aEvent.getAction() == MotionEvent.ACTION_UP){
        if (aEvent.getX() > ( mSearchEditText.getWidth() - 
         mSearchEditText.getCompoundPaddingEnd())){
            mSearchEditText.setText("");
        }
    }
    return false;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.