Android Material Design之TextInputLayout
2018-02-08 17:34
288 查看
1.TextInputLayout是什么?
首先看一下Google注释原文:
这是一个包装了当用户在输入文本时,将提示的信息显示为浮动标签的布局。
需要注意的是,类似于ScrollView,它只能有一个子控件。这里专门设计了一个TextInputEditText来配合它使用。
提供了TextInputEditText类,作为该布局的子元素。使用TextInputEditText允许TextInputLayout更好地
对输入的文本在视觉方面的控制。
其中,TextInputEditText继承自EditText
当时使用EditText也是可以的,因为关于TextInputLayout的解释中已经说了,它接收一个EditText作为子控件。
直白的讲,它的出现解决了原本的EditText存在的一些问题,例如当用户输入的时候,Hint信息就看不到了。如果用户忘了提示信息的内容,而不知道输入什么的时候,我们今天的主角就派上用场了。
下面来愉快地使用它吧。
2.TextInputLayout的使用:
想要使用它,直接在xml中写就好了,跟一般的控件没有什么区别。直接看一下下面的例子:
这里主要看一下几个属性:
是否可以显示错误信息
错误信息的显示外观
提示信息的显示外观
在style.xml中写上面两个style,比如:
之前提到了显示错误信息,那应该如何显示呢?
比如我们有一个登陆按钮,点击登录的时候(onClick),我们可以先验证用户名是否为空或者密码是否符合规范:
简单地验证一下密码:
接下来是我们的showError方法:
当两个验证方法都通过了,就可以发起登录的网络请求了
3.最后再加一点东西吧:
(一)关于密码框这里 密码与明文切换的开关使用:
密码可见性切换也支持通过在代码中 TextInputLayout.setPasswordVisibilityToggleEnabled(boolean)来设置
如果启用,当EditText的输入类型设置为显示密码时,则会显示一个按钮以在显示为明文的密码之间切换。
当然在xml中设置也可以:
首先EditText的inputType要设置为密码类型,例如:
或者:
或者:
接着在TextInputLayout中设置passwordToggleEnabled属性:
2(二)小提示:
原文:
在TextInputLayout下的实际视图层次结构不保证与用XML编写的视图层次结构相匹配。
因此,在TextInputLayout(比如TextInputEditText)的子节点上调用getParent()可能不会返回TextInputLayout本身,而是返回一个中间视图。
如果您需要直接访问TextInputLayout,请在xml中给它设置一个id并在代码中通过findviewbyid直接获得它
(三)使用感悟:
因为我们在xml中设置TextInputLayout中的高度是wrap_content的,如果需要显示错误信息的前提下,会导致它的布局高度发生改变,由此产生的问题需要注意一下,但不是特别严重,在实际使用中关注一下就好。
(需要显示错误信息的前提下,如果设置固定高度,如果高度不够,可能会使得下面的错误提示显示不出来)
首先看一下Google注释原文:
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.
这是一个包装了当用户在输入文本时,将提示的信息显示为浮动标签的布局。
需要注意的是,类似于ScrollView,它只能有一个子控件。这里专门设计了一个TextInputEditText来配合它使用。
The {@link TextInputEditText} class is provided to be used as a child of this layout. Using TextInputEditText allows TextInputLayout greater control over the visual aspects of any text input
提供了TextInputEditText类,作为该布局的子元素。使用TextInputEditText允许TextInputLayout更好地
对输入的文本在视觉方面的控制。
其中,TextInputEditText继承自EditText
public class TextInputEditText extends AppCompatEditText public class AppCompatEditText extends EditText
当时使用EditText也是可以的,因为关于TextInputLayout的解释中已经说了,它接收一个EditText作为子控件。
直白的讲,它的出现解决了原本的EditText存在的一些问题,例如当用户输入的时候,Hint信息就看不到了。如果用户忘了提示信息的内容,而不知道输入什么的时候,我们今天的主角就派上用场了。
下面来愉快地使用它吧。
2.TextInputLayout的使用:
想要使用它,直接在xml中写就好了,跟一般的控件没有什么区别。直接看一下下面的例子:
<android.support.design.widget.TextInputLayout android:id="@+id/til_user_pwd" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:errorEnabled="true" app:errorTextAppearance="@style/text_input_layout_error" app:hintTextAppearance="@style/text_input_layout_hint" app:layout_constraintTop_toBottomOf="@+id/til_user_name"> <android.support.design.widget.TextInputEditText android:id="@+id/et_user_pwd" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="密码" android:inputType="text" android:textCursorDrawable="@drawable/color_cursor" android:textSize="16sp" /> </android.support.design.widget.TextInputLayout>
这里主要看一下几个属性:
app:errorEnabled="true"
是否可以显示错误信息
app:errorTextAppearance="@style/text_input_layout_error"
错误信息的显示外观
app:hintTextAppearance="@style/text_input_layout_hint"
提示信息的显示外观
在style.xml中写上面两个style,比如:
<style name="text_input_layout_error"> <item name="android:textColor">#ed4e40</item> <item name="android:textSize">12sp</item> </style>
之前提到了显示错误信息,那应该如何显示呢?
比如我们有一个登陆按钮,点击登录的时候(onClick),我们可以先验证用户名是否为空或者密码是否符合规范:
/** * 验证用户名 * @param userName * @return */ private boolean nameValidation(String userName){ if(StringUtils.isEmpty(account)){ //mUserName 是你自己代码中代表用户名的TextInputLayout showError(mUserName,"用户名不能为空"); return false; } return true; }
简单地验证一下密码:
/** * 验证密码 * @param password * @return */ private boolean passwordValidation(String password) { if (StringUtils.isEmpty(password)) { showError(mUserPwd,"密码不能为空"); return false; } if (password.length() < 6 || password.length() > 16) { showError(mUserPwd,"密码长度为6-16位"); return false; } return true; }
接下来是我们的showError方法:
/** * 显示错误提示,并获取焦点 * @param textInputLayout * @param error */ private void showError(TextInputLayout textInputLayout, String error){ textInputLayout.setError(error); textInputLayout.getEditText().setFocusable(true); textInputLayout.getEditText().setFocusableInTouchMode(true); textInputLayout.getEditText().requestFocus(); }
当两个验证方法都通过了,就可以发起登录的网络请求了
3.最后再加一点东西吧:
(一)关于密码框这里 密码与明文切换的开关使用:
Password visibility toggling is also supported via the {@link #setPasswordVisibilityToggleEnabled(boolean)}. If enabled, a button is displayed to toggle between the password being displayed as plain-text or disguised, when your EditText is set to display a password.
密码可见性切换也支持通过在代码中 TextInputLayout.setPasswordVisibilityToggleEnabled(boolean)来设置
如果启用,当EditText的输入类型设置为显示密码时,则会显示一个按钮以在显示为明文的密码之间切换。
当然在xml中设置也可以:
首先EditText的inputType要设置为密码类型,例如:
android:inputType="textPassword"
或者:
android:inputType="numberPassword"
或者:
android:inputType="textWebPassword"
接着在TextInputLayout中设置passwordToggleEnabled属性:
app:passwordToggleEnabled="true"
2(二)小提示:
原文:
<strong>Note:</strong> The actual view hierarchy present under TextInputLayout is not guaranteed to match the view hierarchy as written in XML. As a result,calls to getParent() on children of the TextInputLayout -- such as an TextInputEditText --may not return the TextInputLayout itself, but rather an intermediate View. If you need to access a View directly, set an {@code android:id} and use {@link View#findViewById(int)}.
在TextInputLayout下的实际视图层次结构不保证与用XML编写的视图层次结构相匹配。
因此,在TextInputLayout(比如TextInputEditText)的子节点上调用getParent()可能不会返回TextInputLayout本身,而是返回一个中间视图。
如果您需要直接访问TextInputLayout,请在xml中给它设置一个id并在代码中通过findviewbyid直接获得它
(三)使用感悟:
因为我们在xml中设置TextInputLayout中的高度是wrap_content的,如果需要显示错误信息的前提下,会导致它的布局高度发生改变,由此产生的问题需要注意一下,但不是特别严重,在实际使用中关注一下就好。
(需要显示错误信息的前提下,如果设置固定高度,如果高度不够,可能会使得下面的错误提示显示不出来)
相关文章推荐
- Android Material Design系列之TextInputLayout
- Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果
- Android Material Design--TextInputLayout
- Android Material Design 之 TextInputLayout
- Android Material Design 之TextInputLayout TextInputEditText
- Android:Material Design之TextInputLayout使用
- Android TextInputLayout,打造 Material Design 风格的文本输入框
- Android Material Design系列之TextInputLayout
- Android Material Design之TextInputLayout
- Android Material Design之TextInputLayout
- Android开发——Material Design系列之TextInputLayout
- Android TextInputLayout,打造 Material Design 风格的文本输入框
- 浅析Android Material Design之TextInputLayout
- Material Design -- TextInputLayout
- Android Study Material Design 六 之:TextInputLayout学习及分析部分源码
- Android TextInputLayout更好看的输入框加EvenBus传值
- Android Design Support Library - TextInputLayout使用
- 【Android - 控件】之MD - TextInputLayout的使用
- Material Design-UI之TextInputLayout
- Android Design Support Library使用详解——TextInputLayout与TextInputEditText