TextInputLayout 是 Material Design 风格的输入框。效果如下。
EditText 在获取焦点的时候，hint 会作为 title 移动到上面去，这样用户输入的过程中也能看到 hint。
TextInputLayout 自带 Error Message，当发生错误的时候，消息显示到线的下方，并且线的颜色也会变掉。
EditText 只要用 TextInputLayout 包裹一下，就能够达到 Material Design 的效果了，XML 的代码如下
<?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:orientation="vertical">
<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:hint="Username"
android:inputType="textEmailAddress" />
</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">
<EditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword" />
</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:text="Login" />
</LinearLayout>
</LinearLayout>
Activity 中的代码如下：
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private static final String EMAIL_PATTERN = "^[a-zA-Z0-9#_~!$&'()*+,;=:.\"(),:;<>@\\[\\]\\\\]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*$";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.btn).setOnClickListener(this);
}
@Override
public void onClick(View v) {
TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
TextInputLayout passwordWrapper = (TextInputLayout) findViewById(R.id.passwordWrapper);
String username = usernameWrapper.getEditText().getText().toString();
String password = passwordWrapper.getEditText().getText().toString();
if (!TextUtils.isEmpty(username) && !validateEmail(username)) {
usernameWrapper.setError("Not a valid email address!");
} else {
usernameWrapper.setErrorEnabled(false);
}
if (!TextUtils.isEmpty(password) && !validatePassword(password)) {
passwordWrapper.setError("Not a valid password!");
} else {
passwordWrapper.setErrorEnabled(false);
}
}
public boolean validateEmail(String email) {
Matcher matcher = Pattern.compile(EMAIL_PATTERN).matcher(email);
return matcher.matches();
}
public boolean validatePassword(String password) {
return password.length() > 5;
}
}
这样，一个简单的登陆画面就完成了。
下面在进一步的介绍一些属性的使用
app:hintEnable
hintEnable 默认是 true 的，只有 true 的时候，获取焦点后 hint 才会移到上面去，如果设为 false，那么 hint 还会再输入框里面。
app:hintAnimationEnabled
hintAnimationEnabled 默认是 true 的，只有 true 的时候，获取焦点以及丢失焦点后 hint 的移动才有动画，如果设为 false，则没有动画。
app:counterEnabled app:counterMaxLength
如果像在输入框下面加入字数统计，可以设置这两个属性，效果如下图
字数统计仅仅是字数统计，并不会限制字数。当超过最大字数时，仍然可以输入，只不过颜色会变成红色，如下图
app:passwordToggleEnabled
有些 App 在输入密码的时候，右边有个眼睛的图标，通过点击可以控制密码可不可见。
如果要显示图标，只要设置 passwordToggleEnabled 为 true 就好了。效果如下
app:passwordToggleTint="@color/colorAccent"
当然 password 的图标的颜色也是可以变的。
app:passwordToggleDrawable
也可以自定义 password 的图标，自定义的图标的颜色也可以通过 app:passwordToggleTint 来改变颜色！
app:hintTextAppearance
自定义浮动标签样式
<style name="hintAppearance" parent="TextAppearance.AppCompat">
<item name="android:textSize">14sp</item>
<item name="android:textColor">#ffee00</item>
</style>
app:errorTextAppearance
自定义错误信息样式
<style name="errorAppearance" parent="TextAppearance.AppCompat">
<item name="android:textSize">14sp</item>
<item name="android:textColor">@color/red</item>
</style>
