TextInputLayout只看这一篇就够了

最新推荐文章于 2023-12-01 07:30:00 发布
最新推荐文章于 2023-12-01 07:30:00 发布
阅读量5.3k 收藏 32
点赞数 4
分类专栏： android materialdesign 文章标签： android materialdesign
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32368129/article/details/119996224
版权

目录

前言

 TextInputLayout布局属性

android:hint

app:counterEnabled

app:counterMaxLength

app:counterTextColor

app:counterOverflowTextColor

app:counterTextAppearance 

app:boxBackgroundColor

app:boxStrokeColor

app:boxStrokeErrorColor

app:boxStrokeWidth|app:boxStrokeWidthFocused

app:boxCornerRadius

app:startIconTint

app:endIconMode

app:helperText|prefixText|suffixText

前言

Google为了整体风格的Material化，对输入框进行了优化处理，视觉效果非常棒，并且整体非常丝滑。

先展示几个google为我们设计的风格。

  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
 
    </com.google.android.material.textfield.TextInputLayout>


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
 
    </com.google.android.material.textfield.TextInputLayout>

 注：后缀加.Dense的为紧密版，高度变小，整体更紧凑。

 TextInputLayout布局属性

属性TextInputLayout备注
android:hint浮动提示TextInputLayout与TextInputEditText中设置均有效，也可同时设置
app:counterMaxLength设置可输入字符的最大长度

app:counterEnabled="true"

必须设置此属性才可展示

app:counterTextColor设置可输入字符数量显示的颜色
app:counterOverflowTextColor设置可输入字符数量显示溢出（超过限制最大长度）的颜色
app:counterTextAppearance可输入字符数量Text外观
app:counterOverflowTextAppearance可输入字符数量Text溢出外观
app:barrierAllowsGoneWidgets引用形成Barrier的视图的大小或位置发生变化，该边距会发生变化，像屏障一样会形成拉扯

app:constraint_referenced_ids="tv1,tv2"

与其他两个布局形成barrierd屏障，

app:barrierDirection 屏障拉扯方向

app:boxBackgroundMode填充框模式

outline去掉线，背景都在。none 是都去掉。filled是默认的，有线。优先级比直接设置style高

app:boxBackgroundColor填充框背景颜色
app:boxStrokeColor填充框底部下滑线颜色
app:boxStrokeErrorColor填充框底部下划线溢出（超过限制最大长度）颜色
app:boxStrokeWidth填充框底部下划线未选中时宽度
app:boxStrokeWidthFocused填充框底部下划线选中时宽度

app:boxCornerRadiusTopStart

app:boxCornerRadiusTopEnd

app:boxCornerRadiusBottomStart
app:boxCornerRadiusBottomEnd

左上圆角，

右上圆角，

左下圆角，

右下圆角

app:boxCollapsedPaddingTop填充框距离边界不建议调整，默认的很好

app:startIconMode

app:endIconMode

none：空

custom：自定义

password_toggle:可使密码切换

clear_text:清空

dropdown_menu:下拉菜单

custom：配合app:endIconDrawable一起放自定义图片

app:startIconContentDescription

app:endIconContentDescription

内容说明

app:startIconDrawable

app:endIconDrawable

前后图标设置

app:startIconTint

app:endIconTint

前后图标矢量图着色

app:helperText

app:prefixText

app:suffixText

辅助文本

前缀文本

后缀文本

app:helperTextTextAppearance

app:prefixTextAppearance

app:suffixTextAppearance

辅助文本外观

前缀文本外观

后缀文本外观

可改文字大小 颜色等

app:helperTextTextColor

app:prefixTextColor

app:suffixTextColor

辅助文本颜色

前缀文本颜色

后缀文本颜色

app:errorTextColor      app:errorIconDrawable

app:errorIconTint

溢出文本颜色

溢出图标

溢出图标矢量图着色

app:hintAnimationEnabled 浮动提示动画效果
app:hintTextColor浮动提示颜色（溢出前）
app:passwordToggleDrawable app:passwordToggleTint        app:passwordToggleEnabled

