浅析Android Material Design之TextInputLayout

Material Design(质感设计)是Google工程师基于传统优秀的设计原则,结合丰富的创意和科学技术所发明的一套全新的界面设计语言,主要用于解决Android平台界面风格不统一的问题。在2015年的Google I/O大会上退出的Design Support库将Material Design中最具代表性的一些控件和效果进行了封装，从而方便开发者调用相应的API来实现相应的MD风格。

本篇主要介绍TextInputLayout的使用。

首先声明:
TextInputLayout是一个类似于LinearLayout存放空间的容器,TextInputLayout和ScrollView一样只能接受一个子元素,并且子元素是EditText的类型。

接下来介绍TextInputLayout的使用:
首先添加Gradle依赖:

现在我们就可以使用TextInputLayout控件了。
布局文件中具体使用:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.fuyunwang.myapplication.MainActivity">
    <android.support.design.widget.TextInputLayout
        android:id="@+id/accoutinput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入手机号"
        >
        <EditText
            android:id="@+id/accout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="phone"
            android:singleLine="true"
            />
    android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordinput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入密码"
        >
        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    android.support.design.widget.TextInputLayout>
    <Button
        android:id="@+id/accout_sign_in_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        style="?android:textAppearanceSmall"
        android:text="注册"
        android:textStyle="bold"
        android:textColor="@color/colorAccent"
        android:background="@color/colorPrimary"
        />
LinearLayout>

其中,android:hint属性指定了浮动标签所显示的内容。当然也可以直接使该属性失效:app:hintEnabled="false",
此外对于浮动标签的显示隐藏切换有一个过渡动画,我们可以通过app:hintAnimationEnabled="false"来取消该效果。
指定输入的最大值：app:counterMaxLength="11",一旦在xml代码中指定了最大值,代码中可以通过accountinput.getcounterMaxLength()来获取设置的值。

设置错误提示:
首先确保错误提示的功能是开启的。
xml方式:app:errorEnabled="true"
代码方式:accountinput.setErrorEnabled(true)
如果要关闭错误提示:
取消错误提示:
方式一:

    accoutinput.setEnable(true);
    passwordinput.setEnable(true);
       //setEnabled设置之后不会自动的取消错误提示,只有置为空之后才会取消
        accoutinput.setError(null);
        passwordinput.setError(null);

方式二:

accountinput.setErrorEnable(false);
passwordinput.setErrorEnable(false);

方式三:

app:errorEnabled="false"    

我这里辨析一下,xml和java代码是一致的,其中errorEnable是表示是否开启显示错误的功能;error指的是当错误发生时在TextInputLayout下会有错误的提示并且我们仍然可以输入;而enable不同,当我们设置为false的时候,整个空间处于不可用的状态,我们无法输入值

常见使用方式:

     editText.addTextChangedListener(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) {
                if (charSequence.toString().length()>5){
                    inputLayout.setCounterMaxLength(5);
                    inputLayout.setError("您的输入超出了5个字符");
//                    inputLayout.setEnabled(false);       当输入的值为6个的时候控件处于不可用状态,一般这种处理方式极少用
                }else{
//                    inputLayout.setErrorEnabled(false); //注意此代码作用相当于下面的两行代码
                    inputLayout.setEnabled(true);
                    inputLayout.setError(null);
                }
            }
            @Override
            public void afterTextChanged(Editable editable) {
            }
        });

在实际的应用中,如果我们需要在编辑的时候自动的取消错误的提示

        accout.addTextChangedListener(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(accoutinput.getError()!=null){
                    accoutinput.setError(null);
                }
            }
        });

关于密码效果的使用,在EditText中指定类型为textPassword,并且在TextInputLayout中指定app:passwordToggleEnabled="true",可以得到密码是否可见的效果。

   .support.design.widget.TextInputLayout
        android:id="@+id/passwordinput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入密码"
        app:hintAnimationEnabled="false"
        app:passwordToggleEnabled="true"
        >
        "@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            />
    .support.design.widget.TextInputLayout>

当然我们也会在输入完成的时候取消烦人的软键盘,此时我们可以在TextInputLayout上设置监听事件onClick:

 .support.design.widget.TextInputLayout
            android:id="@+id/textInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:onClick="hideKeyBord"
            app:hintAnimationEnabled="true"
            app:counterMaxLength="5"
            app:errorEnabled="true"
            >
            "@+id/editText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text"
                android:hint="请输入用户名:"
                />
        .support.design.widget.TextInputLayout>

    public void hideKeyBord(View v) {
        View view=getCurrentFocus();
        if(null!=view){
            InputMethodManager manager= (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
            manager.hideSoftInputFromWindow(view.getWindowToken(),InputMethodManager.HIDE_NOT_ALWAYS);
        }
    }