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%3D
https://icon.kitchen/i/H4sIAAAAAAAAA6tWKkvMKU0tVrKqVkpJLMoOyUjNTVWyKikqTa3VUcrNTynNAUlGKyXmpRTlZ6Yo6Shl5hcDyfLUJKXYWgA19PHYPwAAAA%3D%3D只需要上传之前保存的png设计图片，就可以得到一个压缩包，里面就是我们需要的文件夹。
然后我们把文件夹替换一下即可，下面看看效果图：
篇幅所限，下篇文章见
![[vulnhub]DC:7](https://i-blog.csdnimg.cn/direct/7b709e0062f94806b172abd4ad800ddd.png)
