当前位置: 首页 > news >正文

(二十五)安卓开发一个完整的登录页面-支持密码登录和手机验证码登录

下面将详细讲解如何在 Android 中开发一个完整的登录页面,支持密码登录和手机验证码登录。以下是实现过程的详细步骤,从布局设计到逻辑实现,再到用户体验优化,逐步展开。


1. 设计登录页面布局

首先,我们需要设计一个用户友好的登录页面布局,包含以下核心元素:

  • 用户名/手机号输入框:用于输入用户名或手机号。
  • 密码输入框:用于密码登录。
  • 验证码输入框:用于手机验证码登录,默认隐藏。
  • 登录按钮:触发登录操作。
  • 切换登录方式按钮:在密码登录和验证码登录之间切换。
  • 发送验证码按钮:发送验证码到用户手机,默认隐藏。

我们可以使用 LinearLayoutConstraintLayout 来布局这些元素。以下是一个简单的 XML 布局示例:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:padding="16dp"><EditTextandroid:id="@+id/et_username"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="用户名/手机号" /><EditTextandroid:id="@+id/et_password"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="密码"android:inputType="textPassword" /><EditTextandroid:id="@+id/et_verification_code"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="验证码"android:visibility="gone" /><Buttonandroid:id="@+id/btn_send_verification_code"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="发送验证码"android:visibility="gone" /><Buttonandroid:id="@+id/btn_login"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="登录" /><Buttonandroid:id="@+id/btn_switch_login_type"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="切换到手机验证码登录" /></LinearLayout>

说明

  • android:visibility="gone" 表示验证码输入框和发送验证码按钮默认隐藏。
  • android:inputType="textPassword" 确保密码输入框显示为密码格式。

2. 处理登录逻辑

接下来,我们在 Activity 中实现登录逻辑。这里以 Kotlin 为例,使用 AppCompatActivity 实现。

初始化视图和监听器
class LoginActivity : AppCompatActivity() {private lateinit var etUsername: EditTextprivate lateinit var etPassword: EditTextprivate lateinit var etVerificationCode: EditTextprivate lateinit var btnSendVerificationCode: Buttonprivate lateinit var btnLogin: Buttonprivate lateinit var btnSwitchLoginType: Buttonprivate var isPasswordLogin = true // 默认使用密码登录override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_login)// 初始化视图etUsername = findViewById(R.id.et_username)etPassword = findViewById(R.id.et_password)etVerificationCode = findViewById(R.id.et_verification_code)btnSendVerificationCode = findViewById(R.id.btn_send_verification_code)btnLogin = findViewById(R.id.btn_login)btnSwitchLoginType = findViewById(R.id.btn_switch_login_type)// 设置登录按钮点击事件btnLogin.setOnClickListener {if (isPasswordLogin) {performPasswordLogin()} else {performVerificationCodeLogin()}}// 设置切换登录方式按钮点击事件btnSwitchLoginType.setOnClickListener {switchLoginType()}// 设置发送验证码按钮点击事件btnSendVerificationCode.setOnClickListener {val phoneNumber = etUsername.text.toString()sendVerificationCode(phoneNumber)}}
}

说明

  • isPasswordLogin 是一个布尔变量,用于跟踪当前登录方式。
  • 点击登录按钮时,根据 isPasswordLogin 的值决定执行密码登录还是验证码登录。
