Material Design 中的输入框：EditText，TextInputEditText，TextInputLayout-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 推出的一套设计语言，旨在为 UI 设计带来更统一、更美观、更人性化的体验。在使用 Material Design 设计风格的应用中，输入框（EditText）是不可或缺的重要组件。在本文中，我们将介绍 Material Design 中的输入框，包括 EditText、TextInputEditText、TextInputLayout 这三个组件的使用方法与注意事项。

EditText

EditText 是 Android 系统自带的文本编辑框组件，可以用来输入各种类型的文本数据。在 Material Design 中，EditText 提供了一些预设的样式及交互效果，使其更符合 Material Design 设计风格。

样式

在 Material Design 中，EditText 可以设置以下样式：

1. 下划线（underline）风格

默认的 EditText 样式为下划线，即文本框边缘有一条横向下划线。使用下划线风格的 EditText，可以通过设置 backgroundTint 属性为想要的颜色来改变下划线颜色，如下所示：

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:backgroundTint="@color/colorAccent"/>

2. 盒子（box）风格

盒子风格的 EditText，会在文本框上方添加一个悬浮式的提示文本。可以通过设置 hint 属性来改变提示文本内容，如下所示：

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/edit_text_box_bg"
    android:hint="@string/edit_text_hint"/>

其中 @drawable/edit_text_box_bg 是自定义的盒子背景图片。

交互效果

在 Material Design 中，EditText 为用户提供了以下交互效果：

1. 点击文本框时，提示文本会上移并逐渐透明，同时文本框边缘会显示出颜色。

2. 输入框获得焦点时，提示文本会上移并逐渐透明，同时文本框边缘会显示出颜色。

3. 输入过程中，如果输入内容非空，则不再显示提示文本。

4. 输入框失去焦点时，如果输入内容为空，则会重新显示提示文本。

以上这些交互效果是自动实现的，不需要开发者额外编写代码。

注意事项

在使用 EditText 组件时，需要注意以下几个问题：

1. 文本框颜色设置问题

在设置 EditText 的 backgroundTint 属性时，需要注意该属性的兼容性。在 Android 4.4 及以下版本中，该属性并不支持。如果要为这些版本设置颜色，需要添加相应的兼容库：

compile 'com.android.support:appcompat-v7:25.3.1'

2. 输入过程事件监听问题

在监听 EditText 的输入过程事件时，需要注意使用 addTextChangedListener() 方法：

// www.javascriptcn.com code example
editText.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        // beforeTextChanged
    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        // onTextChanged
    }

    @Override
    public void afterTextChanged(Editable s) {
        // afterTextChanged
    }
});

需要注意，在 onTextChanged() 方法中获取 EditText 的输入内容，需要使用 getText().toString() 方法，而不能直接使用 EditText.getText() 方法。

3. 字数限制问题

如果需要限制 EditText 的输入内容的字数，需要使用 InputFilter 和 setFilters() 方法，如下所示：

int maxChars = 10;
InputFilter[] filters = {new InputFilter.LengthFilter(maxChars)};
editText.setFilters(filters);

TextInputEditText

TextInputEditText 是 Material Design 中新增的一个组件，继承自 EditText，并增加了一些新的属性和方法，提供了更丰富的输入框交互效果。

样式

TextInputEditText 可以设置的样式与 EditText 相同，但需要将其放在一个 TextInputLayout 中才能生效，如下所示：

// www.javascriptcn.com code example
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/edit_text_hint"/>
    
</android.support.design.widget.TextInputLayout>

交互效果

TextInputEditText 为用户提供了更丰富的交互效果，包括提示文本交互、错误提示及字符计数器等。

1.提示文本交互

与 EditText 相同，TextInputEditText 的提示文本支持自动上移和隐藏。

2. 错误提示

如果用户输入的内容不符合要求，可以通过 TextInputLayout 的 setError() 方法显示错误提示。显示错误提示后，文本框颜色会变为红色，并带有一个红色的感叹号图标。

textInputLayout.setError("请输入正确的手机号码");

同时，使用 setErrorEnabled() 方法可以开启或关闭错误提示的显示：

