在移动互联网时代，用户是每家IT企业最宝贵的资源，对于App而言，吸引用户注册并登录是万分紧要之事，因为用户登录之后才有机会产生商品交易。登录校验通常是用户名+密码组合，可是每天总有部分用户忘记密码，为此要求App提供找回密码的功能，如何简化密码找回步骤，同时兼顾安全性，就是一个值得认真思考的问题。

1　需求描述

各家电商App的登录页面大同小异，要么是用户名与密码组合登录，要么是手机号码与验证码组合登录，若是做好一点的，则会提供找回密码与记住密码等功能。先来看一下登录页面是什么样，因为有两种组合登录方式，所以登录页面也分成两个效果图。如图5-37所示，这是选中密码登录时的界面；如图所示，这是选中验证码登录时的界面。

从以上两个登录效果图可以看到，密码登录与验证码登录的界面主要存在以下几点区别：

（ 1 ）密码输入框和验证码输入框的左侧标题以及输入框内部的提示语各不相同。

（ 2 ）如果是密码登录，则需要支持找回密码；如果是验证码登录，则需要支持向用户手机发送验证码。

（ 3 ）密码登录可以提供记住密码功能，而验证码的数值每次都不一样，无须也没法记住验证码。

对于找回密码功能，一般直接跳到找回密码页面，在该页面输入和确认新密码，并校验找回密码的合法性（通过短信验证码检查），据此勾勒出密码找回页面的轮廓概貌，如图5-39所示。

Image From 笔记-Android 开发从入门到实战

在找回密码的操作过程当中，为了更好地增强用户体验，有必要在几个关键节点处提醒用户。比如成功发送验证码之后，要及时提示用户注意查收短信，这里暂且做成提醒对话框的形式，如图5-40所示。又比如密码登录成功之后，也要告知用户已经修改成功登录，注意继续后面的操作，登录成功的提示弹窗如图所示。

真是想不到，原来简简单单的一个登录功能，就得考虑这么多的需求场景。可是仔细想想，这些需求场景都是必要的，其目的是为了让用户能够更加便捷地顺利登录。正所谓“台上十分钟，台下十年功”，每个好用的App背后，都离不开开发者十年如一日的辛勤工作。

2　界面设计

用户登录与找回密码界面看似简单，用到的控件却不少。按照之前的界面效果图，大致从上到下、从左到右分布着下列Android控件：

单选按钮RadioButton：用来区分是密码登录还是验证码登录。
文本视图TextView：输入框左侧要显示此处应该输入什么信息。
编辑框EditText：用来输入手机号码、密码和验证码。
复选框CheckBox：用于判断是否记住密码。
按钮Button：除了“登录”按钮，还有“忘记密码”和“获取验证码”两个按钮。
线性布局LinearLayout：整体界面从上往下排列，用到了垂直方向的线性布局。
相对布局RelativeLayout：忘记密码的按钮与密码输入框是叠加的，且“忘记密码”与上级视图右对齐。
单选组RadioGroup：密码登录和验证码登录这两个单选按钮，需要放在单选组之中。
提醒对话框AlertDialog：为了演示方便，获取验证码与登录成功都通过提醒对话框向用户反馈结果。

另外，由于整个登录模块由登录页面和找回密码页面组成，因此这两个页面之间需要进行数据交互，也就是在页面跳转之时传递参数。譬如，从登录页面跳到找回密码页面，要携带唯一标识的手机号码作为请求参数，不然密码找回页面不知道要给哪个手机号码修改密码。同时，从找回密码页面回到登录页面，也要将修改之后的新密码作为应答参数传回去，否则登录页面不知道密码被改成什么了。

3　关键代码

为了方便读者更好更快地完成登录页面与找回密码页面，下面列举几个重要功能的代码片段：

1 ．关于自动清空错误的密码

这里有个细微的用户体验问题：用户会去找回密码，肯定是发现输入的密码不对；那么修改密码后回到登录页面，如果密码框里还是刚才的错误密码，用户只能先清空错误密码，然后才能输入新密码。一个App要想让用户觉得好用，就得急用户之所急，想用户之所想，像刚才那个错误密码的情况，应当由App在返回登录页面时自动清空原来的错误密码。

自动清空密码框的操作，放在onActivityResult方法中处理是个办法，但这样有个问题，如果用户直接按
返回键回到登录页面，那么onActivityResult方法发现数据为空便不做处理。因此应该这么处理：判断当
前是否为返回页面动作，只要是从找回密码页面返回到当前页面，则不管是否携带应答参数，都要自动
清空密码输入框。对应的Java代码则为重写登录页面的onRestart方法，在该方法中强制清空密码。这样一来，不管用户是修改密码完成回到登录页，还是点击返回键回到登录页，App都会自动清空密码框了。

下面是重写onRestart方法之后的代码例子：


// 从修改密码页面返回登录页面，要清空密码的输入框
@Override
protected void onRestart() { super.onRestart();et_password.setText("");
}

2 ．关于自动隐藏输入法面板

在输入手机号码或者密码的时候，屏幕下方都会弹出输入法面板，供用户按键输入数字和字母。但是输入法面板往往占据屏幕下方大块空间，很是碍手碍脚，用户输入完 11 位的手机号码时，还得再按一下返回键来关闭输入法面板，接着才能继续输入密码。理想的做法是：一旦用户输完 11 位手机号码，App就要自动隐藏输入法。同理，一旦用户输完 6 位密码或者 6 位验证码，App也要自动隐藏输入法。要想让
App具备这种智能的判断功能，就得给文本编辑框添加监听器，只要当前编辑框输入文本长度达到 11 位或者和 6 位，App就自动隐藏输入法面板。

下面是实现自动隐藏软键盘的监听器代码例子：

（完整代码见chapter05\src\main\java\com\example\chapter05\LoginMainActivity.java）

// 定义一个编辑框监听器，在输入文本达到指定长度时自动隐藏输入法
private class HideTextWatcher implements TextWatcher {private EditText mView; // 声明一个编辑框对象private int mMaxLength; // 声明一个最大长度变量public HideTextWatcher(EditText v, int maxLength) {super();mView = v;mMaxLength = maxLength;}// 在编辑框的输入文本变化前触发public void beforeTextChanged(CharSequence s, int start, int count, int after) {}// 在编辑框的输入文本变化时触发public void onTextChanged(CharSequence s, int start, int before, int count) {}// 在编辑框的输入文本变化后触发public void afterTextChanged(Editable s) {String str = s.toString(); // 获得已输入的文本字符串// 输入文本达到11位（如手机号码），或者达到6位（如登录密码）时关闭输入法 if ((str.length() == 11 && mMaxLength == 11)|| (str.length() == 6 && mMaxLength == 6)) {ViewUtil.hideOneInputMethod(LoginMainActivity.this, mView); // 隐藏输入法软键盘} }
}

3 ．关于密码修改的校验操作

由于密码对于用户来说是很重要的信息，因此必须认真校验新密码的合法性，务必做到万无一失才行。具体的密码修改校验可分作下列 4 个步骤：

新密码和确认输入的新密码都要是 6 位数字。
新密码和确认输入的新密码必须保持一致。
用户输入的验证码必须和系统下发的验证码一致。
密码修改成功，携带修改后的新密码返回登录页面。
根据以上的校验步骤，对应的代码逻辑示例如下：

String password_first = et_password_first.getText().toString();
String password_second = et_password_second.getText().toString();
if (password_first.length() < 6 || password_second.length() < 6) {Toast.makeText(this, "请输入正确的新密码", Toast.LENGTH_SHORT).show(); return;
}
if (!password_first.equals(password_second)) {Toast.makeText(this, "两次输入的新密码不一致", Toast.LENGTH_SHORT).show(); return;
}
if (!et_verifycode.getText().toString().equals(mVerifyCode)) {Toast.makeText(this, "请输入正确的验证码", Toast.LENGTH_SHORT).show();
} else {Toast.makeText(this, "密码修改成功", Toast.LENGTH_SHORT).show(); // 以下把修改好的新密码返回给上一个页面Intent intent = new Intent(); // 创建一个新意图intent.putExtra("new_password", password_first); // 存入新密码 setResult(Activity.RESULT_OK, intent); // 携带意图返回上一个页面 finish(); // 结束当前的活动页面
}

2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——实战二：简易登录+找回密码相关推荐

2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——第六章：数据存储
第 6 章数据存储本章介绍Android 4种存储方式的用法,包括共享参数SharedPreferences.数据库SQLite.存储卡文件.App的全局内存,另外介绍Android重要组件-应 ...
2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——第五章：中级控件
第 5 章中级控件本章介绍App开发常见的几类中级控件的用法,主要包括:如何定制几种简单的图形.如何使用几种选择按钮.如何高效地输入文本.如何利用对话框获取交互信息等,然后结合本章所学的知识,演示 ...
2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——第三章：简单控件
第 3 章简单控件本章介绍了App开发常见的几类简单控件的用法,主要包括:显示文字的文本视图.容纳视图的常用布局.响应点击的按钮控件.显示图片的图像视图等.然后结合本章所学的知识,演示了一个实战项 ...
2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——第二章：Android App 开发基础
第 2 章 Android App开发基础本章介绍基于Android系统的App开发常识,包括以下几个方面:App开发与其他软件开发有什么不一样,App工程是怎样的组织结构又是怎样配置的,App开 ...
2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——第一章：Android开发环境搭建
第 1 章 Android开发环境搭建本章介绍了如何在个人电脑上搭建Android开发环境,主要包括:Android开发的发展历史是怎样的.Android Studio的开发环境是如何搭建的.如何创 ...
2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——第四章：活动Activity
第 4 章活动Activity 本章介绍Android 4大组件之一Activity的基本概念和常见用法.主要包括如何正确地启动和停止活动页面.如何在两个活动之间传递各类消息.如何在意图之外给活动 ...
2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——实战三：购物车
6.5 实战项目:购物车(还未补全图片) 购物车的应用面很广,凡是电商App都可以看到它的身影,之所以选择购物车作为本章的实战项目,除了它使用广泛的特点,更因为它用到了多种存储方式.现在就让我们开启电 ...
2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——第八章：高级控件
本章介绍了App开发常用的一些高级控件用法,主要包括:如何使用下拉框及其适配器.如何使用列表类视图及其适配器.如何使用翻页类视图及其适配器.如何使用碎片及其适配器等.然后结合本章所学的知识,演示了 ...
2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——实战一：简易计算器
1.界面设计 Windows计算器,它主要由上半部分的计算结果与下半部分的计算按钮两块区域组成,据此可创建一个界面相似的计算器App,同样由计算结果和计算按钮两部分组成,如图所示. 按照计算器App的 ...

2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——实战二：简易登录+找回密码

1　需求描述

2　界面设计

3　关键代码

2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——实战二：简易登录+找回密码相关推荐

最新文章

热门文章

2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——实战二：简易登录+找回密码

1 需求描述

2 界面设计

3 关键代码

2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——实战二：简易登录+找回密码相关推荐

最新文章

热门文章

1　需求描述

2　界面设计

3　关键代码