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>