Android Material 常用组件详解(二)—— TextInputLayout 使用详解
介绍
TextInputLayout 主要是作为 EditText 的容器,从而为 EditText 生成一个浮动的 Label,当用户点击 EditText 的时候,EditText 中的 hint 字符串会自动移到 EditText 的左上角。
TextInputLayout 使用详解
1、基本使用
布局文件中只需要在 EditText 外层包裹一层 TextInputLayout 布局即可
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/userInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14dp" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:textSize="14dp" />
</com.google.android.material.textfield.TextInputLayout>
2、开启错误提示
设置文本框输入最大长度,并且开启错误提示,当文本框输入文本长度超出时,报错显示。
// 开启错误提示
userInputLayout.setErrorEnabled(true);
// 开启计数
userInputLayout.setCounterEnabled(true);
// 设置输入最大长度
userInputLayout.setCounterMaxLength(10);
3、自定义浮动标签字体样式
默认浮动标签样式跟 APP 主题色 colorAccent 色值一致,所以需要自定义样式,修改标签字体大小和颜色
自定义 style
<style name="hintAppearence" parent="TextAppearance.AppCompat">
<item name="android:textSize">14dp</item>
<item name="android:textColor">@color/colorPrimary</item>
</style>
这里使用 XML 属性app:hintTextAppearance
实现,对应的 setHintTextAppearance()
方法加载自定义样式
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
app:hintTextAppearance="@style/hintAppearence">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:textSize="14dp" />
</com.google.android.material.textfield.TextInputLayout>
如图所示,Username 文本框是自定义样式效果,Password 文本框是系统默认效果
TextInputLayout 中所有关于样式的设置方式都采用这种方式,所以这里只举例一种,其他属性直接照搬即可使用 。
4、密码可见性切换
APP 登录界面密码框经常会遇到最右边有一个“小眼睛”图标,点击可以切换密码是否可见,以前我们实现时,使用一个 ImageView,然后根据点击事件判断标记位更新文本框的内容。现在使用 TextInputLayout 只需要一行代码即可轻松实现。
这里使用 XML 属性app:passwordToggleEnabled="true"
实现,对应的 setPasswordVisibilityToggleEnabled(boolean enabled)
方法
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:hint="Password"
app:counterOverflowTextAppearance="@style/hintAppearence"
app:hintTextAppearance="@style/hintAppearence"
app:passwordToggleEnabled="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="@drawable/ic_baseline_lock_24"
android:drawablePadding="8dp"
android:inputType="textPassword"
android:textSize="14dp" />
</com.google.android.material.textfield.TextInputLayout>
5、文本框输入校验
一般情况下,APP 用户名称输入都会有校验功能,本文以用户名长度不大于 10 为例,如果超出时,输入框底部报错提示。
userInputLayout.getEditText().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(userInputLayout.getEditText().getText().toString().trim().length()>10){
userInputLayout.setError("用户名长度超出限制");
}else{
userInputLayout.setError(null);
}
}
});
TextInputLayout 相关 API
TextInputLayout 控件 API 官网列举了很多,这里只是整理出开发中常用属性,每个方法对应相关 XML 属性感兴趣的可以查查官网文档。
方法 | 介绍 |
---|---|
setCounterEnabled(boolean enabled) | 在此布局中是否启用了字符计数器功能。 |
setCounterMaxLength(int maxLength) | 设置要在字符计数器上显示的最大长度。 |
setBoxBackgroundColorResource(int boxBackgroundColorId) | 设置用于填充框的背景色的资源。 |
setBoxStrokeColor(int boxStrokeColor) | 设置轮廓框的笔触颜色。 |
setCounterOverflowTextAppearance(int counterOverflowTextAppearance) | 使用指定的 TextAppearance 资源设置溢出字符计数器的文本颜色和大小。 |
setCounterOverflowTextColor(ColorStateList counterOverflowTextColor) | 使用 ColorStateList 设置溢出字符计数器的文本颜色。(此文本颜色优先于 counterOverflowTextAppearance 中设置的文本颜色) |
setCounterTextAppearance(int counterTextAppearance) | 使用指定的 TextAppearance 资源设置字符计数器的文本颜色和大小。 |
setCounterTextColor(ColorStateList counterTextColor) | 使用 ColorStateList 设置字符计数器的文本颜色。(此文本颜色优先于 counterTextAppearance 中设置的文本颜色) |
setErrorEnabled(boolean enabled) | 在此布局中是否启用了错误功能。 |
setErrorTextAppearance(int errorTextAppearance) | 设置来自指定 TextAppearance 资源的错误消息的文本颜色和大小。 |
setErrorTextColor(ColorStateList errorTextColor) | 设置错误消息在所有状态下使用的文本颜色。 |
setHelperText(CharSequence helperText) | 设置将在下方显示的帮助消息 EditText。 |
setHelperTextColor(ColorStateList helperTextColor) | 设置辅助状态在所有状态下使用的文本颜色。 |
setHelperTextEnabled(boolean enabled) | 在此布局中是否启用了辅助文本功能。 |
setHelperTextTextAppearance(int helperTextTextAppearance) | 设置指定 TextAppearance 资源中的辅助文本的文本颜色和大小。 |
setHint(CharSequence hint) | 设置要在浮动标签中显示的提示(如果启用)。 |
setHintAnimationEnabled(boolean enabled) | 是否获取焦点的时候,hint 文本上移到左上角开启动画。 |
setHintEnabled(boolean enabled) | 设置是否在此布局中启用浮动标签功能。 |
setHintTextAppearance(int resId) | 从指定的 TextAppearance 资源设置折叠的提示文本的颜色,大小,样式。 |
setHintTextColor(ColorStateList hintTextColor) | 从指定的 ColorStateList 资源设置折叠的提示文本颜色。 |
setPasswordVisibilityToggleEnabled(boolean enabled) | 启用或禁用密码可见性切换功能。 |
XML属性
属性 | 介绍 |
---|---|
app:hintTextAppearance="@style/HintAppearance" | 浮动标签字体样式 |
app:errorTextAppearance="@style/ErrorAppearance" | 错误提示字体样式 |
app:counterTextAppearance="@style/CounterAppearance" | 没有超过最大字数时统计字体样式 |
app:counterOverflowTextAppearance="@style/CounterOverflowAppearance" | 超过最大字数时统计字体样式 |
上一篇: 工程师的价值观和学习方式
下一篇: 伪静态做成目录结构
推荐阅读
-
Android列表组件ListView使用详解之隐藏滚动条
-
React-Native中一些常用组件的用法详解(二)
-
Android列表组件ListView使用详解之隐藏滚动条
-
vue组件详解(二)——使用props传递数据
-
Android列表组件ListView使用详解之动态加载或修改列表数据
-
React-Native中一些常用组件的用法详解(二)
-
Android Material 常用组件详解— MaterialButton、MaterialButtonToggleGroup、ShapeableImageView 使用详解
-
Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解
-
Android 五大数据存储 (最实用的开发详解) 二 SharedPreferences存储的使用
-
Android Gradle使用详解(二)--添加依赖