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>

@ drawable / 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);
}

自定义TextInputLayout和TextInputEditText

1 个答案: