自定义视图 (一) EditText

1. 配置

  1.1 扩展系统控件，增加功能、添加属性

  1.2 添加系统自带删除矢量图标 ic_baseline_close_24.xml

2. values文件夹下添加属性文件 attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="EditTextWithClear">
        <attr name="clearIcon" format="reference" />
    </declare-styleable>
</resources>

3. 自定义扩展 EditText, EditTextWithClear.kt

class EditTextWithClear @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : AppCompatEditText(context, attrs) {
    // private val iconDrawable = ContextCompat.getDrawable(context, R.drawable.ic_baseline_close_24)
    private var iconDrawable: Drawable? = null

    init {
        context.theme.obtainStyledAttributes(attrs, R.styleable.EditTextWithClear, 0, 0).apply {
            try {
                val iconID = getResourceId(R.styleable.EditTextWithClear_clearIcon, 0)
                if (iconID != 0) {
                    iconDrawable = ContextCompat.getDrawable(context, iconID)
                }
            } finally {
                recycle()
            }
        }
    }

    override fun onTextChanged(
        text: CharSequence?, start: Int, lengthBefore: Int, lengthAfter: Int
    ) {
        super.onTextChanged(text, start, lengthBefore, lengthAfter)
        toggleClearIcon()
    }

    //有触摸的时候
    override fun onTouchEvent(event: MotionEvent?): Boolean {
        //let 允许
        event?.let { e ->
            iconDrawable?.let {
                if (e.action == MotionEvent.ACTION_UP && (e.x > width - it.intrinsicWidth - 20) && (e.x < width + 20) && (e.y > height / 2 - it.intrinsicHeight / 2 - 20) && (e.y < height / 2 + it.intrinsicHeight / 2 + 20)) {
                    text?.clear()
                }
            }
        }
        performClick()
        return super.onTouchEvent(event)
    }

    override fun performClick(): Boolean {
        return super.performClick()
    }

    //是否聚焦
    override fun onFocusChanged(focused: Boolean, direction: Int, previouslyFocusedRect: Rect?) {
        super.onFocusChanged(focused, direction, previouslyFocusedRect)
        toggleClearIcon()
    }

    //是否显示清除按钮
    private fun toggleClearIcon() {
        val icon = if (isFocused && text?.isNotEmpty() == true) iconDrawable else null
        setCompoundDrawablesRelativeWithIntrinsicBounds(null, null, icon, null)
    }
}

4. 布局文件 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="116dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.502"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.example.customedittext.EditTextWithClear
        android:id="@+id/editTextClear"
        style="@style/Widget.AppCompat.EditText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="224dp"
        android:ems="10"
        android:hint="custom EditText"
        android:inputType="textPersonName"
        app:clearIcon="@drawable/ic_baseline_close_24"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.502"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        app:endIconMode="clear_text"
        app:layout_constraintEnd_toEndOf="@+id/editTextClear"
        app:layout_constraintStart_toStartOf="@+id/editTextClear"
        app:layout_constraintTop_toBottomOf="@+id/editTextClear">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="hint" />
    </com.google.android.material.textfield.TextInputLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

5. 调用 MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

6. 效果图