Question

在我的新 Android 应用中，TextInputLayout 的标签出现在用户键入输入的空间中。这会导致输入的文本呈现在标签/提示之上：

当用户第一次加载页面时：

当用户点击文本输入时，标签按预期向左上角收缩：

当用户输入一个条目时，它会在标签上输入：

我有两个问题：

遵循 Material Design 指南的适当行为是什么？
如何实现这种行为？

这是我的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/Theme.JobSearch"
    tools:context=".ui.JobsDetailsFragment">

    <TextView
        android:id="@+id/text_new_position"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/new_position"
        android:theme="@style/Theme.JobSearch"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_new_position">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/text_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="@string/title"
            android:theme="@style/Theme.JobSearch"
            app:layout_constraintTop_toTopOf="parent" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.JobSearch"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/text_business_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/business_name" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/position_save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:contentDescription="@string/position_save"
        android:src="@drawable/done"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

更新

我尝试将 android:hint 移动到 TextInputLayout，但仍然看到相同的行为：

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/title_input_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/title"
        android:theme="@style/Theme.JobSearch"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_new_position">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/text_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintTop_toTopOf="parent" />
    </com.google.android.material.textfield.TextInputLayout>

作为参考，这里是themes.xml：

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.JobSearch" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/white</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

    <style name="Theme.JobSearch.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="Theme.JobSearch.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="Theme.JobSearch.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

Answer 1

https://material.io/components/text-fields/android#filled-text-field

<块引用>

注意： android:hint 应始终设置在 TextInputLayout 而不是 EditText 上，以避免出现意外行为。

我认为这是你的问题。

更新：为第一个框试试这个代码：

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/title_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/title"
    android:theme="@style/Theme.JobSearch"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/text_new_position">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/text_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

这将删除行 app:layout_constraintTop_toTopOf="parent" 并将高度字段更改为 android:layout_height="wrap_content"

Answer 2

我已经复制了您的问题，问题是因为您在 TextInputLayout 或 TextInputEditText 中使用了 android:theme="@style/Theme.JobSearch"。从所有 TextInputLayout 和 TextInputEditText 中移除所有 android:theme 属性并使用您自己的样式，该样式将仅应用于您的 TextInputLayout，例如 style="@style/MyTextInputLayoutStyle"。< /p>

我已经为每个 TextInputLayout 使用自定义样式修改了您的 xml 布局，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/Theme.JobSearch"
    tools:context=".ui.JobsDetailsFragment">

    <TextView
        android:id="@+id/text_new_position"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/new_position"
        android:theme="@style/Theme.JobSearch"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/title"
        style="@style/MyTextInputLayoutStyle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_new_position">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/text_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/business_name"
        style="@style/MyTextInputLayoutStyle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/text_business_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/position_save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:contentDescription="@string/position_save"
        android:src="@drawable/done"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

其中 style="@style/MyTextInputLayoutStyle" 是您的 TextInputLayout 自定义样式，如下所示：

<style name="MyTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="boxStrokeColor">@color/text_input_box_stroke_color</item>
    <item name="boxBackgroundColor">@android:color/white</item>
</style>

并且我已经为您的 boxStrokeColor (@color/text_input_box_stroke_color) 设置了一个颜色选择器，以根据焦点/默认状态更改下划线底部笔触颜色，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/teal_200" android:state_focused="true" />
    <item android:color="@color/teal_200" android:state_hovered="true" />
    <item android:color="@android:color/darker_gray" />
</selector>

而上述改动后的最终结果是这样的：

Answer 3

<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/text_title"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:hint="@string/title"
    android:theme="@style/Theme.JobSearch"
    app:layout_constraintTop_toTopOf="parent" />

我担心 app:layout_constraintTop_toTopOf="parent" 约束可能会被移除，因为 TextInputEditText 不是 ConstraintLayout 的直接子代，或者可能转移到周围的 TextInputLayout 是直接子代ConstraintLayout

将后者应用到布局中，考虑@Jems的建议

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/Theme.JobSearch"
    tools:context=".ui.JobsDetailsFragment">

    <TextView
        android:id="@+id/text_new_position"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/new_position"
        android:theme="@style/Theme.JobSearch"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" 
        android:hint="@string/title"
        app:layout_constraintTop_toBottomOf="@+id/text_new_position">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/text_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            android:theme="@style/Theme.JobSearch"/>
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.JobSearch"
        android:hint="@string/business_name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/text_business_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/position_save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:contentDescription="@string/position_save"
        android:src="@drawable/done"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 4

没什么好说的，很明显。你必须自己测试一下。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:theme="@style/Theme.JobSearch"
    tools:context=".ui.JobsDetailsFragment">

    <TextView
        android:id="@+id/text_new_position"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/new_position"
        android:theme="@style/Theme.JobSearch"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/text_new_position">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/text_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="@string/title"
            android:theme="@style/Theme.JobSearch" />

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.JobSearch"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/text_business_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/business_name" />

    </com.google.android.material.textfield.TextInputLayout>

 
<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/position_save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:contentDescription="@string/position_save"
        android:src="@drawable/done"
        android:layout_gravity="right"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

TextInputLayout 标签干扰输入的文本

更新

4 个答案: