TextInputLayout使用详解

简介: TextInputLayout使用详解

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


效果图:

image.png


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


布局文件

<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:

<!--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:


app:hintTextAppearance="@style/MyHintText"

TextInputEditText:


android:theme="@style/MyEditText"

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

style:

<!--Error label text style-->
    <style name="MyErrorText" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">@color/red</item>
    </style>

然后设置

 

app:errorEnabled="true"
    app:errorTextAppearance="@style/MyErrorText"

代码控制,设置输入监听

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:

<!--Overflow label text style-->
    <style name="MyOverflowText" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">@color/orange</item>
    </style>

然后设置

 

app:counterEnabled="true"
    app:counterMaxLength="3"
    app:counterOverflowTextAppearance="@style/MyOverflowText"

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



在上面的“错误提示”中,有一段判断是这样的

if (mTilName.getEditText().getText().length() > mTilName.getCounterMaxLength())

mTilName是TextInputLayout,getEditText()方法可以获取子控件TextInputEditText。

getCounterMaxLength()方法可以获取字数限制的最大值。

4、密码样式

先设置TextInputEditText

android:inputType="textPassword"

然后设置TextInputLayout

app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/colorPrimary"

app:passwordToggleTint是换图标的颜色

换图标是app:passwordToggleDrawable

app:passwordToggleDrawable="@drawable/ic_password"


github:

https://github.com/yechaoa/MaterialDesign

目录
相关文章
|
6月前
|
Android开发
[Android]DrawerLayout滑动菜单+NavigationView
[Android]DrawerLayout滑动菜单+NavigationView
76 0
|
缓存 Android开发
Android TabLayout的使用详解
Android TabLayout的使用详解
132 0
|
API Android开发
CardView的那点事儿
CardView的那点事儿
121 0
|
XML API Apache
TextInputLayout-Android M新控件
TextInputLayout-Android M新控件
111 0
|
XML Android开发 数据格式
Android TabLayout的使用与总结
最近的新项目里老是会用到tablayout,便想着自己也总结下,加深印象,于是他来啦!
|
XML Java Android开发
TextInputLayout 使用
TextInputLayout 使用
100 0
|
Android开发
Android之FloatingActionButton使用
Android之FloatingActionButton使用
215 0
Android之FloatingActionButton使用
|
Android开发
2-VVI-材料设计之CardView
零、前言 [1].CardView extends FrameLayout [2].一个带圆角和阴影的FrameLayout,FrameLayout怎么用,它就怎么用 [3].
1119 0
|
XML Android开发 数据格式
TextInputLayout详解
TextInputLayout是什么 TextInputLayout主要是作为EditText的容器,从而为EditText生成一个浮动的Label,当用户点击EditText的时候,EditText中的hint字符串会自动移到EditText的左上角。
967 0