高仿Android「填空题」控件：手撸一个炫酷的View动效！

一、写在前面

本文讲解的是如何自定义一个填空题控件，实现的方式其实有很多，最重要的是了解其中实现的思路和想法，正所谓条条大路通罗马嘛。

在Android系统中，我们最常使用的用于展示文字和编辑文字的控件，就是TextView和EditView，这两个控件基本上已经能够满足我们日常大部分开发需求。

但是，凡事都有个但是。程序猿基本都会遇到一些比较特殊的需求，而作为一个Android开发者，最常见的特殊需求，就是一个特殊的控件，而这个控件刚好是系统没有提供的。

下面就是一个比较特别的控件，一个可填空的控件。要求可以和普通TextView一样展示普通的文字，同时又包含可以编辑的部分，类似EditText。如下：

 

 

看到这个，第一反应就是，这不合理啊，又是展示，又是可编辑，又是换行，没办法实现啊！

结果，被人家甩了一句：那啥，学习强国App里面不就有可以填空答题的嘛！

我去，这下尴尬了。如果实现不了，岂不是显得自己很Low B！不行，无论如何都得做出来！（才能咽得下这口气!）

二、寻寻觅觅，不得所需

哼，系统没有的控件，我找个第三方的轮子还不行吗？我就不信，世界这么大，还有别人没做好的轮子！于是开启了“常规操作模式”（Google/GitHub/百度，搜索，复制，粘贴）。果不其然，有的是轮子（ヾ(´A｀)ノﾟ）。

比如这两个：

Android 使用代码实现一个填空题
Android 基于TextView实现填空题

他们有一些共同的特点：

1.基于TextView做文字展示
2.基于SpannableString做文字样式变化，文字点击等
3.必须要有一个EditText作为输入

毫无疑问，这是系统提供的，最简单方便的定制一个TextView和EditText结合的方法。但是，他们都存在一些问题，比如

1.非嵌入式的输入，需要在外部提供一个可输入的EditText
2.虽然是嵌入式的输入，但是可编辑文字必须要固定长度，不能根据文字长短动态变化

总而言之，就是体验还是不够好！无奈之下，萌生了自己造一个轮子的想法。

那么，我们就仿造学习强国，定制一个填空题控件呗。

三、拆轮子

既然决定自己造轮子，必然要先分析一下这个轮子，把这个轮子拆开，看看它包含些什么东西。

1.首先，最简单的功能：显示文字
2.其次，实现文字点击，并弹出输入法
3.再次，接收输入法输入
4.最后，光标与文字的输入和删除

1. 如何显示文字？

在定义View中， 显示文字是一件非常简单的函数调用，无非就是

canvas.drawText(text, x, y, paint)

但是，如果你想当然的认为这个是一个简单的事情，那你就大错特错了。

1）文字基线

首先，对于y
 坐标，指的是文字的基线（baseLine），而非文字的top坐标，这个坐标可以近似认为是文字的bottom坐标，但并没有那么简单。如下图：

 

关于文字的绘制，这篇下面这篇文章讲得很透彻，建议不熟悉的同学可以看看

自定义控件之绘图篇（ 五）：drawText()详解

2）文字换行

不可避免的问题，文字过长的时候，我们需要对它进行换行显示，那么我们怎么样才能知道什么时候需要换行呢？

这里就涉及到一个文字宽度计算问题

在Android中如何计算文字的宽度呢？如下：

private fun measureTextLength(text: String): Float {
    return mNormalPaint.measureText(text)
}

非常简单对不对，measureText这个方法，会根据我们设定的文字画笔中的字体大小，去测量一段文字的宽度，单位是px。

需要注意的是，汉字和数字英文的宽度占位是不一样的。 因此在换行的时候，需要特别关注和处理这两者的关系。

3）区分普通文字和可编辑文字

既然包含特殊的文字部分，那么我们需要将其标记出来，以便做特殊的处理。这里，我使用了一个标签<fill>来编辑，举个例子：

这样，经过 String.split("<fill>") 后，就可以把这段文字拆分为多个分段。

2.可编辑字段点击

我们知道，每个View都可以接收onTouch事件，并且可以监听到触摸点的x/y坐标。

而在绘制文字的过程中，我们可以将可编辑文字段的坐标信息记录下来，那么在点击的时候，就可以判断有没有触摸碰撞，如果有，那么就可以弹出输入法。

override fun onTouchEvent(event: MotionEvent): Boolean {
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            if (touchCollision(event)) {//触摸碰撞检测
                isFocusableInTouchMode = true
                isFocusable = true
                requestFocus()
                try {
                    val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
                    imm.showSoftInput(this, InputMethodManager.RESULT_SHOWN)
                    imm.restartInput(this)
                } catch (ignore: Exception) {
                }
                return true
            }
        }
    }

    return super.onTouchEvent(event)
}

3.接收输入法输入

通常，需要一个可输入文字的控件时，我们很少自己去定义一个控件，而是直接使用EditText，以至于我们几乎认为只有EditText可以接收输入法输入。

但是，其实Android每个继承View的控件都是可以接收输入的。

那么，如何打开这个功能呢？答案就是以下两个方法：

override fun onCheckIsTextEditor(): Boolean {
    return true
}

