Material Design之输入框TextInputLayout的使用

Material Design推出已经快两年了，很喜欢它的效果，今天我们来学习一下TextInputLayout，首页看下效果图：

怎么样，比传统的EditText效果是不是看好多了，下面就来学习下怎么使用吧：

一、按照惯例，先创建项目然后引入design的依赖包

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

二、添加布局文件

<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:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context="com.guifa.logintest.LoginActivity">

    <LinearLayout
        android:id="@+id/email_login_form"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <AutoCompleteTextView
                android:id="@+id/phone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="账号"
                android:inputType="phone"
                android:maxLines="1" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            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:hint="密码"
                android:imeOptions="actionUnspecified"
                android:inputType="textPassword"
                android:maxLines="1" />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/btnLogin"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="登录"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

可以看出，只是在TextInputLayout中添加了AutoCompleteTextView和EditText，然后就可以实现效果了，AutoCompleteTextView是一个自动补全的控件，这里不做讲解，也可以换成EditText。

三、Java代码部分

package com.guifa.logintest;

import android.content.Intent;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.EditText;

/**
 * 登录页面
 */
public class LoginActivity extends AppCompatActivity {
    private UserLoginTask mAuthTask = null;
    private AutoCompleteTextView mPhoneView;
    private EditText mPasswordView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        mPhoneView = (AutoCompleteTextView) findViewById(R.id.phone);
        mPasswordView = (EditText) findViewById(R.id.password);
        Button btnLogin = (Button) findViewById(R.id.btnLogin);
        btnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                attemptLogin();
            }
        });
    }

    private void attemptLogin() {
        if (mAuthTask != null) {
            return;
        }
        mPhoneView.setError(null);
        mPasswordView.setError(null);
        String phone = mPhoneView.getText().toString();
        String password = mPasswordView.getText().toString();
        boolean cancel = false;
        View focusView = null;
        if (!TextUtils.isEmpty(password) && !isPasswordValid(password)) {
            mPasswordView.setError("密码长度过短"); // 出错时，右侧提示的内容
            focusView = mPasswordView;
            cancel = true;
        }
        if (TextUtils.isEmpty(phone)) {
            mPhoneView.setError("手机号不能为空");
            focusView = mPhoneView;
            cancel = true;
        } else if (!isEmailValid(phone)) {
            mPhoneView.setError("手机号错误");
            focusView = mPhoneView;
            cancel = true;
        }
        if (cancel) {
            focusView.requestFocus();
        } else {
            mAuthTask = new UserLoginTask(phone, password);
            mAuthTask.execute((Void) null);
        }
    }

    private boolean isEmailValid(String phone) { 
        // 这里是匹配账号，看是否合法，这里只是用是否包含“1”做演示，按需求自行替换即可
        return phone.contains("1");
    }

    private boolean isPasswordValid(String password) {
        // 这里是匹配密码，看是否合法，这里只是用密码长度是否大于4做演示，按需求自行替换即可
        return password.length() > 4;
    }

    public class UserLoginTask extends AsyncTask<Void, Void, Boolean> {
        private final String mPhone;
        private final String mPassword;

        UserLoginTask(String email, String password) {
            mPhone = email;
            mPassword = password;
        }

        @Override
        protected Boolean doInBackground(Void... params) {
            try {
                Thread.sleep(2000);
            } catch (InterruptedException e) {
                return false;
            }
            // 这里默认写了个账号密码，来判断是否登录成功，成功则跳转到Home页，失败给提示
            return (mPhone.equals("123456789") && mPassword.equals("123456"));
        }

        @Override
        protected void onPostExecute(final Boolean success) {
            mAuthTask = null;
            if (success) {
                startActivity(new Intent(LoginActivity.this, HomeActivity.class));
            } else {
                mPasswordView.setError("登录失败，账号或密码错误");
                mPasswordView.requestFocus();
            }
        }

        @Override
        protected void onCancelled() {
            mAuthTask = null;
        }
    }
}

以上就是TextInputLayout的简单使用，若有错误和建议，欢迎指出

下面介绍一下它的几个常用属性:

1.android:hint=”账号”，这个属性在EditText中设置，作用是提示用户要输入什么，获取焦点以后，里面内容会稍微向上移动，若不设置，则不会有这个效果
2.mPasswordView.setError(“输入错误的提示内容”);在代码中设置该属性会在出错时提示用户。mPasswordView表示TextInputLayout中的控件，如EditText等。
3.想改变光标和hint的颜色，则只需要修改res–>values–>colors.xml中的colorAccent的颜色值即可，如：

<color name="colorAccent">#FF41</color>