Android EditText视图材质设计中的浮动提示


96

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

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

我正在尝试浮动EditText提示。

谢谢!



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

1
这使我们认为Android出了点问题。材料设计API上缺少一些空白。另一个示例是“浮动操作按钮”。
motobói

Answers:


3

您需要将以下内容添加到模块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>

108

浮动提示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>


1
在此XML中使用EditText和TextInputEditText有什么区别?
Android开发者

2
新重命名的依赖项似乎是implementation 'com.google.android.material:material:1.0.0-rc01'
rmtheis

60

是的,自2015年5月29日起,此功能已在Android Design支持库中提供

该库包括对

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

3
您是否碰巧知道带有OP等EditTexts的浮动标签教程?
2015年


1
哇谢谢!我将仔细阅读这些内容,并告诉您它的运行情况!
AdamMc331

2
第三个是我想要的。我偶然发现了TextInputLayout,但找不到一个很好的示例(可能搜索所有错误的术语)。谢谢!
2015年

18

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

    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。


11

Android尚未提供本机方法。也没有AppCompat。

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

这可能就是您想要的。


1
我收到错误:(1)在gradle同步上“属性” color”已经定义”,可能是因为appcompat-v7。我不能摆脱它。安妮的建议?
mdzeko 2015年

MaterialEditText尚未定义名为“ color”的属性,因此在其他地方一定有问题。
ngwuxian

9

导入支持库,在项目的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");

1
至少使用23.1.1,您无需对进行显式调用setHint()。它与EditText在布局xml中设置的提示一起使用。
Ionoclast Brigham

3

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

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


谢谢。我猜测google还没有提供用于创建材料样式的编辑文本警告的api,例如google.com/design/spec/components/…。 很抱歉出现业余爱好者的问题,我正在努力适应材料设计作为我可以使用谷歌的API /库,并试图找出已经提供的一切与任何外部库。再次感谢!
xsorifc28 2014年


0

为了更轻松地使用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.*" />

0

试试这个

在此处输入图片说明

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

有关更多参考,请单击此处


0

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

在此处输入图片说明

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.