Sonunda çapraz (x) düğmeli EditText nasıl oluşturulur?

EditTextÇapraz düğme içeren herhangi bir widget var mı veya EditTextotomatik olarak oluşturulduğu herhangi bir özellik var mı? Çapraz düğmenin yazılan metni silmesini istiyorum EditText.

Aşağıdaki düzeni kullanın:

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

Ayrıca, düğmenin kimliğini kullanabilir ve onClickListener yönteminde istediğiniz işlemi yapabilirsiniz.

Eğer kullanım edersek DroidParts , sadece ekledik ClearableEditText .

Burada özel bir arka plana & açık simge seti ile şu şekilde görünür abs__ic_clear_holo_lightgelen ActionBarSherlock :

Android için Material Design Components ile 2020 çözümü:

Gradle kurulumunuza Malzeme Bileşenleri ekleyin:

En son sürümü buradan arayın: https://maven.google.com/

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

ya da AndroidX kütüphanelerini kullanarak güncellenmemişse, şu şekilde ekleyebilirsiniz:

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

Sonra

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

Dikkat: app: endIconMode = "clear_text"

Burada tartışıldığı gibi Materyal tasarım dokümanları

Bu bir kotlin çözümüdür. Bu yardımcı yöntemi bazı kotlin dosyalarına koyun.

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

Ve sonra onCreateyöntemi aşağıdaki gibi kullanın ve gitmek için iyi olmalısınız-

yourEditText.setupClearButtonWithAction()

BTW, R.drawable.ic_clearilk önce eklemek veya net bir simge eklemeniz gerekir . Bu, google- https://material.io/tools/icons/?icon=clear&style=baseline adresinden

Android'in destek kütüphanesi SearchViewtam olarak bunu yapan bir sınıfa sahiptir. ( EditTextGerçi değil , bu yüzden bir SearchView.OnQueryTextListeneryerine kullanmak zorunda TextWatcher)

XML'de şu şekilde kullanın:

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

burada, x:

Için drawable resourcestandart android görüntüleri kullanabilirsiniz:

http://androiddrawables.com/Menu.html

Örneğin :

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

Özel görünümler veya özel düzenler kullanmak istemiyorsanız, (X) düğmesini yapmak için 9 yamayı kullanabilirsiniz.

Örnek: http://postimg.org/image/tssjmt97p/ (StackOverflow'da resim yayınlamak için yeterli puanım yok)

Sağ ve alt siyah piksellerin kesişimi içerik alanını temsil eder. Bu alanın dışındaki her şey dolgu. Kullanıcının x'i tıkladığını tespit etmek için şöyle bir OnTouchListener ayarlayabilirsiniz:

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

İhtiyaçlarınıza göre bu çözüm bazı durumlarda daha iyi çalışabilir. Ben benim xml daha az karmaşık tutmayı tercih ederim. Bu, solda bir simge olmasını istiyorsanız da yardımcı olur, çünkü sadece 9 yamaya dahil edebilirsiniz.

UI bölümünü aşağıdaki gibi yaptım:

<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

Çapraz / Temizle düğmesi gizle / göster:

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

Arama öğelerini işleme (ör. Kullanıcı yazılım klavyesinden aramayı tıkladığında)

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

Sil / Çapraz düğmesi

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

kullanım

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

Widget ile birlikte tam kütüphane: https://github.com/opprime/EditTextField

Bunu kullanmak için bağımlılığı eklemelisiniz:

compile 'com.optimus:editTextField:0.2.0'

Layout.xml dosyasında widget ayarlarıyla oynayabilirsiniz:

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

• app: clearButtonMode ， böyle değerlere sahip olabilir: asla her zaman whileDüzenleme

• app: clearButtonDrawable

Uygulamadaki örnek:

Sadece drawableEndsenin gibi yakın çapraz koymak EditText:

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

ve kullanım uzatma kolu tıklaması (veya kullanım OnTouchListenerdoğrudan sizinle ilgili şu 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
    }
}

uzatma kullanımı:

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

Bu snippet'i birden fazla düğme için Jaydip yanıtıyla kullanabilirsiniz. ET ve Düğme Elemanlarına referans aldıktan sonra onu arayın. Button öğesini ImageButton olarak değiştirmek zorunda olduğunuz için vecotr düğmesini kullandım:

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

Çerçeve düzenindeyseniz veya çerçeve düzeni oluşturabiliyorsanız başka bir yaklaşım denedim ....

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

Bu, bir çapraz simgeyi sağ çizilebilir olarak koyduğum bir düzenleme metnidir ve ÜSTÜNDEN metni temizleyen şeffaf bir düğme koydum.

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