TextInputLayout 基础样式、错误提示、字数限制等等 效果图: 【2020-12-13】Theme切换到MaterialComponents之后,是有一些变化的,比如默认背景、默认padding...布局文件 TextInputLayout android:id="@+id/til_name" android...: app:hintTextAppearance="@style/MyHintText" TextInputEditText: android:theme="@style/MyEditText" 2、错误提示样式及代码设置...在上面的“错误提示”中,有一段判断是这样的 if (mTilName.getEditText().getText().length() > mTilName.getCounterMaxLength())...mTilName是TextInputLayout,getEditText()方法可以获取子控件TextInputEditText。
github地址:https://github.com/shuaijia/MaterialDesignProject 添加依赖 TextInputLayout是在Material Design中的,如果我们要使用的话...,必须在gradle文件中配置 开始使用 TextInputLayout是一种新的继承自LinearLayout的布局,使用时其只能包含一个EditText或其子类控件(如AutoCompleteTextView...) 还可通过设置hint和error来显示浮动标签 注意:一个TextInputLayout中 有且只有 一个EditText!...举例 浮动标签 字数统计 错误提示 密码框右侧图标 虚拟键盘监听 有时候我们在用虚拟键盘的时候,在输入账号之后,我们点击下一项,焦点会跑到输入密码这一栏,当我们密码输入完成之后,点击确定按钮就能登录了
TextInputLayout的使用 在Gradle的依赖中添加上com.android.support:design:23.0.0,其中23版本根据编译的android版本来调整对应版本即可 ?...gradle配置文件 在对应的Layout文件中使用TextInputLayout将EditText控件包裹,并且在EditText中设置hint属性即可,在这个父ViewGroup中,只能有一个EditText...Layout配置文件 TextInputLayout效果 在两个输入框切换点击切换的时候,EditText中的文本会有动画的方式飞向左上角。 ?...TextInputLayout效果 TextInputLayout动画实现原理 原本以为在点击输入框的时候,会是在EditText的Focus改变的时候,开始执行动画,结果发现是在整个TextInputLayout...TextInputLayout.onLayout 在TextInputLayout中的draw中,会根据onLayout中计算出的CollapsingTextHelper矩形位置以及缩放大小开始绘制文字
---- Handling Errors TextInputLayout的另一个特色是它可以处理错误。通过验证输入,你可以防止用户输入无效的邮箱地址或者是太短的密码。...,我们需要定义什么是错误,什么不是。...的错误处理简单快速。...setErrorEnabled开启错误提醒功能。这直接影响到布局的大小,增加底部padding为错误标签让出空间。在setError设置错误消息之前开启这个功能意味着在显示错误的时候布局不会变化。...现在我们定义了什么是错误的什么是正确的,也知道了如何获取EditText中的数据以及显示可能的错误,onClick方法的实现就很简单了。
app:errorEnabled="true"时,开启错误提示 textInputLayout.setCounterEnabled(true);用于 开启计数 textInputLayout.setCounterMaxLength...(10);设置最大输入限制数 textInputLayout.setError(errorStr);设置错误提示的信息 textInputLayout.getEditText().addTextChangedListener...,还有hintAppearance的值,mErrorTextAppearance是错误提示文字的样式,errorEnabled是否开启错误提示 setErrorEnabled(errorEnabled)...之中,还记得前面我们提过TextInputLayout之中肯定应该会有一个添加错误提示信息的方法,在这里我们找到了,同时这里的代码也是值得我们进行学习的,只有当用户设置错误提示为真的时候,才会new一个...TextView,这样是比较省性能的,接下来是setError方法,设置错误提示的文本信息,里面是一些判断和动画的设置 public void setError(@Nullable CharSequence
TextInputLayout TextInputLayout继承LinearLayout,因此我们需要将EditView包含在TextInputLayout之内才可以使用,言外之意:TextInputLayout...TextInputLayout常用的方法有如下: setHint():设置提示语。 getEditText():得到TextInputLayout中的EditView控件。...setErrorEnabled():设置是否可以显示错误信息。 setError():设置当用户输入错误时弹出的错误信息。...特别注意:TextInputLayout不能单独使用,必须包裹EditView组件,且只能一个,设置错误提示信息时一定要先setErrorEnabled(true);再设置setError()。...,可以在右侧显示出错误信息的小弹窗提示。
可以看到并不是非常美观,下载我们引入 TextInputLayout 稍作改动 ---- 使用 TextInputLayout 我们终于到达了本教程中最有趣的部分。...一个 TextInputLayout 小部件的行为与LinearLayout它完全一样,它只是一个包装器。TextInputLayout只接受一个子元素,类似于a ScrollView。...---- 显示错误 TextInputLayout 错误处理简单快捷。所需的方法是 setErrorEnabled和setError。...setError 设置将显示在下方的红色错误消息EditText。如果传递的参数是null,则清除错误消息。它还将整个EditText小部件的颜色更改为红色。...setErrorEnabled 启用错误功能。这直接影响布局的大小,增加较低的填充以为错误标签腾出空间。在设置错误消息之前启用此功能setError 意味着在显示错误时此布局不会更改大小。
主要功能是错误反馈,代码业务逻辑实现错误提示,设置密码字段类型为“textPassword”: TextInputLayout...当验证通过时,清除错误信息和导航到下一个Fragment。 为密码输入框添加键盘事件监听器,实时清除错误状态。...错误的导航实现导致应用崩溃或导航异常。 解决方法:通过 NavigationHost 或 NavController 等方式实现 Fragment 的导航管理,保证界面跳转的流畅性。...3.3 输入验证与用户体验 难点:实现用户输入验证时,需要保证错误提示的实时性和准确性。需要多考虑边缘情况,比如密码为空、快速输入时的延迟反应。...解决方法:通过 setOnKeyListener 实时监听用户输入,结合 MDC 的错误提示功能 (errorEnabled) 动态更新错误状态。
文本输入布局TextInputLayout TextInputLayout是MaterialDesign库中对编辑框EditText进行增强的一个控件。...代码中使用TextInputLayout要进行以下改造: 1、添加几个库的支持,包括design库(TextInputLayout需要)、appcompat-v7库(AppCompatActivity)...setError : 设置错误文字的内容。 setErrorEnabled : 设置错误文字是否可用。 setCounterEnabled : 设置文字计数器是否可用。...从以上方法可以看到,TextInputLayout增加的界面元素主要是三个,分别是位于编辑框左上角的提示文字、位于编辑框左下角的错误文字、位于编辑框右下角的文字计数器。...如果不用TextInputLayout,只使用EditText的话,横屏时的编辑框也会显示提示文字;可是一旦加了TextInputLayout,再看横屏的编辑框,发现编辑框内的提示文字不见了,这是因为TextInputLayout
这里可以看出我在ImageView中加入了高度180dp,这里是一定要加上的,否侧toolbar的会出现以下几种错误,1:文字不显示。2:只显示标题栏。3:图片过大充满整个屏幕。...TextInputEditText的使用 在最平常的时候,我们写输入框,要加正则表达式来判断是哪一行出现不符合要求的数据,然后用一个toast来提示用户,这就显得用户体验极差,有的用户还没看完toast就关掉了,而且具体哪一行错误也没有标红...,这就很尴尬了,那么今天这个控件也是一个输入框,但是外层加一个布局(TextInputLayout),就可以达到精确到一行提示具体错误。...这时候TextInputLayout则是显示错误,TextInputLayout是LinearLayout的子类,用于辅助显示提示信息。...现在仅仅是过度效果,还没有加提示信息,用法很简单,但注意一点TextInputLayout只能包含一个TextInputEditText,如果写用户名和密码那就写两个TextInputLayout,哦,
零、前言 这是两个比较小的点,放在一起说一下: 沉浸标题栏:现在基本上都用沉浸标题栏了,不然最顶的一小块跟app风格不搭 TextInputLayout:包裹一个EditeText,多用于登陆验证的输入框... 使用:给Activity设置主题即可 android:theme="@style/TranslucentTheme" ---- 二、TextInputLayout...TextInputLayout.png TextInputLayout android:id="@+id/til2"...android:textColorHint="@color/white" /> TextInputLayout
这样就可以发布新功能和错误修正了,而不必将所有声明都换成新的类型。...要恢复为旧的文本字段可以在布局中添加样式 TextInputLayout ... + style="@style.../Widget.Design.TextInputLayout"> ...... +TextInputLayout” parent=”Widget.Design.TextInputLayout”> +...TextInputEditText Widget.Design.TextInputLayout Widget.MaterialComponents.TextInputLayout.* textInputStyle
layout_marginStart="34dp" android:background="@color/divider"/> TextInputLayout...font_title" android:textSize="@dimen/font_normal"/> TextInputLayout...layout_marginStart="34dp" android:background="@color/divider"/> TextInputLayout...20" android:textSize="@dimen/font_normal"/> TextInputLayout...font_title" android:textSize="@dimen/font_normal"/> TextInputLayout
background="@color/white" android:hint="账号" /> com.google.android.material.textfield.TextInputLayout...> TextInputLayout android:layout_width="match_parent...hint="密码" android:inputType="textPassword" /> com.google.android.material.textfield.TextInputLayout...> TextInputLayout android:layout_width="match_parent...> TextInputLayout android:layout_width="match_parent
Snackbar的详细使用参见《轻量级控件SnackBar使用以及源码分析》 TextInputLayout 布局: TextInputLayout...需要注意的是,TextInputLayout必须包含一个EditText。...textInputLayout, String errorString, int maxTextCount) { mTextInputLayout = textInputLayout...的错误提示、字数统计功能,基本的使用都比较简单。...在TextInputLayout可以轻松地通过getEditText方法找到它所包裹的EditText。、 在显示错误的时候,需要先设置错误的提示,每次显示的时候都要设置。
layout_height="match_parent" android:orientation="vertical"> TextInputLayout...singleLine="true" android:text="@={userModel.username}" /> TextInputLayout...> TextInputLayout android:id="@+id/passwordLayout"...textPassword" android:text="@={userModel.password}" /> TextInputLayout
="vertical" android:padding="32dp"> TextInputLayout...> TextInputLayout android:id="@+id...> TextInputLayout android:id="@+id...> TextInputLayout android:layout_width...loginViewModel.user.getValue().getPwd().equals(localUser.getPwd())) { showMsg("账号或密码错误
textColor="@color/black" android:textSize="12sp" /> com.google.android.material.textfield.TextInputLayout...> TextInputLayout android:layout_width="match_parent...textColor="@color/black" android:textSize="12sp" /> com.google.android.material.textfield.TextInputLayout...> TextInputLayout android:layout_width="match_parent...> TextInputLayout android:layout_width="match_parent
领取专属 10元无门槛券
手把手带您无忧上云