TextInputLayout：输入框

参考：

EditText属性及一些常用用法
一个仿京东商城的个人练手项目
使用TextInputLayout创建一个登陆界面
Android Material Design–TextInputLayout

TextInputLayout控件和LinearLayout完全一样，它只是一个容器。
跟ScrollView一样，TextInputLayout只接受一个子元素。子元素需要是一个EditText元素。

将布局控件TextInputLayout套在编辑框TextInputEditText或EditText外，当用户编辑时会把指定的hint（无输入时的提示信息）内容上浮显示为标题，支持计数、错误及密码可见控制图标等属性的设置。

public class TextInputLayout extends LinearLayout {...}

示例：

导入依赖

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

布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e3e3e3"
    android:orientation="vertical"
    android:padding="@dimen/activity_horizontal_margin">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="Welcome"
            android:textColor="#333333"
            android:textSize="30sp" />

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:orientation="vertical">

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

            <EditText
                android:id="@+id/username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/icon_user"
                android:drawablePadding="5dp"
                android:hint="请输入账号"
                android:inputType="textEmailAddress"
                android:paddingLeft="5dp" />

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

        <android.support.design.widget.TextInputLayout
            android:id="@+id/passwordWrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            app:passwordToggleEnabled="true">

            <EditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/icon_pwd"
                android:drawablePadding="5dp"
                android:hint="请输入密码"
                android:inputType="textPassword"
                android:paddingLeft="5dp" />

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

        <Button
            android:id="@+id/btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:onClick="onClick"
            android:text="Login" />

    </LinearLayout>

</LinearLayout>

显示密码：
TextInputLayout设置passwordToggleEnabled为true，
EditText设置inputType为textPassword，
默认情况下输入内容是以点的形式显示。
点击图标之后便会显示明文，再点一下又会显示密文，如此反复切换。

字数限制：
TextInputLayout节点下：

            app:counterEnabled="true"
            app:counterMaxLength="10"
            app:counterOverflowTextAppearance="@style/HintErrorAppearance"

style/HintErrorAppearance：定义超出个数提示字体颜色

    <style name="HintErrorAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ff0000</item>
        <item name="textColorError">#ff0000</item>
    </style>

Activity：

public class MyActivityI extends AppCompatActivity {

    private TextInputLayout usernameWrapper, passwordWrapper;
    private static final String EMAIL_PATTERN = "^[a-zA-Z0-9#_~!$&'()*+,;=:.\"(),:;<>@\\[\\]\\\\]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*$";//邮箱验证
    private Pattern pattern = Pattern.compile(EMAIL_PATTERN);
    private Matcher matcher;

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

        usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
        passwordWrapper = (TextInputLayout) findViewById(R.id.passwordWrapper);
    }

    public void onClick(View v) {
        hideKeyboard();//隐藏键盘

        String username = usernameWrapper.getEditText().getText().toString();//获取数据
        String password = passwordWrapper.getEditText().getText().toString();
        //错误判断：setErrorEnabled和setError
        if (!validateEmail(username)) {//校验邮箱
            usernameWrapper.setError("Not a valid email address!");
        } else if (!validatePassword(password)) {//校验密码
            passwordWrapper.setError("Not a valid password!");
        } else {
            usernameWrapper.setErrorEnabled(false);
            passwordWrapper.setErrorEnabled(false);
            doLogin();
        }
    }

    private void hideKeyboard() {
        View view = getCurrentFocus();
        if (view != null) {
            ((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).
                    hideSoftInputFromWindow(view.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
        }
    }

    public boolean validateEmail(String email) {
        matcher = pattern.matcher(email);
        return matcher.matches();
    }

    public boolean validatePassword(String password) {
        Log.e("111", "password==" + password);
        Log.e("111", "password.length()==" + password.length());
        Log.e("111", "password.length()> 5==" + (password.length() > 5));
        return password.length() > 5;
    }

    public void doLogin() {
        Toast.makeText(getApplicationContext(), "OK! I'm performing login.", Toast.LENGTH_SHORT).show();
    }

}

修改光标、下划线、floatText的颜色

res\values\styles.xml 中

   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!--改变光标、下划线、floatText的颜色-->
        <item name="colorAccent">#ff4081</item>
    </style>

效果图：