Как создать EditText с крестиком (x) в конце? - PullRequest
174 голосов
/ 15 июня 2011

Есть ли виджет типа EditText, который содержит крестик, или есть свойство для EditText, с помощью которого он создается автоматически? Я хочу, чтобы крестовая кнопка удаляла любой текст, написанный на EditText.

Ответы [ 14 ]

159 голосов
/ 15 июня 2011

Используйте следующую раскладку:

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

Вы также можете использовать идентификатор кнопки и выполнять любое действие, которое вы хотите, для его метода onClickListener.

117 голосов
/ 23 января 2013

Если вы используете DroidParts , я только что добавил ClearableEditText .

Вот как это выглядит с пользовательским фоном и значком очистки, установленным на abs__ic_clear_holo_light из ActionBarSherlock :

enter image description here

22 голосов
/ 08 января 2018

Это решение kotlin. Поместите этот вспомогательный метод в какой-нибудь файл 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()

Кстати, вы должны сначала добавить R.drawable.ic_clear или значок очистки. Это из Google- https://material.io/tools/icons/?icon=clear&style=baseline

16 голосов
/ 02 февраля 2013
Drawable x = getResources().getDrawable(R.drawable.x);
x.setBounds(0, 0, x.getIntrinsicWidth(), x.getIntrinsicHeight());
mEditText.setCompoundDrawables(null, null, x, null);

, где х:

enter image description here

14 голосов
/ 13 октября 2017

Библиотека поддержки Android имеет класс SearchView, который делает именно это. (Не получено из EditText, поэтому необходимо использовать SearchView.OnQueryTextListener вместо TextWatcher)

Search view with no text (and hint text

enter image description here

Использовать в 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" />
11 голосов
/ 03 июля 2013

Для drawable resource вы можете использовать стандартные изображения для Android:

http://androiddrawables.com/Menu.html

Например:

android:background="@android:drawable/ic_menu_close_clear_cancel"
5 голосов
/ 30 мая 2019

2019 решение с помощью Material Components для Android:

Добавление компонентов материала в настройку грейдера:

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

или, если вы не обновились до использования AndroidX libs, вы можете добавить его следующим образом:

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>

Обратите внимание: app: endIconMode = "clear_text"

Как обсуждено здесь Документы по дизайну материала

5 голосов
/ 23 августа 2013

Если вы не хотите использовать пользовательские виды или специальные макеты, вы можете использовать 9-patch для создания кнопки (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.

3 голосов
/ 15 июня 2017

Я сделал часть интерфейса, как показано ниже:

<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 enter image description here

Крест / Очистить кнопку скрыть / показать:

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 голосов
/ 06 мая 2017

Вот полная библиотека с виджетом: https://github.com/opprime/EditTextField

Чтобы использовать ее, вы должны добавить зависимость:

compile 'com.optimus:editTextField:0.2.0'

В файле layout.xml вы можете играть с виджетомнастройки:

xmlns:app="http://schemas.android.com/apk/res-auto"
  • приложение: clearButtonMode , может иметь такие значения: никогда не при редактировании, если только редактирование

  • приложение: clearButtonDrawable

Образец в действии:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...