【1个月速成Java】基于Android平台开发个人记账app学习日记—

【1个月速成Java】基于Android平台开发个人记账app学习日记——第4天，注册登录逻辑代码

24.11.03

1.输入手机号跳转功能

第一个要设计的功能是，输入手机号以后跳转到另一个页面，输入获取得到的验证码页面。先拿这个功能练练手。

首先看一下此时的完整项目结构：

主要是添加了2个活动类和对应的界面，下面看详细的代码部分。

处理注册的逻辑代码RegisterActivity

package com.example.personalexpensetracker.ui.activity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.example.personalexpensetracker.R;

public class RegisterActivity extends AppCompatActivity {

    // 声明用于存储界面组件的变量，分别对应手机号输入框、协议复选框和注册按钮。
    private EditText phoneEditText;
    private CheckBox agreeCheckBox;
    private Button registerButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // 活动创建时调用，调用父类的 onCreate 方法并设置布局

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);

        // 使用 findViewById 方法获取布局中的组件实例。
        phoneEditText = findViewById(R.id.phoneEditText);
        agreeCheckBox = findViewById(R.id.agreeCheckBox);
        registerButton = findViewById(R.id.registerButton);

        // 为注册按钮设置点击事件监听器
        registerButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String phone = phoneEditText.getText().toString();
                if (agreeCheckBox.isChecked()) {
                    Intent intent = new Intent(RegisterActivity.this, PasswordInputActivity.class);
                    intent.putExtra("phone", phone);  // 传递手机号到下一个activity
                    startActivity(intent);
                }
                else {
                    Toast.makeText(RegisterActivity.this, "请勾选协议", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

}

处理密码输入和提交的PasswordInputActivity

package com.example.personalexpensetracker.ui.activity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.example.personalexpensetracker.R;

public class PasswordInputActivity extends AppCompatActivity {

    // 成员变量声明，2次输入的密码和提交按钮
    private EditText passwordEditText1;
    private EditText passwordEditText2;
    private Button submitButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_password_input);

        // 获取3个组件实例，通过layout的xml文件中组件的id
        passwordEditText1 = findViewById(R.id.passwordEditText1);
        passwordEditText2 = findViewById(R.id.passwordEditText2);
        submitButton = findViewById(R.id.submitButton);

        // 为提交按钮设置事件监听器
        submitButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String password1 = passwordEditText1.getText().toString();
                String password2 = passwordEditText2.getText().toString();

                if (password1.equals(password2)) {
                    // 处理注册逻辑，例如保存用户信息
                    Toast.makeText(PasswordInputActivity.this, "注册成功", Toast.LENGTH_SHORT).show();
                    finish(); // 关闭当前活动
                } else {
                    Toast.makeText(PasswordInputActivity.this, "两次输入的密码不一致", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

注册活动类到AndroidManifest.xml中

这个主要是添加下面2行代码即可

<activity android:name=".ui.activity.RegisterActivity"/>
<activity android:name=".ui.activity.PasswordInputActivity"/>

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools">

    <application
            android:allowBackup="true"
            android:dataExtractionRules="@xml/data_extraction_rules"
            android:fullBackupContent="@xml/backup_rules"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/Theme.AppCompat.Light"
            tools:targetApi="31">
        <activity
                android:name=".ui.activity.MainActivity"
                android:exported="true"
                android:label="@string/app_name"
                android:theme="@style/Theme.PersonalExpenseTracker">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <activity android:name=".ui.activity.RegisterActivity"/>
        <activity android:name=".ui.activity.PasswordInputActivity"/>

    </application>

</manifest>

注册界面与密码输入界面

查看下这2个界面的预览：

接下来看看效果：

注册功能测试

到现在基本的开发流程就掌握了，接下来需要重新修改文件内容，对照市面上的app进行登录注册功能的开发。

2.完整注册功能开发

首先捋一遍思路：

启动页面（Landing Page）：
- 显示应用Logo
- 勾选用户协议和隐私协议的复选框
- 选择登录方式的按钮
- 当按钮被点击时弹出选项（微信登录和手机号登录）
微信登录确认弹窗：
- 弹出对话框，确认是否进行微信登录。
手机号登录页面：
- 输入手机号和密码的输入框
- 勾选用户协议和隐私协议的复选框
- 登录按钮
- 找回密码和注册账号的链接
- 其他方式登录的按钮（引导到微信登录）

这里涉及到几个页面，我们把上面的登录注册等页面忘记，重新开始设计。第一个是启动页面，这个是新用户第一次下载和退出登录以后打开看到的页面。提供2种登录方式，包括微信登录页面和手机号登录页面。这里就是2个页面。然后手机号登录页面还提供找回密码和手机号注册页面。手机号注册点击以后进入的是输入验证码页面，之后是设置密码页面。总结以下我们接下来需要设计的页面一共有7个页面：

1.启动页面

2.微信登录页面

3.手机号登录页面

4.找回密码页面

5.输入手机号页面

6.输入验证码页面

7.设置密码页面

接下来我们就围绕着7个页面和相互的逻辑代码进行开发。在这之前先讲一下如何调整app的图标，相信很多人对这个感兴趣。

app图标设计

首先手残党没有设计经验的，推荐在canva上设计，用一些ai设计的找到灵感后，在它上面对照实现：

设计完点击分享就可以下载成png图片。然后如何导入到我们的项目中呢？之前文章说过res下很多文件都是图标在不同设备上的，所以有一个官网可以帮我们把图标转变成不同设备上的图片，地址如下：https://icon.kitchen/i/H4sIAAAAAAAAA6tWKkvMKU0tVrKqVkpJLMoOyUjNTVWyKikqTa3VUcrNTynNAUlGKyXmpRTlZ6Yo6Shl5hcDyfLUJKXYWgA19PHYPwAAAA%3D%3Dhttps://icon.kitchen/i/H4sIAAAAAAAAA6tWKkvMKU0tVrKqVkpJLMoOyUjNTVWyKikqTa3VUcrNTynNAUlGKyXmpRTlZ6Yo6Shl5hcDyfLUJKXYWgA19PHYPwAAAA%3D%3D只需要上传之前保存的png设计图片，就可以得到一个压缩包，里面就是我们需要的文件夹。