如何创建"type along"风格的界面？

Question

我说的是这样的事情：

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

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

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

但即使使用 Spannable class 它也不能完美匹配，我必须尝试使用 TextView 填充以使其与 EditText 对齐。

有更好的方法吗？

Answer 1

您可以尝试使用单个 EditText，结合 "overwrite" 样式文本（包含在 this question 中）并更新当前光标位置之前的所有文本的范围.

Answer 2

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

Answer 3

当您尝试将 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 的底栏。

希望能帮到你！

Answer 4

好吧，更简单的方法是先截取带提示的编辑文本的屏幕截图，然后将其裁剪到编辑文本的边缘。然后将其作为编辑文本的背景。您还可以使用图像颜色，并可以使用选择器 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>

如何创建"type along"风格的界面？

How to create a "type along" style interface?

android

text

input

textview

android-edittext