Android TextInputLayout

TextInputLayout是Google在2015 I/O大会上发布的Design Library包下的控件，使用比较简单，简单的用了下确实挺方便的。
先来看下效果图：

我们可以看 1、，当EditText获得焦点时候，TextInputLayout会在左上角默认的生成一个Label用来显示EditText中hint的内容，所以当用户输入时候hint内容会浮动到左上角，并且伴随动画。
2、当EditText中输入的内容不合法时，TextInputLayout便会在EditText的左下角用红色显示错误的提示信息。
下面看一下具体的代码实现，布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="test"/>

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

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textColor="#0F0"
            android:hint="请输入手机号"/>

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

</LinearLayout>

Activity中的调用代码如下：

 private TextInputLayout textInputLayout;

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

        textInputLayout = (TextInputLayout) findViewById(R.id.text_input_layout);
        EditText editText = textInputLayout.getEditText();

        editText.addTextChangedListener(textWatcher);
    }

    private TextWatcher textWatcher = 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) {

        }

        @Override
        public void afterTextChanged(Editable s) {
            String text = s.toString();
            if(text.length() < 3 && text.length() > 0){
                //setError 之后需要手动清除
                textInputLayout.setErrorEnabled(true);
                textInputLayout.setError("长度最小为3位");
            }else{
                textInputLayout.setErrorEnabled(false);
            }
        }
    };

可以看出代码量很少，用起来很方便，但是有几点需要注意：
1、TextInputLayout布局中只能包含一个EditText子View，不能包含多个EditText。
2、想获得TextInputLayout里面的EditText可以直接通过getEditText()方法获取，也有相对应的setEditText(EditText editText)方法。
3、如果要显示error提示，需要先进行setErrorEnabled为true，如果想关闭提示可以直接设置setErrorEnabled为false。
4、在设置hint的颜色时，如果对EditText设置android:textColorHint是不起作用的，需要对theme中的colorAccent进行设置，下面一张图能很好的说明colorAccent的作用
style的代码如下

 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorAccent">#F123F9</item>
    </style>

5、即使当前焦点不在TextInputLayout了，但是如果还设置error呢，显示效果也相当于获取焦点，效果如下图，此时焦点在test上。

6、默认error的颜色为红色，如果红色不是我们的UI要求需要更改呢，我们可以通过设置TextInputLayout的errorTextAppearance属性，至于为什么我们先看下TextInputLayout的源码，当我们调用setError的时候其中有一段代码如下：

 public void setError(@Nullable CharSequence error) {
        if (!mErrorEnabled) {
            if (TextUtils.isEmpty(error)) {
                // If error isn't enabled, and the error is empty, just return
                return;
            }
            // Else, we'll assume that they want to enable the error functionality
            setErrorEnabled(true);
        }
        if (!TextUtils.isEmpty(error)) {
            ViewCompat.setAlpha(mErrorView, 0f);
            mErrorView.setText(error);
            ViewCompat.animate(mErrorView)
                    .alpha(1f)
                    .setDuration(ANIMATION_DURATION)
                    .setInterpolator(AnimationUtils.FAST_OUT_SLOW_IN_INTERPOLATOR)
                    .setListener(new ViewPropertyAnimatorListenerAdapter() {
                        @Override
                        public void onAnimationStart(View view) {
                            view.setVisibility(VISIBLE);
                        }
                    })
                    .start();
            // Set the EditText's background tint to the error color
            mErrorShown = true;
            updateEditTextBackground();
            updateLabelVisibility(true);
        } else {
           .........
           //省略内容自行查看
        }
    }

通过上述源码我们发现其实色setError就是调用 mErrorView.setText(error);这句代码，但是我们这里没有mErrorView的创建，因为我们调用setError之前需要先设置setErrorEnabled，所以我们再看下setErrorEnabled的源码：

public void setErrorEnabled(boolean enabled) {
        if (mErrorEnabled != enabled) {
            if (mErrorView != null) {
                ViewCompat.animate(mErrorView).cancel();
            }

            if (enabled) {
                mErrorView = new TextView(getContext());
                mErrorView.setTextAppearance(getContext(), mErrorTextAppearance);
                mErrorView.setVisibility(INVISIBLE);
                ViewCompat.setAccessibilityLiveRegion(mErrorView,
                        ViewCompat.ACCESSIBILITY_LIVE_REGION_POLITE);
                addIndicator(mErrorView, 0);
            } else {
                mErrorShown = false;
                updateEditTextBackground();
                removeIndicator(mErrorView);
                mErrorView = null;
            }
            mErrorEnabled = enabled;
        }
    }

我们可以发现mErrorView是在setErrorEnabled的时候创建的，并且创建的时候设置了mErrorTextAppearance，然后我们再查找mErrorTextAppearance的赋值发现在TextInputLayout的构造方法中有如下代码：

mErrorTextAppearance = a.getResourceId(R.styleable.TextInputLayout_errorTextAppearance, 0);

到这里我们发现可以通过errorTextAppearance来设置TextInputLayout的error样式，进一步完善TextInputLayout的创建如下：

 <android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout"
        android:layout_width="match_parent"
        app:errorTextAppearance="@style/error_style"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textColor="#0F0"
            android:hint="请输入手机号"/>

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

error_style的代码如下：

 <style name="erroe_style">
        <item name="android:textColor">#FFFF33</item>
    </style>

运行效果如下：

如有什么错误希望大家指出。