前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >TextInputLayout使用详解

TextInputLayout使用详解

作者头像
yechaoa
发布2022-06-10 12:26:55
发布2022-06-10 12:26:55
82500
代码可运行
举报
文章被收录于专栏:移动开发专栏移动开发专栏
运行总次数:0
代码可运行

TextInputLayout 基础样式、错误提示、字数限制等等

效果图:

【2020-12-13】Theme切换到MaterialComponents之后,是有一些变化的,比如默认背景、默认padding等,具体改动可去github查看。

布局文件

代码语言:javascript
代码运行次数:0
运行
复制
    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:counterEnabled="true"
        app:counterMaxLength="3"
        app:counterOverflowTextAppearance="@style/MyOverflowText"
        app:errorEnabled="true"
        app:errorTextAppearance="@style/MyErrorText"
        app:hintTextAppearance="@style/MyHintText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_name"
            android:theme="@style/MyEditText" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_password"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/til_name"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorPrimary">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_password"
            android:inputType="textPassword" />
    </android.support.design.widget.TextInputLayout>

1、修改默认样式

  • style:
代码语言:javascript
代码运行次数:0
运行
复制
	<!--Floating label text style-->
    <style name="MyHintText" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">@color/colorPrimary</item>
    </style>

    <!--Input field style-->
    <style name="MyEditText" parent="Theme.AppCompat.Light">
        <item name="colorControlNormal">@color/gray</item>
        <item name="colorControlActivated">@color/colorPrimary</item>
        <item name="android:textSize">18sp</item>
    </style>
  • 然后分别设置

TextInputLayout:

代码语言:javascript
代码运行次数:0
运行
复制
app:hintTextAppearance="@style/MyHintText"

TextInputEditText:

代码语言:javascript
代码运行次数:0
运行
复制
android:theme="@style/MyEditText"

2、错误提示样式及代码设置

  • style:
代码语言:javascript
代码运行次数:0
运行
复制
    <!--Error label text style-->
    <style name="MyErrorText" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">@color/red</item>
    </style>
  • 然后设置
代码语言:javascript
代码运行次数:0
运行
复制
    app:errorEnabled="true"
    app:errorTextAppearance="@style/MyErrorText"
代码控制,设置输入监听
代码语言:javascript
代码运行次数:0
运行
复制
mEtName.addTextChangedListener(mTextWatcher);

---------------------------------------------

private TextWatcher mTextWatcher = new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void afterTextChanged(Editable editable) {
            if (mTilName.getEditText().getText().length() > mTilName.getCounterMaxLength())
                mTilName.setError("输入内容超过上限");//show
            else
                mTilName.setError(null);//hide
        }
    };

3、字数限制

  • style:
代码语言:javascript
代码运行次数:0
运行
复制
    <!--Overflow label text style-->
    <style name="MyOverflowText" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">@color/orange</item>
    </style>
  • 然后设置
代码语言:javascript
代码运行次数:0
运行
复制
    app:counterEnabled="true"
    app:counterMaxLength="3"
    app:counterOverflowTextAppearance="@style/MyOverflowText"

根据单词字面意思都能看的懂吧,就不一一解释了吧。。

在上面的“错误提示”中,有一段判断是这样的
代码语言:javascript
代码运行次数:0
运行
复制
if (mTilName.getEditText().getText().length() > mTilName.getCounterMaxLength())
  • mTilName是TextInputLayout,getEditText()方法可以获取子控件TextInputEditText。
  • getCounterMaxLength()方法可以获取字数限制的最大值。

4、密码样式

  • 先设置TextInputEditText
代码语言:javascript
代码运行次数:0
运行
复制
android:inputType="textPassword"
  • 然后设置TextInputLayout
代码语言:javascript
代码运行次数:0
运行
复制
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/colorPrimary"
  • app:passwordToggleTint是换图标的颜色
  • 换图标是app:passwordToggleDrawable
代码语言:javascript
代码运行次数:0
运行
复制
app:passwordToggleDrawable="@drawable/ic_password"

github:

https://github.com/yechaoa/MaterialDesign

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-12-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • TextInputLayout 基础样式、错误提示、字数限制等等
  • 布局文件
  • 1、修改默认样式
  • 2、错误提示样式及代码设置
    • 代码控制,设置输入监听
  • 3、字数限制
    • 在上面的“错误提示”中,有一段判断是这样的
  • 4、密码样式
  • github:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档