编写微信聊天机器人10《聊天精灵WeChatGenius》：加入用户登录页面，及数据验证。

版权声明：允许转载，请注明来源。 https://blog.csdn.net/weixin_42127613/article/details/81876229

接上篇，已经加入了网络请求功能。

链接：https://blog.csdn.net/weixin_42127613/article/details/81872403

那么接下来就要准备去使用网络功能了。本节先完成网络请求的界面，即完成一个登录页面。

登录页面的运行效果。

文件结构图变动如下。变动的文件较多，添加了图标和logo文件（到网上找的图标：）），嫌丑的话，自己就去换吧。添加了登录页面，以及数据验证方法类文件。

1、添加登录页面。修改布局页面activity_login.xml。最终的页面代码如下。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/app_primary_color"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".ui.user.LoginActivity">

    <com.qmuiteam.qmui.widget.QMUITopBar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/qmui_topbar_height" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/qmui_config_color_background">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <!--LOGO-->
            <com.qmuiteam.qmui.widget.QMUIRadiusImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="@dimen/qmui_content_padding_horizontal"
                android:padding="@dimen/common_content_spacing"
                android:src="@mipmap/logo"
                app:qmui_border_color="?attr/qmui_config_color_gray_6"
                app:qmui_border_width="0dp"
                />
            <!--边框分割细线-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@drawable/qmui_s_list_item_bg_with_border_bottom" />
            <!--账户和密码输入框-->
            <GridLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/qmui_config_color_white"
                android:columnCount="2"
                android:focusable="true"
                android:focusableInTouchMode="true">
                <!--账号-->
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="@dimen/qmui_list_item_height"
                    android:background="@drawable/qmui_s_list_item_bg_with_border_bottom"
                    android:gravity="center_vertical"
                    android:paddingLeft="@dimen/common_content_spacing"
                    android:paddingRight="@dimen/common_content_spacing"
                    android:text="账号"
                    android:textColor="?attr/qmui_config_color_gray_1"
                    android:textSize="?attr/qmui_common_list_item_title_h_text_size" />
                <!--账号输入框-->
                <EditText
                    android:id="@+id/edittext_username"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="fill"
                    android:background="@drawable/qmui_divider_bottom_bitmap"
                    android:hint="请输入登录账号"
                    android:textColor="?attr/qmui_config_color_gray_5"
                    android:textSize="?attr/qmui_common_list_item_detail_h_text_size" />
                <!--密码-->
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="@dimen/qmui_list_item_height"
                    android:layout_gravity="fill"
                    android:background="@drawable/qmui_s_list_item_bg_with_border_bottom"
                    android:gravity="center_vertical"
                    android:paddingLeft="@dimen/common_content_spacing"
                    android:paddingRight="@dimen/common_content_spacing"
                    android:text="密码"
                    android:textColor="?attr/qmui_config_color_gray_1"
                    android:textSize="?attr/qmui_common_list_item_title_h_text_size" />
                <!--密码输入框-->
                <EditText
                    android:id="@+id/edittext_password"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="fill"
                    android:background="@drawable/qmui_divider_bottom_bitmap"
                    android:hint="请输入密码"
                    android:inputType="textPassword"
                    android:textColor="?attr/qmui_config_color_gray_5"
                    android:textSize="?attr/qmui_common_list_item_detail_h_text_size" />

            </GridLayout>
            <!--登录按钮位置-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/qmui_config_color_white"
                android:orientation="horizontal"
                android:padding="@dimen/common_content_spacing">


                <Space
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

                <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
                    android:id="@+id/button_login"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="2"
                    android:clickable="true"
                    android:gravity="center"
                    android:padding="10dp"
                    android:text="登  录"
                    android:textSize="?attr/qmui_common_list_item_title_h_text_size"
                    app:qmui_isRadiusAdjustBounds="true" />

                <Space
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

            </LinearLayout>
        </LinearLayout>

    </ScrollView>
</LinearLayout>

2、修改页面类文件LoginActivity。该文件我们添加到子包中，建立ui包，再建立user包，里面放入LoginActivity类。

只需要处理登录按钮点击事件，进行基本的数据判断后，进入主页面，销毁本页面。暂未进行真实的数据验证。

在数据验证时，加入了正则表达式验证类RegexUtils，这个也是从网络上搜集而来。其代码不贴了，比较长，跟我们业务关系不大。

扫描二维码关注公众号，回复： 3719085 查看本文章

登录页面类LoginActivity代码如下。

public class LoginActivity extends Activity {
    @BindView(R.id.topbar) QMUITopBar mTopBar;
    private final String TAG = getClass().getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 沉浸式状态栏
        QMUIStatusBarHelper.translucent(this);
        View root = LayoutInflater.from(this).inflate(R.layout.activity_login, null);
        ButterKnife.bind(this, root);
        //初始化状态栏
        initTopBar();
        //设置view
        setContentView(root);

    }

    //初始化状态栏
    private void initTopBar() {
        mTopBar.setTitle(getResources().getString(R.string.activity_title_main));
    }

    //登录按钮
    @OnClick({R.id.button_login})
    void onClickButton(View view) {
        switch (view.getId()) {
            case R.id.button_login:
                onClickLogin(view);
                break;
        }
    }

    //登录按钮事件
    private void onClickLogin(View view) {
        String strName = ((EditText) findViewById(R.id.edittext_username)).getText().toString().trim();
        String strPassword = ((EditText) findViewById(R.id.edittext_password)).getText().toString().trim();

        if (!RegexUtils.isUsername(strName)) {
            Toast.makeText(this, "账号格式不正确！", Toast.LENGTH_SHORT).show();
            QMUIKeyboardHelper.showKeyboard((EditText) findViewById(R.id.edittext_username), 1500);
            return;
        }
        if (strPassword.length() < 6 || strPassword.length() > 20) {
            Toast.makeText(this, "密码长度为6到20位！", Toast.LENGTH_SHORT).show();
            QMUIKeyboardHelper.showKeyboard((EditText) findViewById(R.id.edittext_password), 1500);
            return;
        }

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        //结束本页面
        finish();
    }
}

3、修改AndroidManifest.xml文件，使登录页面作为启动页。

那么接下来，我们就可以测试啦。运行起来看看效果，是不是跟上面贴出来的效果图一样呢？

点击登录按钮，进行简单验证，通过后，进入主页面。

OK。我们完成登录页面设计，接下来就是实现真正的登录功能了，去服务端验证账号密码。放到下节去做。

本次代码已提交GitHub：https://github.com/dalu2048/WeChatGenius