密码模式后缀图标

密码模式后缀图标着色

密码模式是否开启

app:passwordToggleDrawable不建议设置，用默认效果最好
app:passwordToggleContentDescription密码内容说明

 android:hint


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:hint="android:hint">
 
    </com.google.android.material.textfield.TextInputLayout>

 app:counterEnabled


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:counterEnabled="true">
 
    </com.google.android.material.textfield.TextInputLayout>

app:counterMaxLength

注：app:counterEnabled="true"。


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:counterMaxLength="3"
        app:counterEnabled="true">
 
    </com.google.android.material.textfield.TextInputLayout>

app:counterTextColor


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:counterMaxLength="3"
        app:counterEnabled="true"
        app:counterTextColor="@color/orange">
 
    </com.google.android.material.textfield.TextInputLayout>

 app:counterOverflowTextColor


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:counterMaxLength="3"
        app:counterEnabled="true"
        app:counterOverflowTextColor="@color/orange">
 
    </com.google.android.material.textfield.TextInputLayout>

app:counterTextAppearance 


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:counterEnabled="true"
        app:counterTextAppearance="@style/counterTextAppearance">
 
    </com.google.android.material.textfield.TextInputLayout>
  <style name="counterTextAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">@color/colorPrimaryDark</item>
    </style>

 app:boxBackgroundColor


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:boxBackgroundColor="@color/orange">
 
    </com.google.android.material.textfield.TextInputLayout>

app:boxStrokeColor


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        app:boxStrokeColor="@color/orange">
 
    </com.google.android.material.textfield.TextInputLayout>

 app:boxStrokeErrorColor

 


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        app:counterMaxLength="3"
        app:counterEnabled="true"
        app:boxStrokeErrorColor="@color/red">
 
    </com.google.android.material.textfield.TextInputLayout>

 app:boxStrokeWidth|app:boxStrokeWidthFocused

 


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        app:counterMaxLength="3"
        app:counterEnabled="true"
        app:boxStrokeWidth="10dp"
        app:boxStrokeWidthFocused="10dp">
 
    </com.google.android.material.textfield.TextInputLayout>

 app:boxCornerRadius

如果把4个角全设置圆角的话就会出现这种情况，下划线会很突兀。


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        app:boxBackgroundColor="@color/orange"
        app:boxCornerRadiusBottomEnd="10dp"
        app:boxCornerRadiusBottomStart="10dp"
        app:boxCornerRadiusTopEnd="10dp"
        app:boxCornerRadiusTopStart="10dp">
 
    </com.google.android.material.textfield.TextInputLayout>

那么我们可以尝试 设置app:boxBackgroundMode="outline"。


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        app:boxBackgroundColor="@color/orange"
        app:boxCornerRadiusBottomEnd="10dp"
        app:boxCornerRadiusBottomStart="10dp"
        app:boxCornerRadiusTopEnd="10dp"
        app:boxCornerRadiusTopStart="10dp"
        app:boxBackgroundMode="outline">
 
    </com.google.android.material.textfield.TextInputLayout>

或者只设置左上跟右上 。


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        app:boxBackgroundColor="@color/orange"
        app:boxCornerRadiusTopEnd="10dp"
        app:boxCornerRadiusTopStart="10dp"
        app:boxBackgroundMode="outline">
 
    </com.google.android.material.textfield.TextInputLayout>

 app:startIconTint

 


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        app:startIconDrawable="@drawable/ic_menu_manage"
        app:startIconTint="@color/orange">
 
    </com.google.android.material.textfield.TextInputLayout>

app:endIconMode

endIconMode 上面说了，里面有五条属性，分别是

  • none：空
  • custom：自定义
  • password_toggle:可使密码切换
  • clear_text:清空
  • dropdown_menu:下拉菜单

none不用过多说，就是空白，也是默认值，dropdown_menu是下拉菜单从，后面出文章会说

