Android开发手册TextInputLayout样式使用示例


Posted in Java/Android onJune 10, 2022

前言

前面小空带同学们学了EditText控件,又用其实践做了个验证码功能,以为这就完了吗?

然而并没有。

Android在5.0以后引入了Materia Design库的设计,现在又有了Jetpack UI库的设计。帮助开发者更高效的实现炫酷的UI界面,降低开发门槛。

Jetpack我们后面再说,承接之前的EditText,先说说Materia Design里的TextInputLayout。

使用方式是将TextInputEditText或EditText套到TextInputLayout内,这样友情提示信息hit就可以带有动画(上浮为标题),计数/密码可见等属性设置。  

布局代码

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="请输入用户名">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="60dp"
    android:hint="请输入密码">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

Android开发手册TextInputLayout样式使用示例

这样就简单的实现了一个效果。我们在继续深入添加些属性:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="请输入用户名"
    app:hintAnimationEnabled="false">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="60dp"
    android:hint="请输入密码"
    app:counterEnabled="true"
    app:counterMaxLength="10"
    app:passwordToggleEnabled="true">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

从运行结果可以看出,设置了字数限制后,自动在编辑框右下角显示最大字数和当前输入字数(随着输入情况实时变化),并且更改了颜色样式

?属性介绍

  • app:boxCollapsedPaddingTop 设置用于编辑文本在框模式下折叠的顶部填充的值 
  • app:boxStrokeErrorColor 在显示错误时设置轮廓框的描边颜色。 
  • app:boxStrokeWidth 设置描边的宽度 
  • app:boxStrokeWidthFocused 设置获取焦点框的描边宽度 
  • app:counterEnabled     是否显示计数器 
  • app:counterMaxLength 设置计数器的最大值,与counterEnabled同时使用 
  • app:counterTextAppearance       计数器的字体样式 
  • app:counterOverflowTextAppearance 输入字符大于我们限定个数字符时的字体样式 
  • app:errorEnabled  是否显示错误信息 
  • app:errorTextAppearance&nbsp;   错误信息的字体样式 
  • app:endIconCheckable 设置是否显示结束图标 
  • app:endIconContentDescription 为结束图标设置内容说明 
  • app:endIconDrawable 设置结束图标图像 
  • app:endIconMode 设置模式 
  • app:endIconTintMode 指定混合模式,用于将 指定的色调应用于可绘制的结束图标。 
  • app:helperText 设置帮助文本 
  • app:helperTextEnabled 设置是否激活帮助文本 
  • app:helperTextTextColor 设置帮助文本颜色 
  • app:hintAnimationEnabled  是否显示hint的动画,默认true 
  • app:hintEnabled    是否使用hint属性,默认true 
  • app:hintTextAppearance      设置hint的文字样式(指运行动画效果之后的样式) 
  • app:passwordToggleDrawable    设置密码开关Drawable图片,于passwordToggleEnabled同时使用 
  • app:passwordToggleEnabled      是否显示密码开关图片,需要EditText设置inputType 
  • app:passwordToggleTint     设置密码开关图片颜色 
  • app:passwordToggleTintMode    设置密码开关图片(混合颜色模式),与passwordToggleTint同时使用

以上就是Android开发手册TextInputLayout样式使用示例的详细内容,更多关于Android开发TextInputLayout样式的资料请关注三水点靠木其它相关文章!


Tags in this post...

Java/Android 相关文章推荐
Java Shutdown Hook场景使用及源码分析
Jun 15 Java/Android
深入理解以DEBUG方式线程的底层运行原理
Jun 21 Java/Android
使用feign服务调用添加Header参数
Jun 23 Java/Android
dubbo集成zipkin获取Traceid的实现
Jul 26 Java/Android
JVM钩子函数的使用场景详解
Aug 23 Java/Android
springboot应用服务启动事件的监听实现
Apr 06 Java/Android
Java字符缓冲流BufferedWriter
Apr 09 Java/Android
Java8利用Stream对列表进行去除重复的方法详解
Apr 14 Java/Android
Java版 单机五子棋
May 04 Java/Android
Android Studio实现带三角函数对数运算功能的高级计算器
May 20 Java/Android
SpringBoot详解执行过程
Jul 15 Java/Android
Java实现简单小画板
Android开发EditText禁止输入监听及InputFilter字符过滤
Jun 10 #Java/Android
详解Spring Bean的配置方式与实例化
Jun 10 #Java/Android
Spring JPA 增加字段执行异常问题及解决
Jun 10 #Java/Android
Android开发手册自定义Switch开关按钮控件
Jun 10 #Java/Android
java实现面板之间切换功能
Jun 10 #Java/Android
Spring Boot项目如何优雅实现Excel导入与导出功能
Jun 10 #Java/Android
You might like
由php的call_user_func传reference引发的思考
2010/07/23 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
python爬虫常用的模块分析
2014/08/29 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
python把转列表为集合的方法
2019/06/28 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
python自动化办公操作PPT的实现
2021/02/05 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
中医药大学毕业生自荐信
2013/11/08 职场文书
人力资源经理自我评价
2014/01/04 职场文书
新员工入职感言
2014/02/01 职场文书
旷课检讨书3000字
2014/02/04 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
葬礼主持词
2015/07/02 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
Redis实现分布式锁的五种方法详解
2022/06/14 Redis