如何创建EditText与十字(x)按钮在它的结束?

是否存在像EditText这样包含交叉按钮的小部件,或者是否存在自动创建EditText的属性?我想让十字按钮删除任何写在EditText的文本。

191019 次浏览

使用以下布局:

<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方法上执行您想要的任何操作。

如果你碰巧使用DroidParts,我刚刚添加了ClearableEditText

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

enter image description here

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

式中x为:

enter image description here

对于drawable resource,你可以使用标准的android映像:

web archive for http://androiddrawables.com/Menu.html

例如:

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

如果你不想使用自定义视图或特殊的布局,你可以使用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补丁。

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

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

这是一个编辑文本,我把一个十字图标作为一个右绘图,然后在它上面我放了一个透明的按钮,清除文本。

使用

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

您可以使用这个代码片段和Jaydip回答多个按钮。在获得ET和按钮元素的引用后调用它。我使用了vececotr button,所以你必须将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);
}
}
});
}
下面是带有小部件的完整库: https://github.com/opprime/EditTextField < / p >

要使用它,你应该添加依赖:

compile 'com.optimus:editTextField:0.2.0'

在layout.xml文件中,你可以设置小部件:

xmlns:app="http://schemas.android.com/apk/res-auto"
  • app:clearButtonMode,can有如下值: 从来没有 总是 whileEditing 李unlessEditing < / p > < / >

  • 应用:clearButtonDrawable

实际例子:

enter image description here

我的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"?>
<!-- res/drawable/rounded_edittext_focused.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >


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


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


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


</shape>

balloon_overlay_close.pngenter 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("");
}
});

Android的支持库中有一个SearchView类正是这样做的。(虽然不是从EditText派生的,所以必须使用SearchView.OnQueryTextListener而不是TextWatcher)

无文本的搜索视图(和提示文本 < / >

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

这是一个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或clear图标。这个来自谷歌- https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Aclear%3A

Android材质设计组件2020解决方案:

添加材质组件到你的gradle设置:

从这里查找最新版本:https://maven.google.com/

implementation 'com.google.android.material:material:1.3.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"

正如这里讨论的材料设计文件

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

只要在你的EditText中放入类似drawableEnd的闭叉:

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

并使用扩展处理单击(或直接在你的EditText上使用OnTouchListener):

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("")
}

下面是kotlin中简单的完整解决方案。

整个布局就是你的搜索栏

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_margin="10dp"
android:background="@drawable/your_desired_drawable">


<EditText
android:id="@+id/search_et"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_toStartOf="@id/clear_btn"
android:background="@null"
android:hint="search..."
android:imeOptions="actionSearch"
android:inputType="text"
android:maxLines="1"
android:paddingStart="15dp"
android:paddingEnd="10dp" />


<ImageView
android:id="@+id/clear_btn"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_centerInParent="true"
android:layout_marginEnd="15dp"
android:visibility="gone"
android:src="@drawable/ic_baseline_clear_24"/>


</RelativeLayout>

现在这是清除按钮的功能,粘贴这段代码在onCreate方法。

search_et.addTextChangedListener(object: TextWatcher {
override fun beforeTextChanged(s:CharSequence, start:Int, count:Int, after:Int) {
}
override fun onTextChanged(s:CharSequence, start:Int, before:Int, count:Int) {
}
override fun afterTextChanged(s: Editable) {
if (s.isNotEmpty()){
clear_btn.visibility = VISIBLE
clear_btn.setOnClickListener {
search_et.text.clear()
}
}else{
clear_btn.visibility = GONE
}
}
})

明确的文本:

带有清晰文本尾图标的文本字段。

如果设置了,当文本出现时将显示一个图标,按下该图标将清除输入文本。

    ...
app:endIconMode="clear_text">
​
...
​
</com.google.android.material.textfield.TextInputLayout>

我把它留在这里:

< a href = " https://material。io /开发/ android /组件/文本区域noreferrer“rel = > material.io < / >

< p >的例子
example < / p >