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 Optional<Foo>转换成List<Bar>的实例方法
Jun 20 Java/Android
Java 中的 Unsafe 魔法类的作用大全
Jun 26 Java/Android
Maven学习----Maven安装与环境变量配置教程
Jun 29 Java/Android
SpringBoot工程下使用OpenFeign的坑及解决
Jul 02 Java/Android
idea 在springboot中使用lombok插件的方法
Aug 02 Java/Android
SSM项目使用拦截器实现登录验证功能
Jan 22 Java/Android
Java GUI编程菜单组件实例详解
Apr 07 Java/Android
JavaWeb Servlet开发注册页面实例
Apr 11 Java/Android
Java的Object类的九种方法
Apr 13 Java/Android
Java实现带图形界面的聊天程序
Jun 10 Java/Android
Android开发手册自定义Switch开关按钮控件
Jun 10 Java/Android
Java+swing实现抖音上的表白程序详解
Jun 25 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 前加at符合@的作用解析
2015/07/31 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
python如何为创建大量实例节省内存
2018/03/20 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
星空联盟C# .net笔试题
2014/12/05 面试题
国际商务专业学生个人的自我评价
2013/09/28 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
交通事故委托书范本
2014/09/28 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
2014年人事科工作总结
2014/11/19 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
python爬虫selenium模块详解
2021/03/30 Python
Nginx如何配置根据路径转发详解
2022/07/23 Servers