Design下TextInputLayout结合EditText的简单使用

今天写的是Design下的TextInputLayout。

稍微介绍一下，一般我们在App上面登录注册页面时，都需要去检测用户输入的内容是否正确，然后给出提醒或错误显示。之前我们都是布局写一大堆代码，显示错误信息，判断控件内容。总的来说比较麻烦。而现在有了TextInputLayout,我们不在需要这么麻烦。

TextInputLayout给我们提供了两种功能：

1，给EditText添加一个带有动画效果的提示标签（利用EditText的hint属性的值作为提示标签内容）,

2，处理错误输入，将错误输入提示信息显示在EditText附近，便于提示用户更好地完成输入。

TextInputLayout只是一个ViewGroup,里面可以定义Edittext,而且会把EditText中hint属性作为提示标签。

首先需先导入Design包：

之后build.gradle文件下会多下面一句代码：

先看下activity_mian.xml布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="main.hwh.com.textinputtext.MainActivity"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/usernameLayout"
        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:inputType="textEmailAddress"
            android:hint="Username"/>

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

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:hint="Password"/>

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

    <Button
        android:id="@+id/loginBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="50dp"
        android:text="Login"
        android:onClick="loginOnClick"
        android:layout_gravity="center"/>

</LinearLayout>

这个是个简单登录页面。两个TextInputLayout分别包裹UserName和Password。

注意：当EditText设置了Hint属性时,它的内容将作为TextInputLayout的提示标签,不是错误标签。

下面看一下用法，MainActivity.java:

<pre style="font-family: Consolas; font-size: 10.5pt; background-color: rgb(255, 255, 255);"><pre name="code" class="java">public class MainActivity extends AppCompatActivity {

    private TextInputLayout usernameLayout;
    private TextInputLayout passwordLayout;
    private Button loginBtn;


//
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        usernameLayout = ((TextInputLayout) findViewById(R.id.usernameLayout));
        passwordLayout = ((TextInputLayout) findViewById(R.id.passwordLayout));
        loginBtn = ((Button) findViewById(R.id.loginBtn));
    }

    public void loginOnClick(View v){
        hideKeyboard();
        String username = usernameLayout.getEditText().getText().toString();
        String password = passwordLayout.getEditText().getText().toString();

        if (!"Tmac".equals(username)){
            usernameLayout.setError("你不是麦迪。请重新输入");
        }else if(!"123456".equals(password)){
            passwordLayout.setError("密码错误，请重新输入");
        }else{
            //用户名密码都正确。取消Error显示
            usernameLayout.setErrorEnabled(false);
            passwordLayout.setErrorEnabled(false);
            Toast.makeText(this,"欢迎回来",Toast.LENGTH_LONG).show();

        }
    }

    //隐藏虚拟键盘
    private void hideKeyboard() {
        View view = getCurrentFocus();
        if (view != null) {
            ((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).
                    hideSoftInputFromWindow(view.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
        }
    }
}

其中

usernameLayout.getEditText().getText().toString();

可以到EditText中输入的内容。

usernameLayout.setError("你不是麦迪。请重新输入");

这个方法是判断用户名错误之后希望他显示的错误信息。

usernameLayout.setErrorEnabled(false);

这个方法是用户名，密码都正确之后把他的错误提示设置为false，不这样设置的话，错误信息会一直显示。

下面看下效果图：