Android TextInputLayout标签与输入的文本冲突_Android_Layout_Material Design

Android TextInputLayout标签与输入的文本冲突

android layout

Android TextInputLayout标签与输入的文本冲突,android,layout,material-design,Android,Layout,Material Design,在我的新Android应用程序中，TextInputLayout的标签出现在用户输入的空间中。这将导致输入的文本呈现在标签/提示的顶部：用户首次加载页面时：当用户点击文本输入时，标签会按预期向左上方收缩：当用户键入条目时，它会在标签上键入：我有两个问题：遵循材料设计指南，此处的适当行为是什么我如何完成这个行为这是我的布局文件： <?xml version="1.0" encoding="utf-8"?> <androi

在我的新Android应用程序中，TextInputLayout的标签出现在用户输入的空间中。这将导致输入的文本呈现在标签/提示的顶部：

用户首次加载页面时：

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

当用户键入条目时，它会在标签上键入：

我有两个问题：

遵循材料设计指南，此处的适当行为是什么

我如何完成这个行为

这是我的布局文件：

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

以下是

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>


@颜色/紫色500
@颜色/紫色\u 700
@颜色/白色
@颜色/青色200
@颜色/青绿色700
@颜色/白色
？attr/colorPrimaryVariant
假的
真的

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

我想这是你的问题

更新：在第一个框中尝试以下代码：

<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\u constraintTop\u toTopOf=“parent”

，并将高度字段更改为

android:layout\u height=“wrap\u content”

我已经复制了您的问题，问题是因为您在TextInputLayout或TextInputItemText中使用了android:theme=“@style/theme.JobSearch”。从所有TextInputLayout和TextInputItemText中删除所有android:theme属性，并改用您自己的样式，该样式将仅应用于您的TextInputLayout，如style=“@style/MyTextInputLayoutStyle”

我已经为每个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 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>

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


没什么好说的，很明显。你必须自己测试一下
<?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>


谢谢您的建议。虽然这可能有助于避免其他问题，但它并不能解决我在这里提出的问题。你的第二个建议仍然不起作用。也许这和我的主题有关？出于某种原因，我似乎不得不将android:theme应用于每个TextInputLayout
。app:layout\u constraintop\u toTopOf=“parent”
约束。。不确定这是否不合适，因为textinputtext
没有被ConstraintLayout
@Zain包围。请您用更完整的XML代码将您的建议作为答案发布。如果您指的是第二个代码段，我仅显示第一个代码段中的TextInputLayout
的修改版本。是否确实需要使用多个app:layout\u约束？尝试删除所有的app:layout\u constraintStart\u toStartOf=“parent”
，并在TextInputEditText中删除行app:layout\u constraintTop\u tototopof=“parent”
@Darkman请发布一个包含任何澄清细节的答案。感谢您花时间将此作为完整答案写出来。我将你答案的完整布局复制粘贴到我的应用程序中，我仍然看到与我原始问题相同的行为。还有什么建议可以试试吗？@Code学徒非常感谢你的评论。。能否将app:hintAnimationEnabled=“true”

添加到

文本输入布局中。。这是默认行为，但我担心它可能会被编程或其他方式意外禁用。。您也可以共享@style/Theme.JobSearch
，或者您可以暂时删除它并尝试在没有它的情况下进行测试。。我无法重现这个问题。。我很欣赏你的反馈就我所知，提示动画效果很好，但动画后的最终位置是提示和输入的文本重叠。我在上面的问题中添加了themes.xml。这是相当标准和赤裸裸的，只声明了主题的主要和次要颜色。谢谢你的回答。你能用语言解释一下我需要做什么更改吗？我测试了你的建议，从TextInputLayout中删除主题声明。我还将其从ConstraintLayout中删除。这就解决了定位的问题。我想我最初添加了明确的主题，以将背景从灰色更改为白色。查看材料UI文档后，默认情况下会显示灰色背景。我将进一步研究默认样式，并从中找出我想要做的事情。
<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>

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

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