剩下三个的效果我会在下面展示。


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        app:endIconMode="clear_text">
 
    </com.google.android.material.textfield.TextInputLayout>


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        app:endIconMode="password_toggle">
 
    </com.google.android.material.textfield.TextInputLayout>


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        app:endIconDrawable="@drawable/ic_menu_manage"
        app:endIconMode="custom"
        app:endIconTint="@color/orange">
 
    </com.google.android.material.textfield.TextInputLayout>

app:helperText|prefixText|suffixText

辅助文本|前缀文本|后缀文本


  <com.google.android.material.textfield.TextInputLayout
        ...
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        app:helperText="helperText"
        app:prefixText="prefixText"
        app:suffixText="suffixText">
 
    </com.google.android.material.textfield.TextInputLayout>

 剩下的属性大体含义都差不多，相信大家也可以理解了。

收工。

柳柳柳柳柳柳
关注
  • 4
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Android Design新控件之TextInputLayout（文本输入布局）
Angelica
08-22 7661
谷歌在推出Android5.0的同时推出了全新的设计Material Design，谷歌为了给我们提供更加规范的MD设计风格的控件，在2015年IO大会上推出了Design支持包，Design常用的新控件包括： TextInputLayout（文本输入布局） TabLaout（选项卡布局） Snackbar FloatingActionButton（浮动按钮） NavigationView（导航视图
Android使用TextInputLayout创建登陆页面
08-28
主要为大家详细介绍了Android使用TextInputLayout创建登陆页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android进阶——Material Design新控件之TextInputLayout（四）
最美不过，心中有梦，身旁有你！
09-04 1800
TextInputLayout是一个继承自LinearLayout的二级布局容器。主要用于把EditText封装起来，跟ScrollView一样，TextInputLayout只接受一个EditText元素（但是把其他控件布置进去也是可以正常显示的,因为在他的setEditText方法里会检查超过一个EditText就会抛出异常），提示信息会变成一个显示在EditText之上的floating label
TextInputLayout:第一次提交
04-27
TextInputLayout TextInputLayout是Android在版本23中提供的DesignSupportLibrary的一部分。 TextInputLayout是一个很好的小部件，可以代替EditText。 在此示例应用程序中，您将找到如何使用TextInputLayut。 您还可以找到如何更改其提示颜色以及如何应用字体。 如何申请字样 private void setTypefaceToInputLayout(TextInputLayout inputLayout, String typeFace){ final Typeface tf = Typeface.createFromAsset(getAssets(), typeFace); inputLayout.getEditText().setTypeface(tf); try {
TextInputLayout实现网易邮箱登录界面
01-03
TextInputLayout实现网易邮箱登录界面,中间还简单介绍怎么使用Snackbar.zip
Android Material Design 系列之 TextInputLayout 使用详解
一名互联网时代苟且偷生的 Android码农
06-23 1万+
前言 本文是 Material Design 系列第四篇：TextInputLayout 主要是作为 EditText 的容器，从而为 EditText 生成一个浮动的 Label，当用户点击 EditText 的时候，EditText 中的 hint 字符串会自动移到 EditText 的左上角。 TextInputLayout 的简单使用，是 Google 推出的整个 Material Design 库的一个缩影：Google 将 UI 视觉效果设计得华丽且流畅，同时代码封装更为优雅，开发者只需要在 l
TextInputLayout的基本使用
qq_35698774的博客
12-03 3261
TextInputLayout属于EditText的一个浮动标签，属于Material Design 设计规范中的，效果可以看下面的动图 账号：只是普通EditText 密码：用TextInputLayout包裹的EditText 使用的话TextInputLayout包裹一个EditText就可以。当然TextInputLayout也只能包裹EditText： <android.support.design.widget.TextInputLayout android:id=.
强大的提示控件TextInputLayout使用以及源码分析
最新发布
m0_56146626的博客
12-01 823
这里出现了一个mCollapsingTextHelper，通过它可以设置文字大小的加速动画，FAST_OUT_SLOW_IN_INTERPOLATOR，快出慢进的效果，还有设置位置的加速器setPositionInterpolator，setCollapsedTextGravity设置折叠文字的Gravity，看来这个mCollapsingTextHelper的作用还是很强大的，我们后面再看它的源码，先继续往下看。说明在源码中必定有添加这个提示的逻辑，这里我们后面在讨论，先继续往下看。
Android开发——Material Design系列之TextInputLayout
关于Android开发的一些技术点总结 ╮(￣▽￣”)╭
05-07 1901
0. 前言 TextInputLayout 继承于 LinearLayout，专门用来包裹 EditText或EditText的子类，当用户进行输入动作的时候我们设置的android:hint 属性值会作为提示以动画的形式运动到输入框左上角，错误信息也显示在输入框的下方。有些输入验证是在后台做得，产生错误后再反馈给前台，这样非常耗时而且用户体验差。TextInputLayout则完美的解决了这个...
TextInputLayout使用详解
yechaoa
12-02 3164
TextInputLayout 基础样式、错误提示、字数限制等等效果图： 布局文件 <android.support.design.widget.TextInputLayout android:id="@+id/til_name" android:layout_width="0dp" android:layout_height="wrap_c
Android-来自AndroidDesignSupport库的TextInputLayout的一个简单的自定义版本
08-12
来自Android Design Support库的TextInputLayout的一个简单的自定义版本
TextInputLayout实现登录界面和LitePal初始化本地数据库
07-09
包含项目的登陆界面，数据库初始化代码，LitePal jar包，相关Ui素材
TextInputLayout
09-22
TextInputLayout实现输入框悬浮标签，错误信息提示；
TextInputLayout的使用
04-30
TextInputLayout的使用
TextInputLayout输入框控件的悬浮标签
08-28
主要为大家详细介绍了TextInputLayout输入框控件的悬浮标签，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（Error）Error:(28, 0) Could not find method implementation() for arguments [com.android.support:appco
热门推荐
柳的博客
03-08 3万+
Error:(28, 0) Could not find method implementation() for arguments [com.android.support:appcompat-v7:25.3.1] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandl
Android GPS定位详解
柳的博客
02-06 1万+
自己项目用到了 ，懒得写，偶尔发现这个写的不错，就存下来了 一、LocationManager LocationMangager，位置管理器。要想操作定位相关设备，必须先定义个LocationManager。我们可以通过如下代码创建LocationManger对象。 [java] view plain copy  print? Loca
Android 解决GPS室内定位问题（location为null）
柳的博客
02-20 1万+
为什么室内没有location呢？ 因为我们开发的时候几乎肯定都是在室内的，这个时候卫星你是搜索不到的，所以必然是定位不了的，所以系统如何将位置信息通知给你的程序。所以要从根本上解决这个问题，就要解决位置信息获取问题。 那么我来告诉大家，只有NETWORK_PROVIDER这种模式才是室内定位可靠的方式，就是当location为null的时候只要用这
android TextInputlayout
05-26
Android TextInputLayout是一个支持Material Design风格的输入框容器，它可以用来包装任何EditText或EditText的子类，提供了一些功能，如错误提示、计数器、密码可见性切换等。 TextInputLayout的主要功能有： 1.错误提示：当用户输入无效数据时，可以显示错误消息。 2.计数器：可以显示已输入字符的数量和最大字符数量。 3.密码可见性切换：可以在明文和密码模式之间切换。 4.动画效果：包含了一些动画效果，如标签浮动和错误消息上移等。 使用TextInputLayout，需要在XML中将EditText包装在TextInputLayout中，并在TextInputLayout中设置相关属性。例如： ``` <com.google.android.material.textfield.TextInputLayout android:id="@+id/textInputLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Enter your name"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/editText" android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.textfield.TextInputLayout> ``` 在代码中，可以使用以下方法来设置错误消息、计数器等： ``` // 设置错误消息 textInputLayout.setError("Invalid input"); // 显示计数器 textInputLayout.setCounterEnabled(true); textInputLayout.setCounterMaxLength(50); // 密码可见性切换 textInputLayout.setEndIconMode(TextInputLayout.END_ICON_PASSWORD_TOGGLE); ``` 总之，TextInputLayout是一个非常有用的控件，可以提高Android应用程序的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值