安卓EditText视图在材料设计中的浮动提示

Question

API 21提供了使用以下功能的方法吗：

http://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels

我正在尝试使EditText提示浮动。

谢谢！

- xsorifc28

---

https://gist.github.com/chrisbanes/11247418 - MilapTank

我在搜索过程中也遇到了这个问题，但我想知道Android是否提供了本地方法。 - xsorifc28

这使我们认为Android有些问题。Material Design的API中存在几个缺失的空白。另一个例子是浮动操作按钮（Float Action Button）。 - motobói

Answer 1

浮动提示的EditText：

在Gradle中添加以下依赖项：

compile 'com.android.support:design:22.2.0'

在布局中：

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
    </android.support.design.widget.TextInputLayout>

- arpit

---

注意：TextInputLayout在用户聚焦之前不显示EditText提示的bug存在于设计支持库22.2.0中。 - Ivan Chau

在这个 XML 中，使用 EditText 和 TextInputEditText 有什么区别？ - android developer

新更名的依赖似乎是 implementation 'com.google.android.material:material:1.0.0-rc01'。 - rmtheis

Answer 2

是的，自2015年5月29日起，此功能现已提供在Android设计支持库中。

该库包括以下支持：

• 浮动标签
• 浮动操作按钮
• Snackbar消息提示框
• 导航抽屉
• 以及更多

- Dave Jensen

---

你是否知道有没有关于浮动标签和EditText相结合的教程，就像OP提到的那样？ - AdamMc331

是的。https://blog.stylingandroid.com/textinputlayout/ 和 http://code.tutsplus.com/tutorials/creating-a-login-screen-using-textinputlayout--cms-24168 以及 http://hmkcode.com/android-textinputlayout/。 - Dave Jensen

哇，谢谢！我会仔细查看这些内容，并让你知道进展如何！ - AdamMc331

第三个是我正在寻找的。我偶然发现了TextInputLayout，但是找不到一个好的例子（可能是因为搜索了所有错误的术语）。谢谢！ - AdamMc331

Answer 3

Android支持库可以在Gradle的依赖项中导入：

    compile 'com.android.support:design:22.2.0'

它应该在Gradle中包含，请！以下是使用它的示例：

 <android.support.design.widget.TextInputLayout
    android:id="@+id/to_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextViewTo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="To"
        android:layout_marginTop="45dp"
        />
</android.support.design.widget.TextInputLayout>

顺便说一下，编辑器可能不理解在TextInputLayout中允许使用AutoCompleteTextView。

- aselims

Answer 4

Android 没有提供原生方法，而 AppCompat 也没有。

试试这个库：https://github.com/rengwuxian/MaterialEditText

这可能是你想要的。

- rengwuxian

---

我在 gradle 同步时遇到了错误:(1) "Attribute "color" has already been defined"，很可能是由于 appcompat-v7 的原因。我无法摆脱它。有什么建议吗？ - mdzeko

MaterialEditText没有定义名为“color”的属性，因此必须在其他地方出了问题。 - rengwuxian

Answer 5

导入支持库。在您的项目的build.gradle文件中，在项目的依赖项中添加以下行：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:appcompat-v7:22.2.0'
}

请在您的UI布局中使用以下TextInputLayout：

<android.support.design.widget.TextInputLayout
    android:id="@+id/usernameWrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="Username"/>

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

然后，在调用“setContentView”后，立即在“TextInputLayout”上调用“setHint”，因为要动画化浮动标签，只需要使用“setHint”方法设置提示即可。

final TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
usernameWrapper.setHint("Username");

- Shridutt Kothari

---

至少使用23.1.1版本，在代码中不需要显式调用setHint()方法。它可以与在布局xml文件中设置的EditText的提示一起使用。 - Ionoclast Brigham

Answer 6

您需要将以下内容添加到模块的 build.gradle 文件中：

implementation 'com.google.android.material:material:1.0.0'

在XML中使用com.google.android.material.textfield.TextInputLayout：

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

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
   </com.google.android.material.textfield.TextInputLayout>

- damith alahakoon

Answer 7

@andruboy提供的https://gist.github.com/chrisbanes/11247418可能是您最好的选择。

https://github.com/thebnich/FloatingHintEditText在appcompat-v7 v21.0.0上有点用处，但是由于v21.0.0不支持EditText子类的重音颜色，因此FloatingHintEditText的下划线将是默认的纯黑色或白色。另外，内边距没有针对Material风格的EditText进行优化，因此您可能需要调整它。

- TalkLittle

---

谢谢。我猜Google也没有提供API来创建材料风格的编辑文本警告，就像http://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field中的那样。对于业余问题，我正在尽可能地使用Google的API /库来适应材料设计，并尝试弄清楚已提供的所有内容与任何外部库。再次感谢！ - xsorifc28

Answer 8

为了更方便地使用InputTextLayout，我创建了这个库，可以将您的XML代码减少一半以上，并提供设置错误消息和提示消息以及轻松进行验证的功能。 https://github.com/TeleClinic/SmartEditText 只需简单添加即可。

compile 'com.github.TeleClinic:SmartEditText:0.1.0'

然后你可以像这样做：

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/emailSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Email"
    app:setMandatoryErrorMsg="Mandatory field"
    app:setRegexErrorMsg="Wrong email format"
    app:setRegexType="EMAIL_VALIDATION" />

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/passwordSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Password"
    app:setMandatoryErrorMsg="Mandatory field"
    app:setPasswordField="true"
    app:setRegexErrorMsg="Weak password"
    app:setRegexType="MEDIUM_PASSWORD_VALIDATION" />

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/ageSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Age"
    app:setMandatory="false"
    app:setRegexErrorMsg="Is that really your age :D?"
    app:setRegexString=".*\\d.*" />

- Karim

Answer 9

不，目前还没有。我期望在未来的API版本中会有这个功能，但现在我们只能使用EditText。另一个选择是使用这个库：
https://github.com/marvinlabs/android-floatinglabel-widgets

- Patrick Jackson

Answer 10

请使用Material Components Library提供的TextInputLayout：

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Label">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

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

- Gabriele Mariotti