Как создать интерфейс типа «вдоль»?

Question

Я говорю о чем-то вроде этого:

Изображение является лишь примером, мне просто нужно, чтобы пользователь набрал определенный текст буква за буквой.

---

Я пробовал это с наложением TextView на EditText, но это выглядит действительно ужасно:

Моя следующая попытка будет использовать Spannables, чтобы превратить накладываемый текст в тот же цвет после каждой буквы с TextWatcher, как предложено в Как я могу изменить цвет части 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 с комбинацией текста в стиле «перезапись» (описан в этот вопрос ) и обновлением диапазона всего текста до текущей позиции курсора.

Answer 3

Что ж, более простой подход заключается в том, чтобы сначала сделать скриншот текста редактирования с подсказкой и обрезать его по краям текста редактирования.Тогда сделайте это фоном текста редактирования.Вы также можете поиграть с цветом изображения и обеспечить различный фон для разных событий, используя селектор 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>

Answer 4

Вы можете перезаписать onDraw(Canvas canvas) функцию EditText. Чтобы использовать тот же Paint, что и для EditText, нарисуйте серые слова на StatisticLayout до вызова super.onDraw(Canvas canvas).