如何使用cross(x)按钮创建EditText ?

Is there any widget like EditText which contains a cross button, or is there any property for EditText by which it is created automatically? I want the cross button to delete whatever text written in EditText.

是否有像EditText这样的小部件，其中包含一个交叉按钮，或者是它被自动创建的EditText的属性?我希望交叉按钮删除在EditText中编写的任何文本。

14 个解决方案

#1

Use the following layout:

使用下面的布局:

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

You can also use the button's id and perform whatever action you want on its onClickListener method.

您还可以使用按钮的id并在其onClickListener方法上执行任何您想要的操作。

#2

If you happen to use DroidParts, I've just added ClearableEditText.

如果您碰巧使用DroidParts，我刚刚添加了ClearableEditText。

Here's what it looks like with a custom background & clear icon set to abs__ic_clear_holo_light from ActionBarSherlock:

下面是自定义背景和清除图标设置为abs__ic_clear_holo_light从ActionBarSherlock:

#3

You can also check this for modified and extended answer ClearableEditText.

您还可以检查修改和扩展的answer ClearableEditText。

#4

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

where, x is:

,x是:

#5

For drawable resource you can use standard android images :

对于可绘制的资源，您可以使用标准的android映像:

http://androiddrawables.com/Menu.html

http://androiddrawables.com/Menu.html

For example :

例如:

android:background="@android:drawable/ic_menu_close_clear_cancel"

#6

Android's support libarary has a SearchView class that does exactly this. (Not derrived from EditText though, so have to use a SearchView.OnQueryTextListener instead of a TextWatcher)

Android的支持libarary有一个SearchView类，它可以做到这一点。(但不是从EditText中删除的，所以必须使用SearchView。OnQueryTextListener而不是TextWatcher)

Use in XML like so:

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

#7

If you don't want to use custom views or special layouts, you can use 9-patch to make the (X) button .

如果您不想使用自定义视图或特殊的布局，您可以使用9个补丁来创建(X)按钮。

Example: http://postimg.org/image/tssjmt97p/ (I don't have enough points to post images on *)

示例:http://postimg.org/image/tssjmt97p/(我没有足够的点在*上发布图像)

The intersection of the right and bottom black pixels represent the content area. Anything outside of that area is padding. So to detect that the user clicked on the x you can set a OnTouchListener like so:

右边和底部黑色像素的交集表示内容区域。该区域之外的任何东西都是填充的。为了检测用户点击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;
            }
        });

According to your needs this solution can work better in some cases. I prefer to keep my xml less complicated. This also helps if you want to have an icon on the left, as you can simply include it in the 9 patch.

根据您的需要，这种解决方案在某些情况下会更好。我宁愿保持xml不那么复杂。如果您希望在左边有一个图标，这也会有所帮助，因为您可以将它包含在9个补丁中。

#8

I did the UI part like below:

我做了如下的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

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

balloon_overlay_close.png

Cross/Clear button hide/show:

交叉/明确的按钮隐藏/显示:

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

Handle search stuffs (i.e when user clicks search from soft key board)

处理搜索东西(我。e用户点击软键盘搜索)

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

Clear/Cross button

明确/十字按钮

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

#9

This is a kotlin solution. Put this helper method in some kotlin file-

这是科特林溶液。将这个助手方法放在某个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
    })
}

And then use it as following in the onCreate method and you should be good to go-

然后在onCreate方法中使用它，应该很好

yourEditText.setupClearButtonWithAction()

BTW, you have to add R.drawable.ic_clear or the clear icon at first. This one is from google- https://material.io/icons/#ic_clear

顺便说一句，你得加上r。首先是ic_clear或clear图标。这个来自谷歌- https://material.io/icons/#ic_clear

#10

You can download source here:

你可在此下载资料:

https://github.com/GhOsTTT/editTextXbutton

https://github.com/GhOsTTT/editTextXbutton

have a nice day

祝你有美好的一天

#11

Here is complete library with the widget: https://github.com/opprime/EditTextField

这里有一个完整的库，包含了这个小部件:https://github.com/opprime/EditTextField

To use it you should add the dependency:

要使用它，您应该添加依赖项:

compile 'com.optimus:editTextField:0.2.0'

In the layout.xml file you can play with the widget settings:

在布局。可以使用小部件设置的xml文件:

xmlns:app="http://schemas.android.com/apk/res-auto"

• app:clearButtonMode，can has such values: never always whileEditing unlessEditing

  应用:clearButtonMode,能有这样的价值观:不要总是whileEditing unlessEditing

• app:clearButtonDrawable

  应用:clearButtonDrawable

Sample in action:

样品在行动:

#12

Use

使用

android:drawableRight="@android:drawable/ic_input_delete"

#13

You can use this snippet with Jaydip answer for more than one button. just call it after getting a reference to the ET and Button Elements. I used vecotr button so you have to change the Button element to ImageButton:

您可以使用此代码片段使用Jaydip回答多个按钮。在获得对ET和按钮元素的引用后调用它。我使用了vecotr按钮，所以你需要将按钮元素改为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);
                }
            }
        });
    }

#14

If you are in frame layout or you can create a frame layout I tried another approach....

如果你在框架布局或您可以创建一个框架布局我尝试另一种方法....

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

This is an edit text where I put a cross icon as a right drawable and than UPON it I put a transparent button which clears text.

这是一个编辑文本，我把交叉图标作为一个正确的绘图工具，而不是在上面放一个透明的按钮来清除文本。