Material Design系列之TextInputLayout

2017-01-14 15:49:36来源:http://www.jianshu.com/p/141c092a0c66作者:隔壁王较瘦人点击

第七城市

受够了原生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基本使用就结束了




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台