自定义TextInputLayout和TextInputEditText

Question

Google为Text fields component提供了材料指南。任何人都可以帮助我如何自定义“com.android.support:design”库中的TextInputLayout和TextInputEditText以完成same visual effect？在我的项目中，我一直在使用min SDK版本16.任何帮助将不胜感激。

Answer 1

在您的布局内

activity_main.xml中

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout_email"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/edit_text_email"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/gray_background"
        android:hint="@string/registration_email"
        android:inputType="textEmailAddress"/>

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

@绘制/ gray_background

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#BDBDBD" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</selector>

说明

以下行使您想要实现的灰色背景如图所示。

android:background="@drawable/gray_background"

这是用户的提示（照片中的标签），通过使用此用户将知道他需要输入什么。在我的情况下，我要求用户的电子邮件。

// Since @string/registration_email = "Email"
android:hint="@string/registration_email"

在这里，您可以输入用户将键入的文本类型。就我而言，它将是一种电子邮件地址的格式。可能的选项有：textPassword，textPersonName，textMultiLine ...

android:inputType="textEmailAddress"

颜色

在字段处于活动状态时，您的照片会变为紫色，这是应用程序的默认强调颜色，位于 - > res / values / styles.xml中。

styles.xml

<!-- 1. Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 1.1. Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style

错误消息错误

如果要在用户输入错误信息时显示错误消息，则可以通过执行此操作来实现。

在这种情况下，我有一个字段，用户键入其频道名称。如果用户将其留空，或者如果他输入超过60个字符，它将发出警告。

private TextInputEditText mChannelName;
private TextInputLayout mChannelNameLayout;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_searchable);

    mChannelName = findViewById(R.id.edit_text_channel_name);
    mChannelNameLayout = findViewById(R.id.input_layout_channel_name);

    setupEditTextFeatures();
}

/**
 * 1) Set the error messages to the edit texts;
 * 2) Set the maximum length for the fields.
 */
private void setupEditTextFeatures() {

// 1) Error message if the user leave Channel Name field empty;
mChannelName.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) { }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        if (mChannelName.getText().toString().isEmpty()) {
            mChannelNameLayout.setErrorEnabled(true);
            mChannelNameLayout.setError(getString(R.string.msg_fill_in_channel_name_please));
        } else {
            mChannelNameLayout.setErrorEnabled(false);
        }
    }

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

// 2) Set Channel Name Field's maximum length to 60 characters;
mChannelNameLayout.setCounterEnabled(true);
mChannelNameLayout.setCounterMaxLength(60);
}