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);
    }

}
### 回答1: 要改变AndroidTextInputLayout的样式,可以在styles.xml文件中定义一个新的样式,然后将它应用到TextInputLayout控件上。 例如,要更改TextInputLayout的边框颜色和标签颜色,可以按照以下步骤操作: 1.在styles.xml文件中定义一个新的样式: ```xml <style name="MyTextInputLayoutStyle" parent="Widget.Design.TextInputLayout"> <!-- 边框颜色 --> <item name="boxStrokeColor">@color/my_color</item> <!-- 标签颜色 --> <item name="android:textColorHint">@color/my_color</item> </style> ``` 2.将新样式应用到TextInputLayout控件上: ```xml <com.google.android.material.textfield.TextInputLayout android:id="@+id/my_text_input_layout" style="@style/MyTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" app:hint="My Hint"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.textfield.TextInputLayout> ``` 这样就可以更改TextInputLayout的边框颜色和标签颜色了。您可以根据需要更改其他属性。 ### 回答2: AndroidTextInputLayout是一个扩展的布局控件,用于实现漂亮的文本输入框。要改变其样式,我们可以通过以下步骤进行操作: 1. 首先,在项目的build.gradle文件中添加新的依赖项: ``` implementation 'com.google.android.material:material:<版本号>' ``` 请注意,这里的版本号可以根据你的项目需要进行调整。 2. 在布局文件中,将TextInputLayout作为容器包裹EditText控件,并设置所需属性,如hint、hintTextColor等。例如: ```xml <com.google.android.material.textfield.TextInputLayout android:id="@+id/textInputLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="请输入内容" app:hintTextColor="@color/colorAccent"> <EditText android:id="@+id/editText" android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.textfield.TextInputLayout> ``` 3. 使用代码动态修改样式。在Activity或Fragment中,可以通过findViewById方法获取到TextInputLayout对象,并设置所需的样式。例如,改变文本颜色: ```java TextInputLayout textInputLayout = findViewById(R.id.textInputLayout); textInputLayout.setHintTextColor(Color.RED); ``` 以上是使用AndroidTextInputLayout改变样式的基本步骤。通过设置不同的属性和使用代码动态修改样式,可以实现丰富多样的UI效果,以满足实际需求。 ### 回答3: 要改变Android TextInputLayout的样式,可以通过以下步骤: 1. 首先,在项目的res文件夹下创建一个新的XML文件,比如命名为custom_text_input_layout.xml。在该文件中,可以自定义TextInputLayout的样式。 2. 在custom_text_input_layout.xml文件中,可以使用XML属性来改变样式。例如,可以修改背景颜色、边框颜色、字体颜色等。可以根据自己的需求进行样式的修改。 3. 在布局文件中使用自定义样式的TextInputLayout。找到需要使用的TextInputLayout控件,通过设置style属性将其样式修改为custom_text_input_layout。例如:<com.google.android.material.textfield.TextInputLayout style="@style/CustomTextInputLayout"> 4. 如果还需要修改TextInputEditText(即EditText控件),可以在CustomTextInputLayout的属性中设置相应的样式,例如:app:hintTextAppearance="@style/CustomTextInputEditText" 5. 另外,还可以通过在styles.xml文件中定义样式,再将样式应用到CustomTextInputLayout中。例如,在styles.xml中定义一个样式: <style name="CustomTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"> <item name="boxBackgroundMode">filled</item> <item name="boxBackgroundColor">@color/custom_background_color</item> <item name="hintTextColor">@color/custom_hint_text_color</item> <item name="boxStrokeColor">@color/custom_stroke_color</item> </style> 然后,在布局文件中使用该样式:<com.google.android.material.textfield.TextInputLayout style="@style/CustomTextInputLayout"> 通过以上步骤,就可以自定义Android TextInputLayout的样式了。根据自己的需求,可以修改背景颜色、边框颜色、字体颜色等来改变样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值