Android控件<第七篇>：TextInputEditText

TextInputEditText往往和TextInputLayout一起使用，两者结合可以优雅的实现多个输入框的联级校验。

其效果图如下：

155.gif 153.gif 154.gif

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:layout_margin="50dp">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/CustomAppTheme_textInputLayout"
        android:layout_marginTop="20dp">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/tv_phone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入手机号"
            android:textSize="20sp"
            android:inputType="numberSigned"
            android:imeOptions="actionNext"
            android:nextFocusForward="@id/et_password"
            android:maxLines="1"
            android:singleLine="true" />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:theme="@style/CustomAppTheme_textInputLayout">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入密码"
            android:imeActionId="6"
            android:textSize="20sp"
            android:imeOptions="actionNext"
            android:nextFocusForward="@id/tuxing_code"
            android:inputType="textPassword"
            android:maxLines="1"
            android:singleLine="true" />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/CustomAppTheme_textInputLayout"
        android:layout_marginTop="20dp">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/tuxing_code"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入图形验证码"
            android:imeOptions="actionNext"
            android:nextFocusForward="@id/sms_code"
            android:inputType="numberSigned"
            android:textSize="20sp"
            android:maxLines="1"
            android:singleLine="true" />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:theme="@style/CustomAppTheme_textInputLayout">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/sms_code"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入短信验证码"
            android:imeOptions="actionDone"
            android:textSize="20sp"
            android:inputType="numberSigned"
            android:maxLines="1"
            android:singleLine="true" />

    </android.support.design.widget.TextInputLayout>
    
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:text="提交"
        android:textSize="26sp"/>

</LinearLayout>

<style name="CustomAppTheme_textInputLayout" parent="Theme.AppCompat.Light.NoActionBar">

    <item name="android:textColorHint">#BDBDBD</item>
    <item name="colorControlNormal">#000000</item>
    <item name="colorControlActivated">#38CC3D</item>
    <item name="colorControlHighlight">#63A3D7</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:colorError">#63A3D7</item>

</style>

    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {


            boolean cancel = false;
            View focusView = null;

            //检查手机号的合法性
            if (TextUtils.isEmpty(tv_phone.getText().toString())) {
                tv_phone.setError("手机号不能为空！");
                focusView = tv_phone;
                cancel = true;
            } else if (tv_phone.getText().toString().trim().length() != 11) {
                //如果手机号长度不足11位
                tv_phone.setError("手机号不足11位！");
                focusView = tv_phone;
                cancel = true;
            }

            //检查密码的合法性
            if(!cancel){
                if(TextUtils.isEmpty(et_password.getText().toString())){
                    et_password.setError("密码不能为空！");
                    focusView = et_password;
                    cancel = true;
                } else if(et_password.getText().toString().length() < 6 || et_password.getText().toString().length() > 12){
                    et_password.setError("密码长度不能小于6位，也不能大于12位！");
                    focusView = et_password;
                    cancel = true;
                }
            }


            //检查图形验证码的合法性
            if(!cancel){
                if(TextUtils.isEmpty(tuxing_code.getText().toString())){
                    tuxing_code.setError("图形验证码不能为空！");
                    focusView = tuxing_code;
                    cancel = true;
                } else if(tuxing_code.getText().toString().length() != 4){
                    tuxing_code.setError("图形验证码只允许是4位！");
                    focusView = tuxing_code;
                    cancel = true;
                }
            }

            //检查图形验证码的合法性
            if(!cancel){
                if(TextUtils.isEmpty(sms_code.getText().toString())){
                    sms_code.setError("短信验证码不能为空！");
                    focusView = sms_code;
                    cancel = true;
                } else if(sms_code.getText().toString().length() != 4){
                    sms_code.setError("短信验证码只允许是4位！");
                    focusView = sms_code;
                    cancel = true;
                }
            }

            if (cancel) {
                focusView.requestFocus();
            } else {
                Toast.makeText(MainActivity.this, "提交成功！", Toast.LENGTH_SHORT).show();
            }

        }
    });

代码和效果图已经贴出了，其用法比较简单，本章不做详细讲解。

[本章完...]