override fun onCreateInputConnection(outAttrs: EditorInfo): InputConnection {
    outAttrs.inputType = InputType.TYPE_CLASS_TEXT
    outAttrs.imeOptions = EditorInfo.IME_ACTION_DONE
    return MyInputConnection(this, false, this)
}

其中，第一个方法返回true表示，这是一个可编辑控件，可以接收输入法输入。

第二个方法，则返回一个InputConnection，用于接收输入。看起来是这样的：

class MyInputConnection(targetView: View, fullEditor: Boolean, private val mListener: InputListener) : BaseInputConnection(targetView, fullEditor) {
    override fun commitText(text: CharSequence, newCursorPosition: Int): Boolean {
        mListener.onTextInput(text)
        return super.commitText(text, newCursorPosition)
    }

    override fun deleteSurroundingText(beforeLength: Int, afterLength: Int): Boolean {
        return if (beforeLength == 1 && afterLength == 0) {
            super.sendKeyEvent(KeyEvent(KeyEvent.ACTION_DOWN, KEYCODE_DEL)) &&
            super.sendKeyEvent(KeyEvent(KeyEvent.ACTION_UP, KeyEvent.KEYCODE_DEL))
        } else super.deleteSurroundingText(beforeLength, afterLength)
    }
}

interface InputListener {
    fun onTextInput(text: CharSequence)
}

最主要的方法是commitText，输入法输入时，会通过这个方法将文字传输给控件

4.光标

1）绘制

普通的EditText在输入时，都会有一个光标，用于表示输入或删除的位置。绘制光标，只需要一句代码：

canvas.drawLine(startX, startY, stopX, stopY, paint)

没错，就是绘制一条线，通过修改paint的alpha值（0/255），控制线条的显示和隐藏即可。

关键在于，如何确定光标的位置。

2）计算纯汉字输入时的光标位置

还记得上面2点，实现可编辑字段的点击吗？当我们检测到触摸碰撞的时候，我们就可以根据这个时候触摸点的x坐标，以及文字的长度去判断光标的位置。具体如何实现呢？我们从最简单的情况来实现。

假设，输入的文字都是汉字（前面我们就说过，汉字和数字英文占位是不一样的）。

那么，这时，

光标所在汉字的索引 = （触摸点x坐标 - 被触摸的编辑字段起始位置的x坐标）/ 单个汉字宽度

那么，光标所在实际位置的x坐标就是

光标x轴坐标 = （0 至 光标所在汉字的索引）这段文字的长度

转化为代码即：

mNormalPaint.measureText(text.substring(0, index))

如下图：

说明：这里的index，指的是文字在可编辑字段中的位置，也就是光标的位置

光标起始位置的y坐标，就是被触摸的可编辑字段的y坐标。

光标结束位置的x坐标和起始位置相同，y坐标则为其实坐标加上文字高度

3）考虑多类型输入时的光标位置

当输入的文字包含汉字、英文、数字时，由于英文/数字的占位比汉字小，此时，如果按照汉字的单字来计算光标所在文字的索引，那么此时的索引比实际的索引小。

这里就需要一个方法来确认：触摸点x坐标到可编辑字段起始位置x坐标的这段长度，可以存放多少个文字。

我采用的方法如下：

我们知道，这段长度，可以放置的最少文字个数，就是汉字的个数。

第一步，我们先取最少的汉字个数，并计算文字长度，如果这时，文字的长度没有超过实际触摸位置。

第二步，取下一个文字，并计算文字总长度，判断长度有没有超过实际触摸位置。

重复第二步，直到超过实际触摸位置。

这时，这是实际的文字索引就是：（取到的最后一个文字的索引 - 1）

至此，我们就得到出实际的光标位置，以及文字索引了。

在此基础上，根据光标的位置和文字索引，就可以对文字进行输入和删除了。

具体计算如下图所示：

四、组装轮子

经过上面的分解，基本上，我们就已经知道实现轮子的各个步骤，剩下的就是将上面的各个步骤拼接起来就行了。

当然，具体的代码我就不贴了。大家可以自己去看一下源码，过程并不复杂。

自定义控件嘛，每个人去实现的时候，都会有不一样的做法，比如上面计算光标实际位置的方法，肯定会有不同的更好的方法。所以，了解实现的思想和可借助工具方法即可，没必要太过较真。

最后还一些边边角角的小功能，比如自定义一些可配置属性：文字颜色，字体大小，可编辑字段格式，光标颜色等等;比如根据文字高度，自适应控件高度;比如输入法的弹出和隐藏......

不再细提，具体可看源码。

五、总结

1.一个复杂的控件往往都可以通过拆解，拆分为一个个简单的功能。

2.从最简单的功能开始实现，你会更有信心。

3.不要放弃，一定有实现的方法。如果没有，说明你还不够了解一些基础属性，Google之。

好了，以上就是给大家介绍的一种定制“填空控件”的思路，当然还有其他的实现方式。仅供大家参考。

源码传送门

好了，文章到这里就结束了，如果你觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。谢谢。

最后这里是关于我自己的Android 学习，面试文档，视频收集大整理，有兴趣的伙伴们可以看看~

如果你觉得还算有用的话，不妨把它们推荐给你的朋友。