textInputLayout使用简介

TextInputLayout使用简介

通常使用输入框时都会给出提示信息，但是当用户开始输入时，提示信息就会消失，从Android 5.0开始，google提供了一个新的控件来完善EditText的用户体验，先上效果图。

使用TextInputLayout，首先需要在gradle中添加依赖，打开build.gradle(Module:app)，在dependencies块中添加如下内容

 compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support:design:25.3.1' 

建议使用24以上的版本，否则将导致有些熟悉无法正常使用。

TextInputLayout继承自LinearLayout，他里面只能包含一个子控件，通常是EditText，接下来看看布局文件中应该如何使用：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                xmlns:tools="http://schemas.android.com/tools"                android:layout_width="match_parent"                android:layout_height="match_parent"                xmlns:app="http://schemas.android.com/apk/res-auto"                android:background="@color/login_bg"                tools:context="com.example.tom.visitshop.activity.LoginActivity">    <ScrollView        android:layout_width="match_parent"        android:layout_height="match_parent">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_marginTop="@dimen/login_LinearLayout_margin_top"            android:orientation="vertical">            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center_horizontal"                android:src="@mipmap/login_guide"/>            <android.support.design.widget.TextInputLayout                android:id="@+id/et_name_design"                android:layout_width="match_parent"                android:layout_height="wrap_content"                app:counterMaxLength="16"                app:counterEnabled="true"                android:hint="@string/activity_login_et_name_hint"                android:layout_marginLeft="@dimen/login_edit_margin_left"                android:layout_marginRight="@dimen/login_edit_margin_right"                android:layout_marginTop="@dimen/login_edit_margin_top"                >                <EditText                    android:id="@+id/et_name"                    android:layout_width="match_parent"                    android:layout_height="wrap_content"                    android:inputType="text"                    android:gravity="center_horizontal"                    android:textColorHint="@color/login_text_hint"                    android:maxLength="16"                    android:textSize="@dimen/login_edit_hint"/>            </android.support.design.widget.TextInputLayout>            <android.support.design.widget.TextInputLayout                android:id="@+id/et_password_design"                android:layout_width="match_parent"                android:layout_height="wrap_content"                app:counterEnabled="true"                app:counterMaxLength="6"                android:hint="@string/activity_login_et_password_hint"                android:layout_marginLeft="@dimen/login_edit_margin_left"                android:layout_marginRight="@dimen/login_edit_margin_right"                android:layout_marginTop="@dimen/login_edit_margin_top"                app:passwordToggleEnabled="true"                app:passwordToggleDrawable="@drawable/password_show_hind"                >                <EditText                    android:id="@+id/et_password"                    android:layout_width="match_parent"                    android:layout_height="wrap_content"                    android:inputType="textPassword"                    android:gravity="center_horizontal"                    android:textColorHint="@color/login_text_hint"                    android:maxLength="6"                    android:textSize="@dimen/login_edit_hint"/>            </android.support.design.widget.TextInputLayout>            <Button                android:id="@+id/btn_login"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginStart="@dimen/login_btn_margin_left"                android:layout_marginEnd="@dimen/login_btn_margin_right"                android:layout_marginTop="@dimen/login_login_margin_top"                android:background="@mipmap/login_btn"                android:text="@string/activity_login_et_btn_login"                android:textColor="@color/login_bg"                android:textSize="@dimen/login_edit_hint"/>        </LinearLayout>    </ScrollView></RelativeLayout>

此布局的效果如图：

TextInputLayout的部分特性已经用红色圆框标记出来了。

第一个字数统计功能，需要设置如下属性：

app:counterEnabled="true"

有时我们希望用户最多只能输入n个字符，例如手机号码为11位，这里我限制了用户名最多输入16个字符，当输入超过16个字符时，将无法再次输入，需要在TextInputLayout中增加

app:counterMaxLength="16"

这时，总字数显示的就是16，但是这并不能控制只能输入16个字符，当输入超过限制的字符时，输入框的颜色会发生变化，提示用户输入最大长度，但是这并不能满足我们的需求，因此需要在EditText中同时增加

