Текст ошибки в TextInputLayout покрывается клавиатурой
TextInputLayout содержит EditText, который, в свою очередь, получает ввод от пользователя. С TextInputLayout, представленным в библиотеке поддержки дизайна Android, мы должны установить ошибку TextInputLayout, содержащую EditText, а не сам EditText. При написании пользовательский интерфейс будет ориентирован только на EditText, а не на весь TextInputLayout, что может привести к тому, что клавиатура закроет ошибку. В следующем GIF обратите внимание, что пользователь должен сначала удалить клавиатуру, чтобы увидеть сообщение об ошибке. Это в сочетании с настройкой действий IME для перемещения по клавиатуре приводит к действительно запутанным результатам.
![example error]()
Макет XML-кода:
<android.support.design.widget.TextInputLayout
android:id="@+id/uid_text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true"
android:layout_marginTop="8dp">
<EditText
android:id="@+id/uid_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:hint="Cardnumber"
android:imeOptions="actionDone"/>
</android.support.design.widget.TextInputLayout>
Java-код, устанавливающий ошибку в TextInputLayout:
uidTextInputLayout.setError("Incorrect cardnumber");
Как я могу убедиться, что сообщение об ошибке видно, а пользователь не пытается его увидеть? Можно ли сместить фокус?
Ответы
Ответ 1
Чтобы убедиться в том, что сообщение об ошибке отображается без участия пользователя, я подклассифицировал TextInputLayout
и поместил его в ScrollView
. Это позволяет мне прокручивать вниз, если необходимо, чтобы показать сообщение об ошибке, при каждом появлении сообщения об ошибке. Нет никаких изменений, необходимых в классе деятельности/фрагмента, который использует это.
![enter image description here]()
import androidx.core.view.postDelayed
/**
* [TextInputLayout] subclass that handles error messages properly.
*/
class SmartTextInputLayout @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : TextInputLayout(context, attrs, defStyleAttr) {
private val scrollView by lazy(LazyThreadSafetyMode.NONE) {
findParentOfType<ScrollView>() ?: findParentOfType<NestedScrollView>()
}
private fun scrollIfNeeded() {
// Wait a bit (like 10 frames) for other UI changes to happen
scrollView?.postDelayed(160) {
scrollView?.scrollDownTo(this)
}
}
override fun setError(value: CharSequence?) {
val changed = error != value
super.setError(value)
// work around https://stackoverflow.com/q/34242902/1916449
if (value == null) isErrorEnabled = false
// work around https://stackoverflow.com/q/31047449/1916449
if (changed) scrollIfNeeded()
}
}
Вот вспомогательные методы:
/**
* Find the closest ancestor of the given type.
*/
inline fun <reified T> View.findParentOfType(): T? {
var p = parent
while (p != null && p !is T) p = p.parent
return p as T?
}
/**
* Scroll down the minimum needed amount to show [descendant] in full. More
* precisely, reveal its bottom.
*/
fun ViewGroup.scrollDownTo(descendant: View) {
// Could use smoothScrollBy, but it sometimes over-scrolled a lot
howFarDownIs(descendant)?.let { scrollBy(0, it) }
}
/**
* Calculate how many pixels below the visible portion of this [ViewGroup] is the
* bottom of [descendant].
*
* In other words, how much you need to scroll down, to make [descendant] bottom
* visible.
*/
fun ViewGroup.howFarDownIs(descendant: View): Int? {
val bottom = Rect().also {
// See https://stackoverflow.com/a/36740277/1916449
descendant.getDrawingRect(it)
offsetDescendantRectToMyCoords(descendant, it)
}.bottom
return (bottom - height - scrollY).takeIf { it > 0 }
}
Я также исправил TextInputLayout.setError(), оставляя пустое пространство после очистки ошибки в том же классе.
Ответ 2
Вы должны поместить все в контейнер ScrollView, чтобы пользователь мог хотя бы прокручивать и видеть сообщение об ошибке. Это единственное, что сработало для меня.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
...
other views
...
</LinearLayout>
</ScrollView>
Ответ 3
На самом деле это известная проблема в Google.
https://issuetracker.google.com/issues/37051832
Их предлагаемое решение заключается в создании пользовательского класса TextInputEditText
class MyTextInputEditText : TextInputEditText {
@JvmOverloads
constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = android.R.attr.editTextStyle
) : super(context, attrs, defStyleAttr) {
}
private val parentRect = Rect()
override fun getFocusedRect(rect: Rect?) {
super.getFocusedRect(rect)
rect?.let {
getMyParent().getFocusedRect(parentRect)
rect.bottom = parentRect.bottom
}
}
override fun getGlobalVisibleRect(rect: Rect?, globalOffset: Point?): Boolean {
val result = super.getGlobalVisibleRect(rect, globalOffset)
rect?.let {
getMyParent().getGlobalVisibleRect(parentRect, globalOffset)
rect.bottom = parentRect.bottom
}
return result
}
override fun requestRectangleOnScreen(rect: Rect?): Boolean {
val result = super.requestRectangleOnScreen(rect)
val parent = getMyParent()
// 10 is a random magic number to define a rectangle height.
parentRect.set(0, parent.height - 10, parent.right, parent.height)
parent.requestRectangleOnScreen(parentRect, true /*immediate*/)
return result;
}
private fun getMyParent(): View {
var myParent: ViewParent? = parent;
while (!(myParent is TextInputLayout) && myParent != null) {
myParent = myParent.parent
}
return if (myParent == null) this else myParent as View
}
}'''
Ответ 4
Это хак, но вот что я сделал, чтобы обойти это:
Так как в этом случае комбо TextInputLayout/EditText живет внутри RecyclerView, я просто прокручиваю его, когда устанавливаю ошибку:
textInputLayout.setError(context.getString(R.string.error_message))
recyclerView.scrollBy(0, context.convertDpToPixel(24f))
Он работает, но определенно не идеален. Было бы здорово, если бы Google исправил это, так как это определенно ошибка.
Ответ 5
@user2221404 у меня не получился ответ, поэтому я изменил метод getMyParent() на показанный ниже:
class CustomTextInputEditText @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = android.R.attr.editTextStyle
) : TextInputEditText(context, attrs, defStyleAttr) {
private val parentRect = Rect()
override fun getFocusedRect(rect: Rect?) {
super.getFocusedRect(rect)
rect?.let {
getTextInputLayout()?.getFocusedRect(parentRect)
rect.bottom = parentRect.bottom
}
}
override fun getGlobalVisibleRect(rect: Rect?, globalOffset: Point?): Boolean {
val result = super.getGlobalVisibleRect(rect, globalOffset)
rect?.let {
getTextInputLayout()?.getGlobalVisibleRect(parentRect, globalOffset)
rect.bottom = parentRect.bottom
}
return result
}
override fun requestRectangleOnScreen(rect: Rect?): Boolean {
val result = super.requestRectangleOnScreen(rect)
val parent = getTextInputLayout()
// 10 is a random magic number to define a rectangle height.
parentRect.set(0, parent?.height ?: 10 - 24, parent?.right ?: 0, parent?.height?: 0)
parent?.requestRectangleOnScreen(parentRect, true /*immediate*/)
return result
}
private fun getTextInputLayout(): TextInputLayout? {
var parent = parent
while (parent is View) {
if (parent is TextInputLayout) {
return parent
}
parent = parent.getParent()
}
return null
}
}
Ответ 6
Я просто узнаю, что если вы поместите контейнер в фиксированную высоту, клавиатура оставит место для текста ошибки
<FrameLayout
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_alignParentBottom="true">
<android.support.design.widget.TextInputLayout
android:id="@+id/text_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:errorEnabled="true"
app:errorTextAppearance="@style/ErrorText">
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionGo"
android:inputType="textPersonName"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
</FrameLayout>