Android TextInputLayout实现注册布局

使用TextInputLayout可以轻松的实现带友好提示的输入框,并且带有Material Design的动画提示,下面我们来看下使用过程.

导入Gradle

TextInputLayout在Design包下

  compile 'com.android.support:design:24.0.0-beta1'

为每个TextInputLayout包裹一个EditText

TextInputLayout其实就是输入框的布局文件,只接受一个子View,必须是EditView

完整布局文件如下:

<?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"
    android:background="#eeeeee"
    android:orientation="vertical"
    android:paddingLeft="3dp"
    android:paddingRight="3dp"
    tools:context="com.example.yangtianrui.textinputlayout.MainActivity">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.5">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="Welcome"
            android:textColor="#777777"
            android:textSize="45sp" />
    </RelativeLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:orientation="vertical">


        <!-- 输入框的布局文件,只接受一个子View,必须是EditView -->
        <android.support.design.widget.TextInputLayout
            android:id="@+id/id_til_user_wrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/id_et_username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textCapCharacters" />
        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:id="@+id/id_til_pwd_wrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp">

            <EditText
                android:id="@+id/id_et_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword" />

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

        <android.support.design.widget.TextInputLayout
            android:id="@+id/id_til_verify_wrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/id_et_verify"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword" />

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

        <Button
            android:id="@+id/id_btn_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:text="login" />
    </LinearLayout>

</LinearLayout>

设置Hint(友好的上下文提示)

只需要给TextInputLayout的对象设置Hint属性就好了,会自动生成Material Design 动画效果.

 // 设置Hint实现浮动提示
 mTilPwd.setHint("Password");
 mTilUser.setHint("UserName");
 mTilVerify.setHint("Verify");

设置Error提示

有两个方法设置Error提示,使用setErrorable(true),设置为显示错误提示,setError()显示错误信息,使用setError(null),关闭错误信息

// 对错误消息进行处理
isCorrect = true;
// 表示没有错误
mTilPwd.setError(null);
mTilUser.setError(null);
if (!validate(userName)) {
    mTilUser.setError("Invalid UserName!");
    isCorrect = false;
}
if (!validate(password) || !verifyPwd(password, verify)) {
    mTilPwd.setError("Invalid Password");
    isCorrect = false;
}
// 输入正确
if (isCorrect) {
    // 关闭错误提醒功能
    mTilUser.setErrorEnabled(false);
    mTilPwd.setErrorEnabled(false);
    doLogin(userName, password);
}

错误提示

Bmob 后端云实现注册

直接使用BmobUser即可,调用signup方法并实现回调

/**
 * 将用户信息注册到Bmob后台
 */
private void doLogin(String userName, String password) {
    BmobUser user = new BmobUser();
    user.setUsername(userName);
    user.setPassword(password);
//        user.setEmail("sendi@163.com");
    user.signUp(this, new SaveListener() {
        @Override
        public void onSuccess() {
            Toast.makeText(MainActivity.this, "注册成功!", Toast.LENGTH_SHORT).show();
        }

        @Override
        public void onFailure(int i, String s) {
            Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show();
        }
    });
}

完整代码

public class MainActivity extends AppCompatActivity {

    private TextInputLayout mTilUser;
    private TextInputLayout mTilPwd;
    private TextInputLayout mTilVerify;
    private Button mBtnLogin;
    private boolean isCorrect = true; // 输入正确

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Bmob.initialize(this, "887fb8cdafa392424a938a99673a2088"); // 你的App ID
        mTilPwd = (TextInputLayout) findViewById(R.id.id_til_pwd_wrapper);
        mTilUser = (TextInputLayout) findViewById(R.id.id_til_user_wrapper);
        mTilVerify = (TextInputLayout) findViewById(R.id.id_til_verify_wrapper);
        mBtnLogin = (Button) findViewById(R.id.id_btn_login);

        // 设置Hint实现浮动提示
        mTilPwd.setHint("Password");
        mTilUser.setHint("UserName");
        mTilVerify.setHint("Verify");
        // 进行错误处理
        mBtnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 隐藏系统键盘
                if (getCurrentFocus() != null) {
                    InputMethodManager manager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
                    manager.hideSoftInputFromWindow(getCurrentFocus().getWindowToken()
                            , InputMethodManager.HIDE_NOT_ALWAYS);
                }
                // 获取输入的数值
                String userName = mTilUser.getEditText().getText().toString();
                String password = mTilPwd.getEditText().getText().toString();
                String verify = mTilVerify.getEditText().getText().toString();
                // 对错误消息进行处理
                isCorrect = true;
                // 表示没有错误
                mTilPwd.setError(null);
                mTilUser.setError(null);
                if (!validate(userName)) {
                    mTilUser.setError("Invalid UserName!");
                    isCorrect = false;
                }
                if (!validate(password) || !verifyPwd(password, verify)) {
                    mTilPwd.setError("Invalid Password");
                    isCorrect = false;
                }
                // 输入正确
                if (isCorrect) {
                    // 关闭错误提醒功能
                    mTilUser.setErrorEnabled(false);
                    mTilPwd.setErrorEnabled(false);
                    doLogin(userName, password);
                }
            }
        });
    }

    /**
     * 将用户信息注册到Bmob后台
     */
    private void doLogin(String userName, String password) {
        BmobUser user = new BmobUser();
        user.setUsername(userName);
        user.setPassword(password);
//        user.setEmail("sendi@163.com");
        user.signUp(this, new SaveListener() {
            @Override
            public void onSuccess() {
                Toast.makeText(MainActivity.this, "注册成功!", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onFailure(int i, String s) {
                Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show();
            }
        });
    }


    /**
     * 验证规则
     */
    private boolean validate(String content) {
        return content.length() > 6;
    }

    /**
     * 验证密码
     */
    private boolean verifyPwd(String pwd, String verify) {
        return pwd.equals(verify);
    }

}