Existe-t-il un widget comme celui EditText
qui contient un bouton croisé, ou existe-t-il une propriété pour EditText
laquelle il est créé automatiquement? Je veux que le bouton en croix supprime le texte écrit EditText
.
Existe-t-il un widget comme celui EditText
qui contient un bouton croisé, ou existe-t-il une propriété pour EditText
laquelle il est créé automatiquement? Je veux que le bouton en croix supprime le texte écrit EditText
.
Réponses:
Utilisez la disposition suivante:
<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>
Vous pouvez également utiliser l'ID du bouton et effectuer l'action que vous souhaitez sur sa méthode onClickListener.
S'il vous arrive d'utiliser DroidParts , je viens d'ajouter ClearableEditText .
Voici à quoi cela ressemble avec un arrière-plan personnalisé et une icône claire définie à abs__ic_clear_holo_light
partir d' ActionBarSherlock :
EditText
. Thx @yanchenko
Solution 2020 via Material Design Components pour Android:
Ajoutez des composants de matériau à votre configuration de gradle:
Recherchez la dernière version à partir d'ici: https://maven.google.com/
implementation 'com.google.android.material:material:1.1.0'
ou si vous n'avez pas mis à jour l'utilisation des bibliothèques AndroidX, vous pouvez l'ajouter de cette façon:
implementation 'com.android.support:design:28.0.0'
ensuite
<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>
Faire attention à: app: endIconMode = "clear_text"
Comme discuté ici Documents de conception de matériaux
<androidx.appcompat.widget.AppCompatEditText/>
? pouvez-vous m'aider s'il vous plait
Ceci est une solution kotlin. Mettez cette méthode d'assistance dans un fichier 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
})
}
Et puis utilisez-le comme suit dans la onCreate
méthode et vous devriez être bon pour aller-
yourEditText.setupClearButtonWithAction()
BTW, vous devez d'abord ajouter R.drawable.ic_clear
ou l'icône claire. Celui-ci est de google- https://material.io/tools/icons/?icon=clear&style=baseline
this.clearFocus()
avant l'instruction return true, vous pouvez écouter cet événement sur l'appelant EditText avec l' onFocusChange
auditeur
setCompoundDrawablesWithIntrinsicBounds(0, 0, clearIcon, 0)
. Vous pouvez passer l'identifiant de l'icône à gauche comme nouveau paramètre à cette fonction et le mettre dans l'appel.
La bibliothèque de support d'Android a une SearchView
classe qui fait exactement cela. (Pas dérivé EditText
cependant, il faut donc utiliser un SearchView.OnQueryTextListener
au lieu d'un TextWatcher
)
Utilisez en XML comme ceci:
<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" />
Drawable x = getResources().getDrawable(R.drawable.x);
x.setBounds(0, 0, x.getIntrinsicWidth(), x.getIntrinsicHeight());
mEditText.setCompoundDrawables(null, null, x, null);
où x est:
Car drawable resource
vous pouvez utiliser des images Android standard:
http://androiddrawables.com/Menu.html
Par exemple :
android:background="@android:drawable/ic_menu_close_clear_cancel"
Si vous ne souhaitez pas utiliser des vues personnalisées ou des dispositions spéciales, vous pouvez utiliser 9 patchs pour créer le bouton (X).
Exemple: http://postimg.org/image/tssjmt97p/ (je n'ai pas assez de points pour publier des images sur StackOverflow)
L'intersection des pixels noirs droit et inférieur représente la zone de contenu. Tout ce qui est en dehors de cette zone est du rembourrage. Donc, pour détecter que l'utilisateur a cliqué sur le x, vous pouvez définir un OnTouchListener comme ceci:
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;
}
});
Selon vos besoins, cette solution peut mieux fonctionner dans certains cas. Je préfère garder mon xml moins compliqué. Cela est également utile si vous souhaitez avoir une icône à gauche, car vous pouvez simplement l'inclure dans le patch 9.
J'ai fait la partie UI comme ci-dessous:
<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" />
Bouton croix / effacer masquer / afficher:
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) {}
});
Gérer les éléments de recherche (c.-à-d. Lorsque l'utilisateur clique sur Rechercher à partir du clavier de touches programmables)
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;
}
});`
Bouton Clear / Cross
clearSearch.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
searchBox.setText("");
}
});
Utilisation
android:drawableRight="@android:drawable/ic_input_delete"
Voici la bibliothèque complète avec le widget: https://github.com/opprime/EditTextField
Pour l'utiliser, vous devez ajouter la dépendance:
compile 'com.optimus:editTextField:0.2.0'
Dans le fichier layout.xml, vous pouvez jouer avec les paramètres du widget:
xmlns:app="http://schemas.android.com/apk/res-auto"
app: clearButtonMode , peut avoir de telles valeurs: jamais toujours whileEditing saufEditing
app: clearButtonDrawable
Échantillon en action:
Mettez juste une croix serrée comme drawableEnd
dans votre EditText
:
<EditText
...
android:drawableEnd="@drawable/ic_close"
android:drawablePadding="8dp"
... />
et utilisez l'extension pour gérer les clics (ou utilisez OnTouchListener
directement sur votre 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
}
}
utilisation de l'extension:
editText.onDrawableEndClick {
// TODO clear action
etSearch.setText("")
}
Vous pouvez utiliser cet extrait de code avec la réponse Jaydip pour plusieurs boutons. il suffit de l'appeler après avoir obtenu une référence aux éléments ET et Button. J'ai utilisé le bouton vecotr, vous devez donc changer l'élément Button en 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);
}
}
});
}
Si vous êtes en disposition de cadre ou que vous pouvez créer une disposition de cadre, j'ai essayé une autre approche ....
<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"
/>
Ceci est un texte d'édition où je mets une icône en croix comme un dessin à droite et qu'APRÈS, je mets un bouton transparent qui efface le texte.
<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;
}