切换登录方式
private fun switchLoginType() {if (isPasswordLogin) {// 切换到手机验证码登录etPassword.visibility = View.GONEetVerificationCode.visibility = View.VISIBLEbtnSendVerificationCode.visibility = View.VISIBLEbtnSwitchLoginType.text = "切换到密码登录"isPasswordLogin = false} else {// 切换到密码登录etPassword.visibility = View.VISIBLEetVerificationCode.visibility = View.GONEbtnSendVerificationCode.visibility = View.GONEbtnSwitchLoginType.text = "切换到手机验证码登录"isPasswordLogin = true}
}

说明

  • 通过改变视图的可见性(View.VISIBLEView.GONE)和按钮文本,实现登录方式的切换。

3. 实现密码登录

密码登录需要向服务器发送用户名和密码,并处理响应。我们使用 Retrofit 库进行网络请求。

定义 API 接口
interface ApiService {@POST("login")fun login(@Body request: LoginRequest): Call<LoginResponse>
}data class LoginRequest(val username: String, val password: String)
data class LoginResponse(val token: String)
实现密码登录逻辑
private fun performPasswordLogin() {val username = etUsername.text.toString()val password = etPassword.text.toString()val retrofit = Retrofit.Builder().baseUrl("https://your-api-url.com/") // 替换为实际 API 地址.addConverterFactory(GsonConverterFactory.create()).build()val apiService = retrofit.create(ApiService::class.java)val request = LoginRequest(username, password)apiService.login(request).enqueue(object : Callback<LoginResponse> {override fun onResponse(call: Call<LoginResponse>, response: Response<LoginResponse>) {if (response.isSuccessful) {val token = response.body()?.tokentoken?.let {saveToken(it)goToMainActivity()}} else {showError("登录失败,请检查用户名或密码")}}override fun onFailure(call: Call<LoginResponse>, t: Throwable) {showError("网络错误,请稍后重试")}})
}

说明

  • saveTokengoToMainActivity 用于保存 token 并跳转到主界面,具体实现见后文。
  • showError 用于显示错误提示。

4. 实现手机验证码登录

手机验证码登录分为两步:发送验证码和验证验证码。

定义 API 接口
interface ApiService {@POST("send_verification_code")fun sendVerificationCode(@Body request: SendCodeRequest): Call<SendCodeResponse>@POST("verify_code")fun verifyCode(@Body request: VerifyCodeRequest): Call<VerifyCodeResponse>
}data class SendCodeRequest(val phoneNumber: String)
data class SendCodeResponse(val success: Boolean)data class VerifyCodeRequest(val phoneNumber: String, val code: String)
data class VerifyCodeResponse(val token: String)
发送验证码
private fun sendVerificationCode(phoneNumber: String) {val retrofit = Retrofit.Builder().baseUrl("https://your-api-url.com/").addConverterFactory(GsonConverterFactory.create()).build()val apiService = retrofit.create(ApiService::class.java)val request = SendCodeRequest(phoneNumber)apiService.sendVerificationCode(request).enqueue(object : Callback<SendCodeResponse> {override fun onResponse(call: Call<SendCodeResponse>, response: Response<SendCodeResponse>) {if (response.isSuccessful && response.body()?.success == true) {Toast.makeText(this@LoginActivity, "验证码已发送", Toast.LENGTH_SHORT).show()startCountdown() // 开始倒计时} else {showError("验证码发送失败")}}override fun onFailure(call: Call<SendCodeResponse>, t: Throwable) {showError("网络错误,请稍后重试")}})
}
验证验证码
private fun performVerificationCodeLogin() {val phoneNumber = etUsername.text.toString()val verificationCode = etVerificationCode.text.toString()val retrofit = Retrofit.Builder().baseUrl("https://your-api-url.com/").addConverterFactory(GsonConverterFactory.create()).build()val apiService = retrofit.create(ApiService::class.java)val request = VerifyCodeRequest(phoneNumber, verificationCode)apiService.verifyCode(request).enqueue(object : Callback<VerifyCodeResponse> {override fun onResponse(call: Call<VerifyCodeResponse>, response: Response<VerifyCodeResponse>) {if (response.isSuccessful) {val token = response.body()?.tokentoken?.let {saveToken(it)goToMainActivity()}} else {showError("验证码错误")}}override fun onFailure(call: Call<VerifyCodeResponse>, t: Throwable) {showError("网络错误,请稍后重试")}})
}

5. 优化用户体验

为了提升用户体验,可以添加以下功能:

发送验证码倒计时
private fun startCountdown() {btnSendVerificationCode.isEnabled = falsevar remainingTime = 60 // 60秒倒计时val handler = Handler(Looper.getMainLooper())val runnable = object : Runnable {override fun run() {if (remainingTime > 0) {btnSendVerificationCode.text = "重新发送($remainingTime)"remainingTime--handler.postDelayed(this, 1000)} else {btnSendVerificationCode.text = "发送验证码"btnSendVerificationCode.isEnabled = true}}}handler.post(runnable)
}

说明

  • sendVerificationCode 成功后调用 startCountdown(),防止用户频繁发送验证码。
输入验证

可以在登录前检查输入是否合法,例如:

private fun isValidPhoneNumber(phone: String): Boolean {return phone.matches(Regex("^1[3-9]\\d{9}$")) // 简单验证中国手机号
}private fun performPasswordLogin() {val username = etUsername.text.toString()val password = etPassword.text.toString()if (username.isEmpty() || password.isEmpty()) {showError("用户名或密码不能为空")return}// 继续登录逻辑
}private fun performVerificationCodeLogin() {val phoneNumber = etUsername.text.toString()val code = etVerificationCode.text.toString()if (!isValidPhoneNumber(phoneNumber)) {showError("请输入有效的手机号")return}if (code.isEmpty()) {showError("请输入验证码")return}// 继续验证逻辑
}

6. 处理登录成功和失败

保存 Token 并跳转
private fun saveToken(token: String) {val sharedPreferences = getSharedPreferences("app_prefs", Context.MODE_PRIVATE)sharedPreferences.edit().putString("token", token).apply()
}private fun goToMainActivity() {val intent = Intent(this, MainActivity::class.java)startActivity(intent)finish()
}
显示错误提示
private fun showError(message: String) {Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
}

7. 总结

通过以上步骤,我们实现了一个完整的登录页面,支持密码登录和手机验证码登录。主要包括:

  • 布局设计:使用 XML 创建用户界面。
  • 逻辑处理:通过 Kotlin 实现切换登录方式和网络请求。
  • 网络请求:使用 Retrofit 与服务器交互。
  • 用户体验:添加倒计时和输入验证。

在实际开发中,还需考虑:

  • 安全性:密码加密传输、验证码防刷。
  • 界面美化:使用 Material Design 组件。
  • 错误处理:更细致的网络错误和服务器响应处理。

相关文章:

  • Android Studio 项目文件夹结构详解
  • Android WebView深度性能优化方案
  • UE5 Chaos :官方文献总结 + 渲染网格体 (Render Mesh) 和模拟网格体 是如何关联的?为什么模拟网格体 可以驱动渲染网格体?
  • CAD-MLLM 论文阅读笔记
  • [redis进阶二]分布式系统之主从复制结构(2)
  • 【LeetCode 热题 100】哈希 系列
  • 调节磁盘和CPU的矛盾——InnoDB的Buffer Pool
  • 安全人员如何对漏洞进行定级?
  • HTTP:六.HTTP代理相关介绍
  • 力扣HOT100——无重复字符的最长子字符串
  • route
  • 基于javaweb的SpringBoot影视播放评分交流系统设计与实现(源码+部署文档)
  • 【VsCode】设置文件自动保存
  • Mysql 身份认证绕过漏洞
  • Kotlin 集合过滤全指南:all、any、filter 及高级用法
  • 二叉树的基本功能实现
  • Sentinel源码—1.使用演示和简介一
  • linuxbash原理
  • docker 多主机容器组网
  • x-cmd install | jellex - 用 Python 语法在终端里玩转 JSON 数据!
  • 龚曙光:散文家永远只有一个视角,就是“我与时代”
  • 华夏银行青岛分行另类处置不良债权,德州近百亩土地被神奇操作抵押贷款
  • 见微知沪|最大力度消费补贴,最大程度满足人们对美好生活的向往
  • 王鹏任海南文昌市委书记
  • 接棒路颖,国泰海通证券副总裁谢乐斌履新海富通基金董事长
  • 内蒙古镶黄旗委原书记好毕斯哈拉图履新锡林郭勒盟民政局局长