如何创建“打字”风格的界面？答案

【问题标题】：How to create a "type along" style interface?如何创建“打字”风格的界面？
【发布时间】：2019-09-07 15:33:50
【问题描述】：

我说的是这样的：

图片只是一个例子，我只需要用户一个字母一个字母地输入某个文本。

我尝试在EditText 上叠加TextView，但它看起来真的很难看：

我的下一个尝试是使用Spannables 在每个字母后使用TextWatcher 将覆盖文本变为相同的颜色，如建议 How can I change the color of a part of a TextView?

但即使使用 Spannable 类，它也不完全适合，我必须尝试使用 TextView 填充以使其与 EditText 对齐。

有更好的方法吗？

【问题讨论】：

标签： android input text android-edittext textview

【解决方案1】：

当您尝试将TextView 覆盖在EditText 上时，您走在了正确的轨道上。但是，这两个视图的属性并不完全相同，而且它们确实没有正确重叠。

一个简单的解决方案是覆盖两个EditText 并禁用一个：

<EditText
    android:id="@+id/hint"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/lorem_ipsum"
    android:enabled="false"
    android:background="@null"/>

<EditText
    android:id="@+id/tap_here"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@null"/>

得到的结果如下：

注意添加android:background="@null"会隐藏EditText的底栏。

希望能帮到你！

【讨论】：

哇，这个超级简单又实用，谢谢

【解决方案2】：

您可以尝试使用单个EditText，结合“覆盖”样式文本（在this question 中介绍）并更新当前光标位置之前所有文本的跨度。

【讨论】：

【解决方案3】：

您可以将onDraw(Canvas canvas) 函数覆盖为EditText。要使用与 EditText 相同的 Paint，在调用 super.onDraw(Canvas canvas) 之前通过 StatisticLayout 绘制灰色单词。

【讨论】：

【解决方案4】：

嗯，更简单的方法是先截取带有提示的编辑文本，然后将其裁剪到编辑文本的边缘。然后让它成为edittext的背景。您还可以使用图像颜色，并可以使用选择器drawable为不同的事件提供不同的背景

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/edittext_disabled" android:state_enabled="false"/>
    <item android:drawable="@drawable/edittext_focus_lost" android:state_enabled="true" android:state_focused="false"/>
    <item android:drawable="@drawable/edittext_focus_gained" android:state_enabled="true" android:state_focused="true"/>
</selector>

【讨论】：