MaterialDesign TextInputLayout

727 阅读2分钟

简介

TextInputLayout是Android5.0新增的android:support.design库下的特色控件。

TextInputLayout.png

开发文档介绍:

Layout which wraps an EditText (or descendant) to show a floating label when the hint is hidden due to the user inputting text.

译:TextInputLayout是包裹一个EditText,可以显示浮动标签的布局。

即:TextInputLayout只能包含一个EditText控件,能够根据用户输入来显示浮动标签,增加用户体验。TextInputLayout也是实现Google提出的MaterialDesign的一个重要特色控件。

使用

布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context="com.main.textinputlayout.TextInputLayoutActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textinput_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:errorEnabled="true"
        app:counterOverflowTextAppearance="@style/counterTextInputLayoutStyle"
        app:counterTextAppearance="@style/counterTextInputLayoutStyle"
        app:errorTextAppearance="@style/errorTextInputLayoutStyle"
        app:hintTextAppearance="@style/textInputLayoutStyle"
        app:hintAnimationEnabled="true">

        <EditText
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:hint="请输入用户名"
            android:padding="10dp"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:errorEnabled="true"
        app:hintAnimationEnabled="true">

        <EditText
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="请输入密码"/>
    </android.support.design.widget.TextInputLayout>

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="请确认密码"/>

</LinearLayout>

这就是TextInputLayout在xml文件布局中使用,TextInputLayout包含一个EditText。 在TextInputLayout中指定了hint文本、输入错误时的hint文本和是否支持提示动画的样式等等。

属性介绍

app:errorEnabled:是否支持输入错误时显示提示,默认true

app:errorTextAppearance:指定输入错误时显示提示的文本的样式。

app:counterOverflowTextAppearance:指定设置计算器越位后的文本的样式

app:counterTextAppearance:指定计算器的文本的样式

app:hintTextAppearance:指定hint文本的样式

app:hintAnimationEnabled:是否支持hint文本动画,默认true

关于更多的TextInputLayout属性,可查看开发文档。

设置的的样式

<style name="textInputLayoutStyle">

        <item name="android:textColor">#3F51B5</item>

        <item name="android:textSize">20dp</item>

</style>

<style name="errorTextInputLayoutStyle">

        <item name="android:textColor">#FF0000</item>

        <item name="android:textSize">20dp</item>

</style>

<style name="counterTextInputLayoutStyle">

        <item name="android:textColor">#FF4081</item>

        <item name="android:textSize">20dp</item>

</style>

Activity中使用

public class TextInputLayoutActivity extends AppCompatActivity {

    private TextInputLayout mInputLayout;

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

        mInputLayout = (TextInputLayout) this.findViewById(R.id.textinput_layout);

        //检测长度应该低于6位数
        mInputLayout.getEditText().addTextChangedListener(new MinLengthTextWatcher(mInputLayout, "长度应低于6位数!"));

        //开启计数
        mInputLayout.setCounterEnabled(true);
        //最大输入限制数
        mInputLayout.setCounterMaxLength(6);


    }

    private class MinLengthTextWatcher implements TextWatcher {


        private String errorStr;
        private TextInputLayout textInputLayout;

        //注入
        public MinLengthTextWatcher(TextInputLayout inputLayout, String s) {
            this.textInputLayout = inputLayout;
            this.errorStr = s;
        }

        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void afterTextChanged(Editable editable) {
            // 文字改变后回调
            if (textInputLayout.getEditText().getText().toString().length() <= 6) {
                textInputLayout.setErrorEnabled(false);
            } else {
                textInputLayout.setErrorEnabled(true);
                //设置输入错误时的提示文本
                textInputLayout.setError(errorStr);
            }
        }
    }
}

TextInputLayout在java代码中同样可以设置其属性,开发者根据需求动态改变其属性。包括设置hint文本,error文本等等。

效果图

TextInputLayout.png

TextInputLayout还可以根据自己的需求设置不一样的样式,显示的不一样的效果,设置具体的样式读者可以自己去实践探讨下。