在android应用程序中实现带标签文本的概述文本字段输入

Posted 2023-04-13

【中文标题】在android应用程序中实现带标签文本的概述文本字段输入

【英文标题】：Implementation Outlined text field Input with lable text in android application

【发布时间】：2018-11-02 22:03:00

【问题描述】：

我想用浮动标签实现这种类型的输入文本布局，但问题是当我运行应用程序时，它看起来不一样，标签出现在输入文本字段的上方。

但是，这是我的结果

我的代码是：

roundview.xml。

  <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle">
                <solid android:color="#ffffff"/>
                <corners android:radius="10dp" />

                <stroke
                    android:
                    android:color="#3bbdfa"
                    />
            </shape>
        </item>
    </selector>

<android.support.design.widget.TextInputLayout
    android:id="@+id/text"
    android:layout_
    android:layout_
    app:errorEnabled="true">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/edittxt"
        android:layout_
        android:layout_
        android:background="@drawable/roundview"
        android:fadeScrollbars="false"
        android:fadingEdge="vertical"
        android:foregroundGravity="fill_vertical"
        android:hint="name"
        android:isScrollContainer="false"
        android:requiresFadingEdge="vertical"
        android:singleLine="false"
        android:visibility="visible" />

</android.support.design.widget.TextInputLayout>

我关注https://material.io/design 进行文本字段设计，但我遇到了这个问题。谢谢

【问题讨论】：

如果能实现请更新

【参考方案1】：

可以通过在TextInputLayout. 上应用Widget.MaterialComponents.TextInputLayout.OutlinedBox 样式来完成

<android.support.design.widget.TextInputLayout
        android:id="@+id/name_text_input"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_
        android:layout_
        app:errorEnabled="true">
        <android.support.design.widget.TextInputEditText
            android:id="@+id/name_edit_text"
            android:layout_
            android:layout_
            android:hint="Name" />
    </android.support.design.widget.TextInputLayout>

You can check this answer which also has a link to an example.

【讨论】：

为此你需要迁移到android X

我不确定我在使用它时是否做到了。

这不需要 AndroidX，它同时在旧支持库的 com.android.support:design:28.x.x 包中可用。

【参考方案2】：

大纲框

大纲文本字段有一个描边边框并且不太强调。要使用大纲文本字段，请将以下样式应用于您的 TextInputLayout：

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

参考：TextInputLayout

【参考方案3】：

这不能使用 android.support.design.widget.TextInputLayout 来实现。您将必须创建一个自定义类，该类可以在您的编辑文本周围绘制这种边框，记住提示文本，如果提示文本是常量，您可以使用 png 作为背景

【参考方案4】：

看看TextField Widgets。

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textField"
    android:layout_
    android:layout_
    android:hint="@string/label">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_
        android:layout_
    />

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

【参考方案5】：

<com.google.android.material.textfield.TextInputLayout
    android:layout_
    android:layout_
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp"
    android:layout_marginTop="100dp" >

    <EditText
        android:layout_
        android:layout_
        android:hint="@string/text"
        android:inputType="text"
        android:importantForAutofill="no"
        tools:ignore="LabelFor" />

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