Android Edittext增加一键清除按钮

前言

因为合规的原因, 所有的输入框都得在后面加上一个清除按钮, 直接布局里面添加ImageView虽然也可以, 但是显然需要每个用到的地方都要copy代码, 很是不妥, 所以但是写了这个实现类, 只需要替换到原来的EditTextView就可以了. 清除逻辑已经实现好了.

效果

Project Name (1).gif

实现代码

kotlin代码部分

class ClearableEditText @JvmOverloads constructor(
    context: Context,
    attributeSet: AttributeSet? = null,
) : AppCompatEditText(context, attributeSet) {

    private var clearBitmap: BitmapDrawable
    private val paint = Paint()
    private val clearRectF = RectF()
    private val clickDetectRectF = RectF()

    init {

        val a = context.obtainStyledAttributes(attributeSet, R.styleable.ClearableEditText)
        val drawableId = a.getResourceId(R.styleable.ClearableEditText_cet_clear_drawable, -1)
        val bitmap = if (drawableId == -1) {
            BitmapFactory.decodeResource(resources, R.drawable.mcbd__ic_close_2)
        } else {
            BitmapFactory.decodeResource(resources, drawableId)
        }
        clearBitmap = BitmapDrawable(resources, bitmap)
        a.recycle()

        doAfterTextChanged { postInvalidate() }
    }

    override fun onTouchEvent(event: MotionEvent?): Boolean {
        if (event?.action == MotionEvent.ACTION_UP) {
            if (!text.isNullOrEmpty() && clickDetectRectF.contains(event.x, event.y)) {
                text = null
                return true
            }
        }
        return super.onTouchEvent(event)
    }

    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        super.onLayout(changed, left, top, right, bottom)
        clearRectF.set(
            measuredWidth - paddingEnd - clearBitmap.intrinsicWidth.toFloat(),
            (measuredHeight - clearBitmap.intrinsicHeight) / 2f,
            measuredWidth - paddingEnd.toFloat(),
            (measuredHeight + clearBitmap.intrinsicHeight) / 2f
        )
        clickDetectRectF.set(
            clearRectF.left - CLICK_EXPAND,
            clearRectF.top - CLICK_EXPAND,
            clearRectF.right + CLICK_EXPAND,
            clearRectF.bottom + CLICK_EXPAND
        )
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        if (!text.isNullOrEmpty()) {
            canvas?.drawBitmap(clearBitmap.bitmap, clearRectF.left, clearRectF.top, paint)
        }
    }

    companion object {
        //点击范围判定的延伸距离
        private const val CLICK_EXPAND = 20
    }
}

其中, CLICK_EXPAND这个东西是产品说点击的那个图标太小了, 不好点, 所以专门把点击区域放大了一点点, 如果不需要这个操作,删了就是

自定义属性部分

    <declare-styleable name="ClearableEditText">
        <attr name="cet_clear_drawable" format="reference"/>
    </declare-styleable>

只有这一个属性, 用于决定后面的清除图标的样式, 如果需要代码中动态设置, 需要改改代码去实现.

无了