android:maxLength="16"

就可以达到我们的需求了。

在使用提示信息时，我们不在和以前一样把hint属性设置在EditText中，而是设置在Edittext中，这时，当获取焦点后，就会自动浮动到上方，而不是消失。当然，也可以关闭浮动标签

app:hintEnable="false"

于此相关的还有一个属性，可以设置浮动标签的动画是否开启，默认为开启动画效果

app:hintAnimationEnabled="boolean"

密码隐藏和显示图标

现在很多应用的密码框都有一个隐藏和显示密码的按钮，只要我们在EditText中使用
android:inputType="textPassword"同时在TextInputLayout这设置如下属性，即可实现密码明文显示和隐藏的功能，此属性需要com.android.support:design的版本在24以上才可以使用。

app:passwordToggleEnabled="true"

由于UI工程师有自己的审美，需要定制显示的图标，那么，我们可以使用下面的属性更换图标

app:passwordToggleDrawable="@drawable/password_show_hind"  

我们使用一个selector来完成显示和隐藏的切换(password_show_hind.xml)

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

自定义浮动标签

如果觉得浮动提示的标签不符合UI的需求，我们依然可以进行定制。

app:hintTextAppearance="@style/hintAppearance" 

这里需要写一个style

<style name="errorAppearance" parent="TextAppearance.AppCompat">        <item name="android:textSize">12sp</item>        <item name="android:textColor">@color/hind_color</item></style>

错误提示信息

在前面的效果图中可以看到，如果没有输入用户名就点击登录按钮，会在输入框的下方给出红色的提示信息，这个信息需要在java文件中使用，在需要的地方，使用EditTextlayout的setError()方法即可

 private boolean checkData(){        mUserName = mNameEdt.getText().toString().trim();        mPassword = mPasswordEdt.getText().toString().trim();        if (TextUtils.isEmpty(mUserName)){            mNameDesign.setError("用户名不能为空");            return false;        }        if (mUserName.length() <0 || mUserName.length()>16){            mNameDesign.setError("用户名长度错误");            return false;        }        if (TextUtils.isEmpty(mPassword)){            mPasswordDesign.setError("密码不能为空");            return false;        }        if (mPassword.length() != 6){            mPasswordDesign.setError("请输入6位密码");            return false;        }        return true;    }

当默认的显示形式无法满足我们的需求的时候，同样可以进行定制

app:errorTextAppearance="@style/errorAppearance"  

<style name="errorAppearance" parent="TextAppearance.AppCompat">        <item name="android:textSize">12sp</item>        <item name="android:textColor">#ffff00</item></style>

通常情况下，当我们的edittext进行输入后，错误信息就应该消失，为了实现这个效果，我们可以给edittext添加一个listener，这里我们使用的是setErrorEnabled()方法，当然也可以使用setError(null)方法来实现相同的效果

 mPasswordEdt.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) {            }            @Override            public void afterTextChanged(Editable s) {                mPasswordDesign.setErrorEnabled(false);            }        });

监听虚拟键盘

有时我们在进行登录的输入过程中，当输入完用户名后，键盘会显示下一个，点击后直接跳转到密码的输入框中，这个效果我们可以使用如下属性来实现

用户名：

android:imeActionId="@+id/et_password_design"android:imeOptions="actionNext"

密码：

android:imeActionId="@+id/et_password_design"android:imeOptions="actionDone"

最后，需要密码的editText添加一个listener，这里需要注意的是，记得隐藏虚拟键盘!!
代码如下：

 mPasswordEdt.setOnEditorActionListener(new TextView.OnEditorActionListener() {            @Override            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {                if (actionId == EditorInfo.IME_ACTION_DONE) {                    InputMethodManager inputMethodManager=(InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);                    inputMethodManager.hideSoftInputFromWindow(getWindow().getDecorView().getWindowToken(),InputMethodManager.RESULT_UNCHANGED_SHOWN);                    login();                    return true;                }                return false;            }        });