登录界面一定会用到的-CompoundDrawableClickDetector

需求

• 最近在写登录界面,遇到了一个需求,稍微多些了一点代码,话不多说,如下图
  • 输入文字的时候显示清除输入内容的按钮
  • 在密码输入栏的左边添加一个按钮,用户显示和隐藏用户输入的密码
  • 屏幕变黑不是我故意玩你，这里我确实是点击了输入密码的 EditText,因为他的inputType是textPassword,为了保护用户的隐私，在录屏状态下，会自动变黑处理。(我这里的测试机是华为荣耀 9,不知道其他手机型号是否也有这种细心的设置)。电脑没有装模拟器，所以这部分点击密码就没有演示了，可以自行脑补一下。
    
    

分析

• 抽象一下,其实都是点击某个按钮,然后做一些操作.

  • 当然这里你如果用 EditText 左边和右边各自加一个 ImageView是肯定可以做出来的,但是多了两个控件性能肯定不是最好的.
  • EditText可以在文本的上下左右四个方向上各自放置一个Drawable,这个功能是从TextView那里继承过来了
  • 我们唯一需要做的就是如何来判断 Drawable的点击事件,做好这一点,这个需求就没有什么难点了.

  • 如下图,就是我们需要做的效果

    
    
    

• 首先了解下四个Drawable绘制的位置.
  

  
  • 最外层的深蓝色轮廓的范围为(0, 0, width,height)
  • 往里面一层绿色轮廓就是EditText去掉padding的剩余空间,其范围为( paddingStart, paddingTop, width - paddingEnd, height -paddingBottom)
  • 红色矩形框就是EditText主体内容的绘制范围,也就是我们输入文字的绘制范围;如果是 TextView,就是设置的 text属性绘制的地方，其范围为contentRect = (compoundPaddingLeft, compoundPaddingTop,width - compoundPaddingRight, height - compoundPaddingBottom )
    • 这里的contentRect就是我们计算的关键
  • 在绿色轮廓和红色轮廓之间四个蓝色小方块就是我在布局文件中设置的，如下所示，另外我还设置了 drawablePadding 属性
    • 这里的 drawablePadding计算的位置我们也可以看出来，是分别在红色矩形的左上右下加上的一个间距

• 通过上面的研究，我们可以通过contentRect以及 drawablePadding就可以很容易的计算出四个drawable绘制的位置，从而通过判断触摸的点是否在绘制区域之内，然后分别触发对应的事件即可

Talk is cheep, Show you my code

• 首先是位置的计算方法
• 用户输入的文字绘制区域,就是上面所讲的红色的矩形范围

fun TextView.contentRect(): Rect {
    return Rect(
            compoundPaddingLeft,
            compoundPaddingTop,
            width - compoundPaddingRight,
            height - compoundPaddingBottom
    )
}

• 这里以左边的Drawable作为实例来讲解如何计算的，其它三个方向类似
  - 由于代码过于直白，所以这里就不在赘述了

fun TextView.isTouchLeftCompoundDrawable(event: MotionEvent): Boolean {
    val drawable = compoundDrawables[0] ?: return false
    val contentRect = contentRect()
    val rect = RectF(
            (contentRect.left - drawable.intrinsicWidth - compoundDrawablePadding).toFloat(),
            (contentRect.top).toFloat(),
            (contentRect.left - compoundDrawablePadding).toFloat(),
            (contentRect.bottom).toFloat()
    )
    return rect.contains(event.x, event.y)
}

• 然后在onTouchEvent方法中进行判断
  • 首先在用户按下的一瞬间就进行判断是否在目标区域内，如果在则设置一个标记为 true,这里标记的作用是为了处理这次点击剩下的触摸事件序列(包括一系列的 ACTION_MOVE和ACTION_UP)事件，如果不做处理的话，就会交给EditText自身处理，从而造成了意想不到的效果
  • 然后在手指抬起的时候，延迟 50ms 清除该标记，这样就不会妨碍控件本身的触摸事件的处理机制

class CompoundDrawableDetector(
        private val textView: TextView,
        private val onClickListener: OnClickListener
) {

    private var detectedCompoundDrawableClickEvent = false
    private var handler = Handler()
    /**
     * @return 返回true,表示该事件需要在内部进行处理,false 则表示内部没有进行处理,可以交给外部来处理
     * */
    fun onTouchEvent(event: MotionEvent): Boolean {
        if (event.action == MotionEvent.ACTION_DOWN) {
            detectCompoundDrawableClickEvent(event)
        } else if (event.action == MotionEvent.ACTION_UP) {
            handler.postDelayed({ detectedCompoundDrawableClickEvent = false }, 50)
        }
        return detectedCompoundDrawableClickEvent
    }


    private fun detectCompoundDrawableClickEvent(event: MotionEvent) {
        with(textView) {
            for ((index, drawable) in compoundDrawables.withIndex()) {
                if (drawable == null) continue
                when (index) {
                    DRAWABLE_LEFT ->
                        if (isTouchLeftCompoundDrawable(event)) {
                            detectedCompoundDrawableClickEvent = true
                            onClickListener.onLeftClick()
                        }
                    DRAWABLE_TOP ->
                        if (isTouchTopCompoundDrawable(event)) {
                            detectedCompoundDrawableClickEvent = true
                            onClickListener.onTopClick()
                        }
                    DRAWABLE_RIGHT ->
                        if (isTouchRightCompoundDrawable(event)) {
                            detectedCompoundDrawableClickEvent = true
                            onClickListener.onRightClick()
                        }
                    DRAWABLE_BOTTOM ->
                        if (isTouchBottomCompoundDrawable(event)) {
                            detectedCompoundDrawableClickEvent = true
                            onClickListener.onBottomClick()
                        }
                }
            }
        }
    }

    interface OnClickListener {
        fun onLeftClick() {}
        fun onRightClick() {}
        fun onTopClick() {}
        fun onBottomClick() {}
    }

    companion object {
        private const val DRAWABLE_LEFT = 0
        private const val DRAWABLE_TOP = 1
        private const val DRAWABLE_RIGHT = 2
        private const val DRAWABLE_BOTTOM = 3
    }
}

如何使用? So easy

• 上面的效果就可以通过在对应的点击事件中进行编写了

class TestEditText(context: Context, attrs: AttributeSet) : EditText(context, attrs) {

    private val compoundDrawableDetector by lazy {
        CompoundDrawableDetector(this, object : CompoundDrawableDetector.OnClickListener {
            override fun onLeftClick() {
                toast("left click")
            }
            override fun onRightClick() {
                toast("right click")
            }
            override fun onTopClick() {
                toast("click top")
            }
            override fun onBottomClick() {
                toast("click bottom")
            }
        })
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        return if (compoundDrawableDetector.onTouchEvent(event)) {
            true
        } else {
            super.onTouchEvent(event)
        }
    }
}

• 源码地址：https://github.com/tudou152/CommonUtil

• 首页中展示的自动清空输入内容以及切换显示密码的 MultiFunctionEditText也在该项目中，做了很好的封装，使用起来也很简单