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

Posted 2023-02-19

【中文标题】材料设计中的Android EditText视图浮动提示

【英文标题】：Android EditText view Floating Hint in Material Design

【发布时间】：2014-12-15 00:13:51

【问题描述】：

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

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

我正在尝试浮动 EditText 提示。

谢谢！

【问题讨论】：

gist.github.com/chrisbanes/11247418

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

这让我们认为Android有问题。 Material Design API 有几个缺失的地方。另一个例子是浮动操作按钮。

【参考方案1】：

浮动提示EditText：

在 gradle 中添加以下依赖项：

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

在布局中：

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_
    android:layout_>

        <EditText
            android:id="@+id/editText"
            android:layout_
            android:layout_
            android:hint="UserName"/>
    </android.support.design.widget.TextInputLayout>

【讨论】：

当心：TextInputLayout not showing EditText hint before user focus on it 设计支持库中存在错误22.2.0

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

新改名的依赖好像是implementation 'com.google.android.material:material:1.0.0-rc01'。

【参考方案2】：

是的，自 2015 年 5 月 29 日起，此功能现已在 Android Design Support Library 中提供

这个库包括对

的支持 浮动标签 浮动操作按钮 小吃店 导航抽屉 等等

【讨论】：

您是否碰巧知道一个带有像 OP 一样的 EditTexts 的浮动标签教程？

是的。 ? blog.stylingandroid.com/textinputlayout 和 code.tutsplus.com/tutorials/… 和 hmkcode.com/android-textinputlayout

哇，谢谢！我会看看这些，让你知道它是怎么回事！

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

【参考方案3】：

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

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

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

 <android.support.design.widget.TextInputLayout
    android:id="@+id/to_text_input_layout"
    android:layout_
    android:layout_>

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

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

【参考方案4】：

Android 没有提供原生方法。也不是 AppCompat。

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

这可能是你想要的。

【讨论】：

我在 gradle 同步时收到错误：(1)“属性“颜色”已被定义”，可能是因为 appcompat-v7。我无法摆脱它。有什么建议吗？

MaterialEditText 没有定义名为“color”的属性，所以肯定是别处有问题。

【参考方案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_
    android:layout_>

    <EditText
        android:id="@+id/username"
        android:layout_
        android:layout_
        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");

【讨论】：

至少使用 23.1.1，您不需要显式调用 setHint()。它适用于布局 xml 中 EditText 上设置的提示。

【参考方案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_
            android:layout_
            android:hint="@string/my_hint">

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

【参考方案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 进行优化，因此您可能需要对其进行调整。

【讨论】：

谢谢。我猜谷歌也没有提供用于创建材料风格的编辑文本警告的 api，就像在google.com/design/spec/components/… 抱歉业余问题，我正在尝试使用谷歌的 api/libraries 尽可能多地适应材料设计并试图找出与任何外部库相比已提供的所有内容。再次感谢！

【参考方案8】：

不，它没有。我希望在未来的 api 版本中做到这一点，但现在我们被 EditText 困住了。另一个选择是这个库：https://github.com/marvinlabs/android-floatinglabel-widgets

【参考方案9】：

为了更简单地使用 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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    app:setLabel="Age"
    app:setMandatory="false"
    app:setRegexErrorMsg="Is that really your age :D?"
    app:setRegexString=".*\\d.*" />

【参考方案10】：

使用Material Components Library提供的TextInputLayout：

    <com.google.android.material.textfield.TextInputLayout
        android:layout_
        android:layout_
        android:hint="Label">

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

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