textInputLayout.setErrorEnabled(true);

3. 字符计数器

TextInputEditText 支持字符计数器功能，可以实时显示输入内容的字数及最大可输入字数。使用 setCounterEnabled() 方法可以开启或关闭字符计数器：

textInputLayout.setCounterEnabled(true);

同时，使用 setCounterMaxLength() 可以指定最大可输入字数：

textInputLayout.setCounterMaxLength(10);

在开启字符计数器时，需要为 TextInputLayout 设置一个布局文件来显示计数器。可以在布局文件中通过 app:counterEnabled 和 app:counterMaxLength 属性代替调用代码：

// www.javascriptcn.com code example
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:counterEnabled="true"
    app:counterMaxLength="10">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/edit_text_hint"/>

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

TextInputLayout

TextInputLayout 是 Material Design 中新增的一个组件，用于增强输入框的交互效果。TextInputLayout 可以包括 TextInputEditText、EditText 等子控件，同时提供了一些新的方法和属性。

样式

TextInputLayout 可以设置以下样式：

1. Hint 字体颜色

可以通过设置 android:textColorHint 属性来改变提示文本的颜色：

// www.javascriptcn.com code example
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColorHint="@color/colorAccent"
        android:hint="@string/edit_text_hint"/>

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

2. 边框颜色

可以通过设置 boxBorderColor 属性来改变边框颜色：

// www.javascriptcn.com code example
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:boxStrokeColor="@color/colorAccent">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/edit_text_hint"/>

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

交互效果

TextInputLayout 可以为用户提供以下交互效果：

1. Hint 文本交互

与 EditText 和 TextInputEditText 相同，提示文本支持自动上移和隐藏。

2. 错误提示

与 TextInputEditText 相同，TextInputLayout 也支持错误提示功能。

3. 漂浮式提示

在 Material Design 中，输入框下方可以添加一个悬浮式提示文本，简单明了地指示用户需要输入什么内容。

// www.javascriptcn.com code example
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColorHint="@color/colorAccent"
        android:hint="@string/edit_text_hint"/>

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

需要注意，为了使漂浮式提示与输入框保持一定的距离，需要为 TextInputLayout 添加 app:paddingTop="8dp" 属性。

示例代码

下面是一个包含 EditText、TextInputEditText、TextInputLayout 的实例代码，用于展示它们的样式和交互效果：

// www.javascriptcn.com code example
<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:backgroundTint="@color/colorAccent"/>

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:counterEnabled="true"
    app:counterMaxLength="10"
    app:hintAnimationEnabled="true"
    app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout"
    app:boxStrokeColor="@color/colorAccent"
    app:boxCornerRadiusBottomEnd="8dp"
    app:boxCornerRadiusBottomStart="8dp"
    app:boxCornerRadiusTopEnd="8dp"
    app:boxCornerRadiusTopStart="8dp"
    app:paddingTop="16dp">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColorHint="@color/colorAccent"
        android:hint="@string/edit_text_hint"/>

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

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:counterEnabled="true"
    app:counterMaxLength="10"
    app:hintAnimationEnabled="true"
    app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout"
    app:boxStrokeColor="@color/colorAccent"
    app:boxCornerRadiusBottomEnd="8dp"
    app:boxCornerRadiusBottomStart="8dp"
    app:boxCornerRadiusTopEnd="8dp"
    app:boxCornerRadiusTopStart="8dp"
    app:paddingTop="16dp">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColorHint="@color/colorAccent"
        android:hint="@string/edit_text_hint"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="字符计数器"/>

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

在使用这些组件时，需要确保 Android Studio 中已添加 com.android.support:design 包：

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

同时，为了确保兼容性，建议在 EditText 中使用 android:backgroundTint 属性时，先判断当前系统版本，若 Android 系统版本小于 5.0，可以使用 android:tint 属性代替。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7e4dda941bf7134e1e838

Material Design 中的输入框：EditText，TextInputEditText，TextInputLayout

EditText

样式

交互效果

注意事项

TextInputEditText

样式

交互效果

TextInputLayout

样式

交互效果

示例代码

接着读