Android EditText顯示圖標

實現了要給帶清除按鈕的ClearEditText,但是無法顯示圖標

<androidx.constraintlayout.widget.ConstraintLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="center">

       <ImageView
           android:id="@+id/iconImageViewKey"
           android:layout_width="24dp"
           android:layout_height="24dp"
           android:src="@drawable/ic_baseline_key_24"
           app:tint="@color/grid"
           android:contentDescription="Icon"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent"
           app:layout_constraintBottom_toBottomOf="parent" />

       <com.tools.qrtestassist.component.ClearEditText
           android:id="@+id/password"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:hint="請輸入密碼"
           android:drawablePadding="8dp"
           android:inputType="text"
           android:maxLength="10"
           app:layout_constraintStart_toEndOf="@id/iconImageViewKey"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintTop_toTopOf="parent"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintBaseline_toBaselineOf="@id/iconImageViewKey" /> <!-- 使用這個屬性進行垂直對齊 -->
   </androidx.constraintlayout.widget.ConstraintLayout>

這樣寫圖標在線外不太好看,從新修改ClearEditText

最終代碼

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.appcompat.widget.AppCompatEditText;
import androidx.core.content.ContextCompat;
import androidx.core.graphics.drawable.DrawableCompat;

import com.tools.qrtestassist.R;

public class ClearEditText extends AppCompatEditText {
    private Drawable clearButton;
    private boolean hasFocus = false;

    public ClearEditText(Context context) {
        super(context);
        init();
    }

    public ClearEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ClearEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        clearButton = new ClearIconDrawable(getContext());

        int iconColor = ContextCompat.getColor(getContext(), R.color.grid); // 將 icon_color 替換爲實際的顏色資源
        // 獲取XML中定義的drawableStart圖標
        Drawable[] drawables = getCompoundDrawablesRelative();
        Drawable startIcon = drawables[0];

        if (startIcon != null) {
            startIcon = DrawableCompat.wrap(startIcon);
            DrawableCompat.setTint(startIcon, iconColor);
            startIcon.setBounds(0, 0, startIcon.getIntrinsicWidth(), startIcon.getIntrinsicHeight());
            // 設置drawableStart圖標的位置和大小
        }

        // 設置左邊的drawableStart圖標和右邊的清除圖標
        setCompoundDrawablesRelativeWithIntrinsicBounds(startIcon, null, clearButton, null);

        setClearIconVisible(false);

        this.setOnFocusChangeListener(new OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean hasFocus) {
                ClearEditText.this.hasFocus = hasFocus;
                setClearIconVisible(hasFocus);
                // 如果爲空,即使有焦點,也不顯示
                if (ClearEditText.this.getText().toString().equals(""))
                    setClearIconVisible(false);
            }
        });

        this.addTextChangedListener(new TextWatcher() {
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }

            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void afterTextChanged(Editable s) {
                setClearIconVisible(hasFocus && s.length() > 0);
            }
        });
    }

    private void setClearIconVisible(boolean visible) {

        Drawable[] drawables = getCompoundDrawablesRelative();
        Drawable startIcon = drawables[0];
        if(startIcon!=null)
        {
            startIcon = DrawableCompat.wrap(startIcon);
            startIcon.setBounds(0, 0, startIcon.getIntrinsicWidth(), startIcon.getIntrinsicHeight());
        }
        setCompoundDrawablesRelativeWithIntrinsicBounds(startIcon, null, visible ? clearButton : null, null);
        //Drawable startIcon = getCompoundDrawablesRelative()[0]; // 獲取drawableStart圖標
        //setCompoundDrawables(startIcon, null, visible ? clearButton : null, null);
        //setCompoundDrawables(null, null, visible ? clearButton : null, null);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            if (clearButton != null) {
                int touchX = (int) event.getX();
                if (touchX > (getWidth() - getPaddingEnd() - clearButton.getIntrinsicWidth())) {
                    setText("");
                    return true;
                }
            }
        }
        return super.onTouchEvent(event);
    }
}

最終效果
image
同時支持x按鈕
image

按這個思路進一步優化,可以實現同時顯示圖標和Label
image

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章