Android Material Design 之 TextInputLayout 自定义使用注意（省略 hint 的错误）-JavaScript中文网-JavaScript教程资源分享门户

在 Android 的 Material Design 中，TextInputLayout 是一个能够让我们的应用程序具有 Material Design 风格的组件，同时也可以拓展其中的一些功能。在使用 TextInputLayout 时，我们需要注意一些自定义的使用细节，避免出现一些常见的错误。

TextInputLayout 简介

TextInputLayout 是一个附加到 EditText 组件上的布局组件，它能够根据我们的输入内容自动地提供相应的提示信息，让界面更具有人性化，符合用户的使用习惯。它支持两种类型的提示信息，一种是普通文本提示（提示字体不会改变颜色），另一种是浮动提示（提示字体会随 EditText 失去焦点而变为不同的颜色）。

除了上述默认的提示外，TextInputLayout 还可以自定义提示信息，比如修改提示字体颜色、提示内容等。

下面我们看一下如何对 TextInputLayout 进行自定义。

TextInputLayout 的自定义使用

自定义提示颜色

可以通过设置 TextInputLayout 下的 EditText 的文本清晰度（又称 Android 主题）来改变提示字体颜色。

// javascriptcn.com 代码示例
<android.support.design.widget.TextInputLayout
        android:id="@+id/til"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入用户名称"
        app:hintTextColor="@color/colorAccent">

        <android.support.v7.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true" />
</android.support.design.widget.TextInputLayout>

自定义提示内容

要自定义提示内容，需要在代码中设置 TextInputLayout 的提示信息。

til.hint = "用户名或邮箱"

自定义下划线颜色

自定义下划线颜色是提高 TextInputLayout 个性化的一种方式，它可以通过下面两种方法来实现。

在 XML 中定义

在 TextInputLayout 标签中设置 app:boxStrokeColor

// javascriptcn.com 代码示例
<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:boxStrokeColor="@color/colorAccent"
        app:layout_constraintTop_toBottomOf="@id/et_username">

        <android.support.v7.widget.AppCompatEditText
            android:id="@+id/et_password"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="请输入密码"
            android:inputType="textPassword"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

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

通过代码设置

通过代码设置下划线颜色需要使用 setBoxStrokeColorStateList 方法。这里需要使用 ColorStateList 对象来设置。

val editText = findViewById<TextInputEditText>(R.id.et_password)
val colorStateList = ColorStateList.valueOf(ContextCompat.getColor(this, R.color.colorAccent))
val background = DrawableCompat.wrap(editText.background!!)
DrawableCompat.setTintList(background, colorStateList)
editText.background = background

总结

在使用 TextInputLayout 时，要注意自定义提示颜色、提示内容、下划线颜色等细节，提升用户体验，减少出错的发生。同时它还是一个扩展组件的好材料，可以对其进行功能上的拓展，为需要的场景提供更加的巧妙可得。

示例代码

示例代码可参考 GitHub 上的 Android_Material_Design_Demo 项目。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654c5e7e7d4982a6eb5e9931