Android EditText
之前讲了一个带动画的EditText
这一篇来讲一下
对于我个人也比较常用的一个EditText —— Material Design 的 TextInputEditText
网上也有很多文章关于这个TextInputEditText
很多属性也都归纳过
这里我就简单讲述一下 我使用的
仅为个人自己所学习和使用的
首先 TextInputEditText 要和TextInputLayout 搭配使用
TextInputLayout 就等同于一个线性布局，TextInputEditText的限制属性也可以在TextInputLayout 中描述声明
样例
简单放一下样例
样例中，字数超过限制后会相应的报错，如果用于密码还可以设置显示和隐藏密码
之前也写过文章关于这个隐藏密码的问题
Android TextInputEditText初始隐藏密码
图一xml
下面分别给出两张图的两段代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/cloud"
tools:context=".ui.LoginActivity">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="320dp"
android:layout_height="320dp"
android:layout_centerInParent="true"
android:background="@drawable/shape_mine_top1"
android:elevation="5dp"
android:orientation="vertical"
android:paddingTop="10dp">
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="@drawable/identification"
android:drawableLeft="@drawable/identification"
android:hint="请输入账号"
android:imeOptions="actionNext"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
app:hintAnimationEnabled="true"
app:hintEnabled="true"
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/toggle">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="@drawable/password"
android:drawableLeft="@drawable/password"
android:hint="请输入密码"
android:imeOptions="actionDone"
android:inputType="number" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="@+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:backgroundTint="#FFFFFF"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:text="确定"
android:textColor="#CC9933"
app:cornerRadius="15sp"
app:icon="@drawable/right"
app:iconSize="20dp"
app:iconTint="#CC9933"
app:strokeColor="#7FFFD4"
app:strokeWidth="2dp" />
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="注册账号"
android:textColor="#808080"
android:textSize="11sp"/>
</androidx.appcompat.widget.LinearLayoutCompat>
</RelativeLayout>
图二xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".button_list.TextInputEdit">
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="10dp"
android:background="@drawable/text_edit"
app:counterEnabled="true"
app:counterMaxLength="8"
app:counterOverflowTextAppearance="@style/counterOverFlow"
app:counterTextAppearance="@style/CounterStyle"
app:hintAnimationEnabled="true"
app:hintEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/man"
android:hint="请输入相应内容"
android:imeOptions="actionNext"
android:inputType="text"
android:paddingLeft="10dp"
android:textColorHint="#fff" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="10dp"
android:hint="请输入相应内容"
android:background="@drawable/second_text_edit"
app:counterEnabled="true"
app:counterMaxLength="6"
app:counterOverflowTextAppearance="@style/counterOverFlow"
app:hintAnimationEnabled="true"
app:hintEnabled="true"
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/toggle">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionNext"
android:inputType="number"/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:hint="请输入相应内容"
app:counterEnabled="true"
app:counterMaxLength="6"
app:hintAnimationEnabled="true"
app:hintEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/textInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionDone"
android:inputType="number"/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textInputLayout_second"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:hint="请输入相应内容"
app:counterEnabled="true"
app:counterMaxLength="6"
app:hintAnimationEnabled="true"
app:hintEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/textInputEditText_second"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionDone"
android:inputType="number"/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
这里仅仅提及我上图所使用的属性
且属性说明比较口语化
涉及字体样式的，图中使用colors和style的可以定义颜色
| 属性 | 属性说明 |
|---|---|
| android:drawableLeft | 在输入框左边添加图片 |
| app:hintAnimationEnabled | hint的动画是否显示，默认显示，默认值为true |
| app:hintEnabled | hint是否使用，默认使用，默认值为true |
| app:passwordToggleEnabled | 是否使用密码隐藏和显示，需要设置EditText inputType |
| app:passwordToggleTint | 密码显示和隐藏图片颜色 |
| app:counterEnabled | 是否使用计数器 |
| app:counterMaxLength | 计数器的最大值，需要使用计数器 |
| app:counterOverflowTextAppearance | 超过计数器最大值时字体样式 |
| app:counterTextAppearance | 计数器的字体的样式 |
可以看到图二中，第三第四个是有错误的提示的，这个是自定义的样式
接下来通过活动来编写
错误提示样式一
activity
private TextInputLayout textInputLayout;
private TextInputEditText textInputEditText; //EditText错误信息
textInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout);
textInputEditText = (TextInputEditText) findViewById(R.id.textInputEditText); //EditText错误信息
makerEditText();
//自定义错误信息
public void makerEditText() {
textInputEditText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
if (textInputEditText.getText().length() > textInputLayout.getCounterMaxLength()) {
textInputEditText.setError("已经超过限定字数了!! 需要重新输入");
}
}
});
}
这一个自定义的错误信息是设置在EditText（TextInputEditText）的
通过监听TextInputEditText，判断输入的是否大于规定的计数器的最大值，超过则显示错误信息，setError
错误提示样式二
activity
private TextInputLayout newTextInputLayout;
private TextInputEditText newTextInputEditText; //Layout错误信息
newTextInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout_second);
newTextInputEditText = (TextInputEditText) findViewById(R.id.textInputEditText_second); //Layout错误信息
makerLayout();
private void makerLayout() {
newTextInputEditText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
if (newTextInputEditText.getText().length() > newTextInputLayout.getCounterMaxLength()) {
newTextInputLayout.setError("超过规定字数！请更改内容");
} else {
newTextInputLayout.setErrorEnabled(false);
}
}
});
}
这个错误信息是设置在TextInputLayout的，所以图中的第三个输入框错误信息在TextInputEditText上，第四个在TextInputLayout上
也是通过监听TextInputEditText，判断是否字数超过计数器最大值
错误信息样式关键点
ps：细心的会发现都是显示错误信息，而样式二的代码有else的情况，这是为什么？
原因是：因为错误信息设置在TextInputLayout上，如果不写else的内容，
当第一次的输入超过计数器最大值而显示错误信息后，此时退格删除输入的信息使输入的长度小于计数器最大值，但是却会发现错误信息不会消失
所以需要设置一个else，当退格删除后，小于计数器最大值，保证错误信息消失、不显示 newTextInputLayout.setErrorEnabled(false);
总结
这个就是自己经常使用的EditText的第二部分，
Material Design的内容还是比较好看的
自己也比较喜欢用这个，平时出现的问题也努力解决以达到想要的效果
以后还会继续发表一些自己比较喜欢使用的控件
学习Android的路还很长，大家共同努力❤
295
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
