Android基础学习总结（六）——TextInputLayout+EditText 轻松实现登录界面

什么是TextInputLayout

Layout which wraps an {@link android.widget.EditText} (or descendant) to show a floating label when the hint is hidden due to the user inputting text.

意思就是：一个布局包裹了EditText（或者EditText的子类），在用户输入文本的时候显示一个浮动的提示标签。

TextInputLayout继承关系如下：

java.lang.Object
↳    android.view.View
↳    android.view.ViewGroup
↳    android.widget.LinearLayout
↳    android.support.design.widget.TextInputLayout

TextInputLayout的好处

传统的EditText，在用户输入信息的时，hint（提示）会自动消失，就如上图的中的第一行所示，这时候用户可能会忘记自己需要输入的内容是什么了，得删除所有的输入内容才可以看到hint的提示内容，这样的用户体验不太好。

而图二在用户输入的时候，hint会默认弹到上方，并且携带一个动画效果。它仅仅只是在EditText外包裹了一层TextInputLayout，然而就是这样一个小小的改动不仅提高了与用户交互的体验，而且解决了hint输入后消失的问题，唯一的不好就是“占地面积”大了一点，当然这一点点小瑕疵还是可以忽略的。

TextInputLayout的基本用法

1.首先要引入design和appcompat-v7兼容包:

compile 'com.android.support:design:25.2.0'
compile 'com.android.support:appcompat-v7:25.2.0'

2.布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
tools:context="study.test3.MainActivity">

<android.support.design.widget.TextInputLayout
android:id="@+id/edit1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入IP地址"
app:hintAnimationEnabled="true"
app:hintEnabled="true"
app:counterEnabled="true"
app:counterMaxLength="13"
app:counterTextAppearance="@style/Mystyle"
app:counterOverflowTextAppearance="@style/Mystyle2"
>
<EditText
android:id="@+id/edittext1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/edit2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入密码"
app:hintAnimationEnabled="true"
app:hintEnabled="true"
app:counterEnabled="true"
app:counterMaxLength="13"
app:counterTextAppearance="@style/Mystyle"
app:counterOverflowTextAppearance="@style/Mystyle2"
android:layout_below="@+id/edit1"
>
<EditText
android:id="@+id/edittext2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/btn1"
android:layout_below="@id/edit2"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="登录"
/>
</RelativeLayout>

效果图



布局很好理解，就是给EditText包上一层就好，就下来看看常用具体属性有哪些

注意:

给EditText所在的父类布局添加如下属性：

android:focusable="true"
android:focusableInTouchMode="true"

可将焦点转移到EditText的父类布局上，EditText在初始化的时候就不会获取到焦点

TextInputLayout的基本属性

app:hintAnimationEnabled=”true” 设置是否可以使用动画，默认是true

app:hintEnabled=”true” 设置是否可以使用hint属性，默认是true

app:counterEnabled=”true”设置是否可以开启计数器，默认是false，这个功能可以很好的告诉用户目前输入的文字位数，已经告诉用户已经超标请不要在输入了。

app:counterMaxLength=”13”设置计算器的最大字数限制

app:counterTextAppearance=”@style/Mystyle”设置计算器正常的文字颜色和大小

app:counterOverflowTextAppearance=”@style/Mystyle
4000
2”设置计算器越位后的计数器颜色和大小

app:hintTextAppearance 设置上弹以后的文字的大小颜色等属性

附上MyStyle的代码（在style.xml）：

<style name="Mystyle" >
<item name="android:textColor">#00aaff</item>
<item name="android:textSize">16sp</item>
</style>
<style name="Mystyle2">
<item name="android:textColor">#ed5a5a</item>
<item name="android:textSize">16sp</item>
</style>

字数越界提示

TextInputLayout错误提示

TextInputLayout还可以处理错误并给出相应提示，比如我们添加一个登录按钮，点击登录按钮的时候要验证IP地址和密码长度为4-10个字符。

setError 设置错误提示语句

setErrorEnabled 设置是否显示错误

1.首先在布局上添加一个登录按钮：

<Button
android:id="@+id/btn1"
android:layout_below="@id/edit2"

android:layout_width="80dp"
android:layout_height="80dp"
android:text="登录"
/>

2.添加验证用户名和密码方法,这里用到了Java正则表达式：：

public  boolean validateAccount(String ipStress)
{
if(ipStress.matches(regex))
{
return true;
}else
{
textInputLayout.setError("Ip地址错误");
return false;
}

}
private boolean validatePassward(String passward) {
if(!passward.matches(regex2))
{
textInputLayout2.setError("密码错误");
return false;
}
if (passward.length()<4 ||passward.length() >10 )
{
textInputLayout2.setError("密码长度必须4-10位");
return false;
}else
return true;
}

3.给登录按钮设置点击事件，在触发点击事件的时候获取IP和密码，并验证IP和密码格式:

Button btn_login= (Button) findViewById(R.id.btn1);
btn_login.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
IpStress =editText.getText().toString();
Passward =editText2.getText().toString();
textInputLayout.setErrorEnabled(false);
textInputLayout2.setErrorEnabled(false);
if(validateAccount(IpStress) && validatePassward(Passward))
{
Toast.makeText(MainActivity.this,"Login Success",Toast.LENGTH_SHORT).show();
}
}
});

最终效果图：

总结

TextInputLayout+EditText 实现登录界面还是不难的，录制的gif比较渣像素虚心求教大佬，继续学习ing…