Android中TextInputLayout 使用

首先添加依赖:compile 'com.android.support:design:25.3.1'

TextInputLayout继承了LinearLayout，包裹一个EditText。

 .support.design.widget.TextInputLayout        android:id="@+id/til_password"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="10dp"        app:errorEnabled="true">        "match_parent"            android:layout_height="wrap_content"            android:hint="请输入密码"            android:inputType="text"/>    .support.design.widget.TextInputLayout>

下面我们就来看看TextInputLayout包裹EditText和单独使用EditText的区别:

很明显，TextInputLayout包裹EditText的方式展示效果更好。

TextInputLayout包裹EditText布局如下:

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:focusable="true"    android:focusableInTouchMode="true">    <android.support.design.widget.TextInputLayout        android:id="@+id/til_account"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="10dp"        app:errorEnabled="true"        >        <EditText            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:inputType="text"            android:hint="请输入账号"/>    android.support.design.widget.TextInputLayout>    <android.support.design.widget.TextInputLayout        android:id="@+id/til_password"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="10dp"        app:errorEnabled="true">        <EditText            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:hint="请输入密码"            android:inputType="textPassword"/>    android.support.design.widget.TextInputLayout>LinearLayout>

TextInputLayout 可用属性

app:errorEnabled   错误提示信息是否显示app:errorTextAppearance 错误提示信息的字体样式app:counterEnabled 是否使用计数功能app:counterMaxLength  使用计数功能显示最大的长度app:counterTextAppearance   在长度范围内字体样式app:counterOverflowTextAppearance 超出最大长度后字体样式app:hintEnabled  提示信息是否显示app:hintAnimationEnabled  提示信息是否使用动画app:hintTextAppearance  提示信息字体样式app:passwordToggleEnabled 是否使用 密码显示、隐藏功能。app:passwordToggleDrawable  设置控制密码显示或隐藏的图标

错误提示和字数统计组合使用

 .support.design.widget.TextInputLayout        android:id="@+id/til_password"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="10dp"        app:errorEnabled="true"        app:errorTextAppearance="@style/ErrorStyle"        app:counterEnabled="true"        app:counterMaxLength="15"        app:counterTextAppearance="@style/NormalStyle"        app:counterOverflowTextAppearance="@style/OverflowStyle"        >        "match_parent"            android:layout_height="wrap_content"            android:hint="请输入密码"            android:inputType="textPassword"/>    .support.design.widget.TextInputLayout>

style 如下：

      <style name="NormalStyle" parent="TextAppearance.AppCompat.Small">        <item name="android:textColor">#00ff00item>        <item name="android:textSize">12spitem>    style>        <style name="OverflowStyle" parent="TextAppearance.AppCompat.Small">        <item name="android:textColor">#ff0000item>        <item name="android:textSize">12spitem>    style>        <style name="ErrorStyle" parent="TextAppearance.AppCompat.Small">        <item name="android:textColor">#ff0000item>        <item name="android:textSize">12spitem>    style>

Activity 中对EditText进行监听:

public class EditTextActivity extends AppCompatActivity {    private EditText mEditTextPassword;    private TextInputLayout mTextInputLayoutPassword;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_edit_text);        //初始化控件        mTextInputLayoutPassword = (TextInputLayout) findViewById(R.id.til_password);        //获取EditText        mEditTextPassword = mTextInputLayoutPassword.getEditText();        //动态监听EditText变化        mEditTextPassword.addTextChangedListener(new TextWatcher() {            @Override            public void beforeTextChanged(CharSequence s, int start, int count, int after) {            }            @Override            public void onTextChanged(CharSequence s, int start, int before, int count) {                String account = mEditTextPassword.getText().toString();                if (account.length() < 6){                    mTextInputLayoutPassword.setError("密码长度不得小于6位");                } else if (account.length() >= 6 && account.length() <= 15) {                    mTextInputLayoutPassword.setErrorEnabled(false);                }else if (account.length() > 15) {                    mTextInputLayoutPassword.setError("密码长度不得大于15位");                }            }            @Override            public void afterTextChanged(Editable s) {            }        });    }}

通过监听输入的长度来动态改变错误提示信息。
TextInputLayout.setError()用来设置需要显示的错误提示。

如图所示，未获得焦点时字数显示为绿色，未显示错误信息。获取焦点之后，错误信息提示为密码长度不得小于6位；长度达到6位的时候错误提示消失。超过15位之后提示密码长度不得大于15位，字数显示变为我们所设置的红色。

使用 app:passwordToggleEnabled功能

设置 app:passwordToggleEnabled=”true”

.support.design.widget.TextInputLayout        android:id="@+id/til_password"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="10dp"        app:passwordToggleEnabled="true"        >        "match_parent"            android:layout_height="wrap_content"            android:hint="请输入密码"            android:inputType="textPassword"/>    .support.design.widget.TextInputLayout>

默认是隐藏密码的，点击按钮之后即可显示输入的数据。

app:passwordToggleDrawable 设置自己的图标。

由于需要两张图片，所以使用selector来实现。创建 password_show_or_hide_selector.xml ，一张开眼，一张闭眼照片。

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/eye_open" android:state_checked="true">item>    <item android:drawable="@drawable/eye_close">item>selector>

布局中引用

app:passwordToggleDrawable="@drawable/password_show_or_hide_selector"

运行后的效果

更多相关文章

随机推荐