如何创建“类型沿”样式界面？

Question

我在谈论这样的事情：

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

---

我用覆盖的TextViewon和EditText尝试了它，但它看起来真的很难看：

我的下一次尝试是使用Spannables将每个字母后面的重叠文本用TextWatcher变成相同的颜色，如How can I change the color of a part of a TextView?所示

---

但是即使使用Spannable类它也不完美，我必须尝试使用​​TextView填充来将它与EditText对齐。

有更好的方法吗？

Answer 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的底部栏。

我希望我能帮到你！

Answer 2

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

Answer 3

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

Answer 4

更简单的方法是首先使用提示截取edittext的屏幕截图并将其裁剪到edittext的边缘。然后将其作为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>