封面

1.介绍

TextInputLayout是一个用于在EditText上显示Floating效果的辅助控件。
效果图如下：

TextInputLayout

2.使用方法

在build.gradle文件中加上这段代码：

compile 'com.android.support:design:22.2.0'

import android.content.Context;
import android.os.Bundle;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.MotionEvent;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;

import butterknife.Bind;
import butterknife.ButterKnife;

/**
 * Created by yangle on 2016/7/28.
 */
public class TextInputLayoutActivity extends AppCompatActivity {

    @Bind(R.id.layout_account)
    TextInputLayout layoutAccount;
    @Bind(R.id.layout_password)
    TextInputLayout layoutPassword;

    private EditText mAccount;
    private EditText mPassword;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_textinput_layout);
        ButterKnife.bind(this);

        initView();
    }

    private void initView() {
        //设置提示文字
        layoutAccount.setHint("Username");
        layoutPassword.setHint("Password");

        //通过getEditText()方法来获取EditText控件
        mAccount = layoutAccount.getEditText();
        mPassword = layoutPassword.getEditText();

        mAccount.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                if (s.length() > 5) {
                    //显示错误提示
                    layoutAccount.setError("Username Error");
                    layoutAccount.setErrorEnabled(true);
                } else {
                    layoutAccount.setErrorEnabled(false);
                }
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        InputMethodManager inputMethodManager = (InputMethodManager) this.getSystemService(Context.INPUT_METHOD_SERVICE);
        inputMethodManager.hideSoftInputFromWindow(mAccount.getWindowToken(), 0);
        inputMethodManager.hideSoftInputFromWindow(mPassword.getWindowToken(), 0);
        return super.onTouchEvent(event);
    }
}

布局文件

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="100dp"
        android:text="Welcome"
        android:textColor="@color/color_333333"
        android:textSize="35sp" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/layout_account"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="60dp">

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

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

    <android.support.design.widget.TextInputLayout
        android:id="@+id/layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword" />

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

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="18dp"
        android:layout_marginRight="18dp"
        android:layout_marginTop="20dp"
        android:text="Login"
        android:textSize="18sp" />

</LinearLayout>

3.注意

• 在EditText中设置textColorHint属性是没有效果的，textColorHint会根据Theme的颜色来显示，只能通过设置Activity的Theme来更改hint的颜色。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColorHint">@color/color_333333</item>
</style>

GitHub地址：https://github.com/alidili/DesignSupportDemo