Material Design中的Android EditText视图浮动提示

Android EditText view Floating Hint in Material Design

提问by xsorifc28

Does API 21 provide a method to use the following feature:

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

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

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

I'm trying to float the EditText hints.

我正在尝试浮动 EditText 提示。

Thanks!

谢谢！

回答by arpit

Floating hint EditText:

浮动提示 EditText：

Add below dependency in gradle:

在gradle中添加以下依赖项：

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

In layout:

在布局中：

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

回答by Dave Jensen

Yes, as of May 29, 2015 this functionality is now provided in the Android Design Support Library

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

This library includes support for

这个库包括对

• Floating labels
• Floating action button
• Snackbar
• Navigation drawer
• and more

• 浮动标签
• 浮动操作按钮
• 小吃店
• 导航抽屉
• 和更多

回答by aselims

The Android support library can be imported within gradle in the dependencies :

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

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

It should be included within GradlePlease! And as an example to use it:

它应该包含在 GradlePlease 中！并作为使用它的示例：

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

Btw, the editor may not understand that AutoCompleteTextView is allowed within TextInputLayout.

顺便说一句，编辑器可能不明白在 TextInputLayout 中允许使用 AutoCompleteTextView。

回答by rengwuxian

Android hasn't provided a native method. Nor the AppCompat.

Android 尚未提供本机方法。也不是 AppCompat。

Try this library: https://github.com/rengwuxian/MaterialEditText

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

This might be what you want.

这可能就是你想要的。

回答by shridutt kothari

Import the Support Libraries, In your project's build.gradle file, add the following lines in the project's dependencies:

导入支持库，在项目的 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'
}

Use following TextInputLayout in your UI Layout:

在您的 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>

Than, call setHint on TextInputLayout just after setContentView call because, to animate the floating label, you just need to set a hint, using the setHint method.

然后，在 setContentView 调用之后立即在 TextInputLayout 上调用 setHint，因为要为浮动标签设置动画，您只需要使用 setHint 方法设置一个提示。

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

回答by TalkLittle

@andruboy's suggestion of https://gist.github.com/chrisbanes/11247418is probably your best bet.

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

https://github.com/thebnich/FloatingHintEditTextkind of works with appcompat-v7 v21.0.0, but since v21.0.0 does not support accent colors with subclasses of EditText, the underline of the FloatingHintEditTextwill be the default solid black or white. Also the padding is not optimized for the Material style EditText, so you may need to adjust it.

https://github.com/thebnich/FloatingHintEditText可以与 appcompat-v7 v21.0.0 一起使用，但由于 v21.0.0 不支持子类为EditText的强调色，因此 的下划线FloatingHintEditText将是默认的纯黑色或白色。此外，填充未针对 Material style 进行优化EditText，因此您可能需要对其进行调整。

回答by Patrick

No it doesn't. I would expect this in a future api release, but for now we are stuck with EditText. Another option is this library:
https://github.com/marvinlabs/android-floatinglabel-widgets

不，它没有。我希望在未来的 api 版本中会出现这种情况，但现在我们坚持使用 EditText。另一种选择是这个库：https:
//github.com/marvinlabs/android-floatinglabel-widgets

回答by Dhina k

Try this way

试试这个方法

  dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
  }

for more reference click here

更多参考点击这里

回答by Karim

For an easier way to use the InputTextLayout, I have created this library that cuts your XML code to less than the half, and also provides you with the ability to set an error message as well as a hint message and an easy way to do your validations. https://github.com/TeleClinic/SmartEditText

为了更轻松地使用 InputTextLayout，我创建了这个库，将您的 XML 代码减少到一半以下，并且还为您提供了设置错误消息和提示消息的能力，以及一种简单的方法来执行您的操作验证。 https://github.com/TeleClinic/SmartEditText

Simply add

只需添加

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

Then you can do something like this:

然后你可以做这样的事情：

<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.*" />