- Android Studio开发实战：从零基础到App上线 （移动开发丛书）
- 欧阳燊
- 2706字
- 2020-11-28 17:31:42
3.6 实战项目：登录App
现在是实战项目时间，大家如此费力地看书学习，还不就是为了在实际项目中派上用场。凡是赚钱的App，都要掌握用户资源，这便少不了为用户提供登录页面。下面设计并实现App的登录功能。
3.6.1 设计思路
如今楼市疯狂上涨，要买房自然少不了房贷，根据不同的贷款方式与还款方式计算出的月供数额各不相同。如果手机上有房贷计算器，就会便利许多。房贷计算器绝对是一个方便实用的App，本书迄今为止介绍的App开发知识足够写一个房贷计算器App了，如图3-26所示。本章学到的主要控件基本都能派上用场，包括RelativeLayout、EditText、RadioButton、CheckBox、Spinner等。读者若有兴趣可自行编码练习，补充房贷计算的具体业务逻辑。
图3-26 房贷计算器的效果图
本章的实战项目最终选定App登录页面，是因为要复习Activity的相关概念与用法。Activity是Android中最常用的组件，后续章节全部都会用到，所以要好好加以巩固。
各家App的登录页面大同小异，要么是用户名与密码组合登录，要么是手机号与验证码组合登录，如果要做得更好一点，就要提供忘记密码与记住密码等功能。我们的App登录项目把这些功能综合一下，都呈现到页面上，因为是练手，所以尽量让学到的控件都派上用场。登录页面的设计图初稿如图3-27所示。
图3-27 登录页面的效果图
读者找找看这个效果图包含哪些本章的新控件？一定会发现以下6个控件。
● 单选按钮RadioButton：用来区分是密码登录还是验证码登录。
● 下拉框Spinner：用于区分用户类型是个人用户还是公司用户。
● 编辑框EditText：用来输入手机号码和密码。
● 复选框CheckBox：用于判断是否记住密码。
● 相对布局RelativeLayout：指定手机号码的编辑框放在手机号码TextView的右边。这里使用线性布局LinearLayout也可以。
● 框架布局FrameLayout：忘记密码的按钮与密码输入框叠加。
至此，本章介绍的新控件基本都派上用场了。另外，本项目还要演示活动页面的的跳转功能，点击“忘记密码”按钮跳转到找回密码页面，找回密码页面的效果如图3-28所示。
图3-28 找回密码页面的效果图
找回密码的页面挺简单，主要问题是两个页面之间的跳转有哪些注意事项？页面跳转肯定要传递参数，一般唯一标识的手机号码要传过去，不然下一个页面不知道要为哪个手机号码修改密码；新密码也要传回去，不然上一个页面不知道密码被改成什么了。
另外，有一个细微的用户体验问题：用户会去找回密码，肯定是发现输入的密码不对。修改完密码回到登录页面时，密码输入框里还是原来错误的密码，此时用户清空错误密码才能输入新密码。我们的App想让用户觉得好用，就得急用户之所急、想用户之所想，像之前错误密码的情况应当由App在返回登录页面时自动清空原来错误的密码。自动清空的操作放在onActivityResult方法中处理是一个办法，但这样处理有一个问题，如果用户直接按返回键回到登录页面，onActivityResult方法发现数据为空就不会处理。
这个问题其实不难，只要认真看书，结合前面关于Activity生命周期的说明，就能够找到解决办法。重写onRestart方法（确保是返回页面），在方法内部加上清空密码框的处理即可。这样一来，无论用户是修改完密码回到登录页，还是点击返回键回到登录页，App都会自动清空密码框。
3.6.2 小知识：提醒对话框AlertDialog
使用验证码登录时，App要向用户手机发送短信验证码，但发送短信需要服务器支持，所以这里暂时使用随机数模拟验证码，然后以对话框的形式在界面上提示用户。另外，在登录的过程中，App时常需要弹窗提示用户选择“是”或“否”，以此判断下一步的处理逻辑。在本实战项目开始之前，建议读者先演练一下提醒对话框（AlertDialog）的用法。
AlertDialog是Android中最常用的对话框，可以完成常见的交互操作，如提示、确认、选择等功能。AlertDialog没有公开的构造函数，必须借助AlertDialog.Builder才能完成参数设置，AlertDialog.Builder的常用方法如下。
● setIcon：设置标题的图标。
● setTitle：设置标题的文本。
● setMessage：设置内容的文本。
● setPositiveButton：设置肯定按钮的信息，包括按钮文本和点击监听器。
● setNegativeButton：设置否定按钮的信息，包括按钮文本和点击监听器。
● setNeutralButton：设置中性按钮的信息，包括按钮文本和点击监听器，该方法比较少用。
通过AlertDialog.Builder设置完参数，还需调用create方法才能生成AlertDialog对象。最后调用AlertDialog对象的show方法，在页面上弹出提醒对话框。
下面是个提醒对话框的代码：
public void onClick(View v) {
if (v.getId() == R.id.btn_alert) {
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("尊敬的用户");
builder.setMessage("你真的要卸载我吗？");
builder.setPositiveButton("残忍卸载", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
tv_alert.setText("虽然依依不舍，但是只能离开了");
}
});
builder.setNegativeButton("我再想想", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
tv_alert.setText("让我再陪你三百六十五个日夜");
}
});
AlertDialog alert = builder.create();
alert.show();
}
}
提醒对话框的弹窗效果如图3-29所示，该对话框有标题、有内容，还有两个按钮。
图3-29 AlertDialog的效果图
用户点击不同的按钮会触发不同的处理逻辑。图3-30所示为点击“我再想想”按钮后的页面，图3-31所示为点击“残忍卸载”按钮后的页面。
图3-30 点击“我再想想”的截图
图3-31 点击“残忍卸载”的截图
3.6.3 代码示例
前面的设计不但给出了两个页面的效果图，而且给出了业务逻辑的大概思路，接下来主要是编码将其实现。编码过程分为3个步骤：
步骤01 先想好代码文件与布局文件的名称，比如登录页面的代码文件取名LoginMainActivity.java，布局文件取名activity_login.xml；找回密码页面的代码文件取名LoginForgetActivity.java，布局文件取名activity_login_forget.xml。记得在AndroidManifest.xml中注册两个页面的acitivity节点，注册代码如下：
<activity android:name=".LoginMainActivity" />
<activity android:name=".LoginForgetActivity" />
步骤02 在res/layout目录下创建布局文件activity_login.xml和activity_login_forget.xml，根据页面效果图编写两个页面的布局定义文件。
步骤03 在项目的包名目录下创建类LoginMainActivity和LoginForgetActivity，填入具体的控件操作与业务逻辑代码。
下面是登录页面LoginMainActivity.java的主要代码片段：
public void onClick(View v) {
String phone = et_phone.getText().toString();
if (v.getId() == R.id.btn_forget) {
if (phone==null || phone.length()<11) {
Toast.makeText(this, "请输入正确的手机号", Toast.LENGTH_SHORT).show();
return;
}
if (rb_password.isChecked() == true) {
Intent intent = new Intent(this, LoginForgetActivity.class);
intent.putExtra("phone", phone);
startActivityForResult(intent, mRequestCode);
} else if (rb_verifycode.isChecked() == true) {
mVerifyCode = String.format("%06d", (int)(Math.random()*1000000%1000000));
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("请记住验证码");
builder.setMessage("手机号"+phone+"，本次验证码是"+mVerifyCode+"，请输入验证码");
builder.setPositiveButton("好的", null);
AlertDialog alert = builder.create();
alert.show();
}
} else if (v.getId() == R.id.btn_login) {
if (phone==null || phone.length()<11) {
Toast.makeText(this, "请输入正确的手机号", Toast.LENGTH_SHORT).show();
return;
}
if (rb_password.isChecked() == true) {
if (et_password.getText().toString().equals(mPassword) ! = true) {
Toast.makeText(this, "请输入正确的密码", Toast.LENGTH_SHORT).show();
return;
} else {
loginSuccess();
}
} else if (rb_verifycode.isChecked() == true) {
if (et_password.getText().toString().equals(mVerifyCode) ! = true) {
Toast.makeText(this, "请输入正确的验证码", Toast.LENGTH_SHORT).show();
return;
} else {
loginSuccess();
}
}
}
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == mRequestCode && data! =null) {
//用户密码已改为新密码
mPassword = data.getStringExtra("new_password");
}
}
//从修改密码页面返回登录页面，要清空密码的输入框
@Override
protected void onRestart() {
et_password.setText("");
super. onRestart();
}
private void loginSuccess() {
String desc = String.format("您的手机号码是%s，类型是%s。恭喜你通过登录验证，点击“确
定”按钮返回上个页面", et_phone.getText().toString(), typeArray[mType]);
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("登录成功");
builder.setMessage(desc);
builder.setPositiveButton("确定返回", new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface dialog, int which){
finish();
}
});
builder.setNegativeButton("我再看看", null);
AlertDialog alert=builder.create();
alert.show();
}
下面是找回密码页面LoginForgetActivity.java的代码：
public class LoginForgetActivity extends AppCompatActivity implements OnClickListener {
private EditText et_password_first;
private EditText et_password_second;
private EditText et_verifycode;
private String mVerifyCode;
private String mPhone;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login_forget);
et_password_first = (EditText) findViewById(R.id.et_password_first);
et_password_second = (EditText) findViewById(R.id.et_password_second);
et_verifycode = (EditText) findViewById(R.id.et_verifycode);
findViewById(R.id.btn_verifycode).setOnClickListener(this);
findViewById(R.id.btn_confirm).setOnClickListener(this);
mPhone = getIntent().getStringExtra("phone");
}
@Override
public void onClick(View v) {
if (v.getId() == R.id.btn_verifycode) {
if (mPhone==null || mPhone.length()<11) {
Toast.makeText(this, "请输入正确的手机号", Toast.LENGTH_SHORT).show();
return;
}
mVerifyCode = String.format("%06d", (int) (Math.random() * 1000000 % 1000000));
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("请记住验证码");
builder.setMessage("手机号"+mPhone+"，本次验证码是"+mVerifyCode+"，请输入验证码");
builder.setPositiveButton("好的", null);
AlertDialog alert = builder.create();
alert.show();
} else if (v.getId() == R.id.btn_confirm) {
String password_first = et_password_first.getText().toString();
String password_second = et_password_second.getText().toString();
if (password_first==null || password_first.length()<6 ||
password_second==null || password_second.length()<6) {
Toast.makeText(this, "请输入正确的新密码", Toast.LENGTH_SHORT).show();
return;
} else if (password_first.equals(password_second) ! = true) {
Toast.makeText(this, "两次输入的新密码不一致", Toast.LENGTH_SHORT).show();
return;
} else if (et_verifycode.getText().toString().equals(mVerifyCode) ! = true) {
Toast.makeText(this, "请输入正确的验证码", Toast.LENGTH_SHORT).show();
return;
} else {
Toast.makeText(this, "密码修改成功", Toast.LENGTH_SHORT).show();
Intent intent = new Intent();
intent.putExtra("new_password", password_first);
setResult(Activity.RESULT_OK, intent);
finish();
}
}
}
}