Fehlertext in TextInputLayout wird durch die Tastatur abgedeckt

Question

Das TextInputLayout enthält einen EditText, der wiederum die Eingabe vom Benutzer erhält. Mit TextInputLayout, das mit der Android Design Support Library eingeführt wurde, sollten wir den Fehler auf das TextInputLayout setzen, das den EditText anstelle des EditText selbst enthält. Beim Schreiben konzentriert sich die Benutzeroberfläche nur auf den EditText und nicht auf das gesamte TextInputLayout, was dazu führen kann, dass die Tastatur den Fehler abdeckt. In der folgenden GIF-Notiz muss der Benutzer zuerst die Tastatur entfernen, um die Fehlermeldung zu sehen. Dies in Kombination mit dem Setzen von IME-Aktionen, um mit der Tastatur weiterzumachen, führt zu wirklich verwirrenden Ergebnissen.

Layout-XML-Code:

<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-Code den Fehler an den TextInputLayout Einstellung:

uidTextInputLayout.setError("Incorrect cardnumber"); 

Wie kann ich die Fehlermeldung ohne dass der Benutzer Handeln sichtbar ist sicher, Es zu sehen? Ist es möglich, den Fokus zu verschieben?

Answer 1

Sie sollten alles in den Container ScrollView legen, damit der Benutzer zumindest scrollen und die Fehlermeldung sehen kann. Das ist das einzige, was für mich funktioniert hat.

<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> 

Answer 2

ich herausfinden, dass, wenn Sie Container in fester Höhe, Tastatur lassen Raum für Fehler

Text setzen

<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> 

Answer 3

Um ohne dass der Benutzer die Fehlermeldung, es zu sehen stellen Sie sicher, sichtbar handeln, ich Unterklasse TextInputLayout und legte sie in eine ScrollView. Dadurch kann ich bei Bedarf nach unten scrollen, um die Fehlermeldung anzuzeigen, bei der immer die Fehlermeldung angezeigt wird. In der Aktivitäts-/Fragmentklasse, die es verwendet, sind keine Änderungen erforderlich.

/** 
* [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 { findParentOfType<ScrollView>() } 
    private val nestedScrollView by lazy { findParentOfType<NestedScrollView>() } 

    private fun scrollIfNeeded() { 
     // Wait a bit (like 10 frames) for other UI changes to happen 
     postDelayed({ 
      scrollView?.scrollDownTo(this) 
      nestedScrollView?.scrollDownTo(this) 
     }, 160) 
    } 

    override fun setError(error: CharSequence?) { 
     super.setError(error) 

     // work around https://stackoverflow.com/q/34242902/1916449 
     isErrorEnabled = error != null 

     // work around https://stackoverflow.com/q/31047449/1916449 
     scrollIfNeeded() 
    } 
} 

Hier sind die Hilfsmethoden:

private inline fun <reified T> View.findParentOfType(): T? { 
    var p = parent 
    while (p != null && p !is T) p = p.parent 
    return p as T? 
} 

private fun ScrollView.scrollDownTo(descendant: View) { 
    howFarDownIs(descendant)?.let { smoothScrollBy(0, it) } 
} 

private fun NestedScrollView.scrollDownTo(descendant: View) { 
    howFarDownIs(descendant)?.let { smoothScrollBy(0, it) } 
} 

/** 
* Calculate how many pixels below the visible portion of [this] layout is the 
* bottom of [descendant]. 
* 
* In other words, how much you need to scroll down, to make [descendant]'s bottom 
* visible. 
*/ 
private fun FrameLayout.howFarDownIs(descendant: View): Int? { 
    return Rect().also { 
     // See https://stackoverflow.com/a/36740277/1916449 
     descendant.getDrawingRect(it) 
     offsetDescendantRectToMyCoords(descendant, it) 
    }.bottom.minus(height).minus(scrollY).takeIf { it > 0 } 
} 

ich auch TextInputLayout.setError() leaves empty space after clearing the error in der gleichen Klasse festgelegt.

Answer 4

Es ist hacky aber hier ist, was ich, um dieses Werk tat

Da in diesem Fall meine TextInputLayout/EditText Combo innerhalb eines RecyclerView leben, ich scrollen es einfach, wenn ich den Fehler gesetzt:

textInputLayout.setError(context.getString(R.string.error_message)) 
recyclerView.scrollBy(0, context.convertDpToPixel(24f)) 

Es funktioniert, ist aber definitiv weniger als ideal. Es wäre großartig, wenn Google das beheben würde, da es definitiv ein Fehler ist.