受够了原生EditText那种呆板的样子了吗，来给它加点料吧！
TextInputLayout.gif
首先添加依赖
compile 'com.android.support:appcompat-v7:24.1.1'
compile 'com.android.support:design:24.1.1'
开始编写布局
<android.support.design.widget.TextInputLayout
android:id="@+id/textInput_name"
// 设置hint的动画
app:hintAnimationEnabled="true"
// 设置字数统计
app:counterEnabled="true"
// 设置统计字数的颜色
app:counterTextAppearance="@color/colorPrimary"
// 设置统计字数最大值，超出会有变色提示
app:counterMaxLength="10"
// 设置超出最大值style，就是输入框提示的颜色
app:counterOverflowTextAppearance="@style/counterOverflow"
android:layout_width="match_parent"
android:layout_height="wrap_content">
// 这个看上去和EditText没什么区别，继承自AppCompatEditText，而AppCompatEditText继承自EditText，只不过实现了TintableBackgroundView接口，没试过，搜到的答案说是全屏状态下有优化
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="UserName"/>
</android.support.design.widget.TextInputLayout>
overflowStyle设置
<style name="counterOverflow">
<item name="android:textColor">@color/red</item>
</style>
代码中的操作
我们在布局文件中写了一个简单的登录页面，需要验证账号是否正确，进行模拟登录操作，下面我们看代码。
布局文件中
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
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:layout_margin="@dimen/activity_horizontal_margin"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="160dp"
android:gravity="center"
android:text="Welcome"
android:textColor="@android:color/black"
android:textSize="30sp"/>
<android.support.design.widget.TextInputLayout
android:id="@+id/textInput_name"
app:hintAnimationEnabled="true"
app:counterEnabled="true"
app:counterTextAppearance="@color/colorPrimary"
app:counterOverflowTextAppearance="@style/Widget.Design.TextInputLayout"
app:counterMaxLength="10"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="UserName"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/textInput_pwd"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="numberPassword"/>
</android.support.design.widget.TextInputLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="click"
android:layout_marginTop="50dp"
android:text="Login"/>
</LinearLayout>
代码中
public class MainActivity extends AppCompatActivity {
private static final String TAG = MainActivity.class.getSimpleName();
private TextInputLayout mTi_name;
private TextInputLayout mTi_pwd;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTi_name = (TextInputLayout) findViewById(R.id.textInput_name);
mTi_pwd = (TextInputLayout) findViewById(R.id.textInput_pwd);
}
public void click(View view){
// 在进行判断前把Error提示设置为false，取消掉错误提示，好处是输入错误之后点击了之后显示取消显示，再设置Error信息
// 如果不在这里调用，两次错一个地方，很容易让用户混淆，以为点击了之后没有反应
mTi_name.setErrorEnabled(false);
mTi_pwd.setErrorEnabled(false);
// TextInputLayout提供了获取子view也就是EditText对象的方法。
// TextInputLayout中只能有一个子View，必须是EditText
String name = mTi_name.getEditText().getText().toString();
String pwd = mTi_pwd.getEditText().getText().toString();
if (TextUtils.isEmpty(name)){
mTi_name.setError("username not null");
return;
}else if (TextUtils.isEmpty(pwd)){
mTi_pwd.setError("password not null");
return;
}
if (!name.equals("odriver")){
mTi_name.setError("username not exist");
return;
}else if (!pwd.equals("123456")){
mTi_pwd.setError("pwd error");
return;
}
Snackbar.make(view,"Login success", Snackbar.LENGTH_SHORT).show();
}
}
** 好了，TextInputLayout基本使用就结束了**
