运行有问题或需要源码请点赞关注收藏后评论区留言
一、需求描述
各家电商App的登录页面大同小异,要么是用户名与密码组合登录,要么是手机号码与验证码组合登录。若是做好一点的,则会提供找回密码与记住密码等功能,先来看一下登录页面是说明样, 因为有两种组合登录方法,分别是通过密码和验证码验证 效果如下
如果是密码登录则需要支持找回密码,如果是验证码回答则需要支持向用户手机发送验证码
密码登录可以提供记住密码功能,而验证码的数值每次都不一样 所以不用记住
对于找回密码功能 一般在直接跳到找回密码页面,在该页面输入和确认新密码,并校验找回密码的合法性。
二、界面设计
用户登录与找回密码界面看似简单,用到的控件却不少,以下控件基本都用上了
单选按钮
文本视图
编辑框
复选框
按钮
线性布局
相对布局
单选组
提醒对话框
三、关键部分
1:需要自动清空错误的密码
2:关于自动隐藏输入法面板
3:关于密码修改的校验操作
满足以下四个条件
1:新密码和确认输入的新密码必须保持一致
2:用户输入的验证码必须和系统下发的一致
3:密码修改成功 带着新密码返回登录页面
4:位数一致文章来源:https://www.toymoban.com/news/detail-401938.html
四、代码部分
LoginMainActivity类
package com.example.chapter05;
import android.annotation.SuppressLint;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.example.chapter05.util.ViewUtil;
import java.util.Random;
@SuppressLint("DefaultLocale")
public class LoginMainActivity extends AppCompatActivity implements View.OnClickListener {
private RadioGroup rg_login; // 声明一个单选组对象
private RadioButton rb_password; // 声明一个单选按钮对象
private RadioButton rb_verifycode; // 声明一个单选按钮对象
private EditText et_phone; // 声明一个编辑框对象
private TextView tv_password; // 声明一个文本视图对象
private EditText et_password; // 声明一个编辑框对象
private Button btn_forget; // 声明一个按钮控件对象
private CheckBox ck_remember; // 声明一个复选框对象
private int mRequestCode = 0; // 跳转页面时的请求代码
private boolean bRemember = false; // 是否记住密码
private String mPassword = "111111"; // 默认密码
private String mVerifyCode; // 验证码
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login_main);
rg_login = findViewById(R.id.rg_login);
rb_password = findViewById(R.id.rb_password);
rb_verifycode = findViewById(R.id.rb_verifycode);
et_phone = findViewById(R.id.et_phone);
tv_password = findViewById(R.id.tv_password);
et_password = findViewById(R.id.et_password);
btn_forget = findViewById(R.id.btn_forget);
ck_remember = findViewById(R.id.ck_remember);
// 给rg_login设置单选监听器
rg_login.setOnCheckedChangeListener(new RadioListener());
// 给ck_remember设置勾选监听器
ck_remember.setOnCheckedChangeListener(new CheckListener());
// 给et_phone添加文本变更监听器
et_phone.addTextChangedListener(new HideTextWatcher(et_phone, 11));
// 给et_password添加文本变更监听器
et_password.addTextChangedListener(new HideTextWatcher(et_password, 6));
btn_forget.setOnClickListener(this);
findViewById(R.id.btn_login).setOnClickListener(this);
}
// 定义登录方式的单选监听器
private class RadioListener implements RadioGroup.OnCheckedChangeListener {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
if (checkedId == R.id.rb_password) { // 选择了密码登录
tv_password.setText("登录密码:");
et_password.setHint("请输入密码");
btn_forget.setText("忘记密码");
ck_remember.setVisibility(View.VISIBLE);
} else if (checkedId == R.id.rb_verifycode) { // 选择了验证码登录
tv_password.setText(" 验证码:");
et_password.setHint("请输入验证码");
btn_forget.setText("获取验证码");
ck_remember.setVisibility(View.INVISIBLE);
}
}
}
// 定义是否记住密码的勾选监听器
private class CheckListener implements CompoundButton.OnCheckedChangeListener {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (buttonView.getId() == R.id.ck_remember) {
bRemember = isChecked;
}
}
}
// 定义一个编辑框监听器,在输入文本达到指定长度时自动隐藏输入法
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); // 隐藏输入法软键盘
}
}
}
@Override
public void onClick(View v) {
String phone = et_phone.getText().toString();
if (v.getId() == R.id.btn_forget) { // 点击了“忘记密码”按钮
if (phone.length() < 11) { // 手机号码不足11位
Toast.makeText(this, "请输入正确的手机号", Toast.LENGTH_SHORT).show();
return;
}
if (rb_password.isChecked()) { // 选择了密码方式校验,此时要跳到找回密码页面
// 以下携带手机号码跳转到找回密码页面
Intent intent = new Intent(this, LoginForgetActivity.class);
intent.putExtra("phone", phone);
startActivityForResult(intent, mRequestCode); // 携带意图返回上一个页面
} else if (rb_verifycode.isChecked()) { // 选择了验证码方式校验,此时要生成六位随机数字验证码
// 生成六位随机数字的验证码
mVerifyCode = String.format("%06d", new Random().nextInt(999999));
// 以下弹出提醒对话框,提示用户记住六位验证码数字
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.length() < 11) { // 手机号码不足11位
Toast.makeText(this, "请输入正确的手机号", Toast.LENGTH_SHORT).show();
return;
}
if (rb_password.isChecked()) { // 密码方式校验
if (!et_password.getText().toString().equals(mPassword)) {
Toast.makeText(this, "请输入正确的密码", Toast.LENGTH_SHORT).show();
} else { // 密码校验通过
loginSuccess(); // 提示用户登录成功
}
} else if (rb_verifycode.isChecked()) { // 验证码方式校验
if (!et_password.getText().toString().equals(mVerifyCode)) {
Toast.makeText(this, "请输入正确的验证码", Toast.LENGTH_SHORT).show();
} else { // 验证码校验通过
loginSuccess(); // 提示用户登录成功
}
}
}
}
// 从下一个页面携带参数返回当前页面时触发
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == mRequestCode && data != null) {
// 用户密码已改为新密码,故更新密码变量
mPassword = data.getStringExtra("new_password");
}
}
// 从修改密码页面返回登录页面,要清空密码的输入框
@Override
protected void onRestart() {
super.onRestart();
et_password.setText("");
}
// 校验通过,登录成功
private void loginSuccess() {
String desc = String.format("您的手机号码是%s,恭喜你通过登录验证,点击“确定”按钮返回上个页面",
et_phone.getText().toString());
// 以下弹出提醒对话框,提示用户登录成功
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类
package com.example.chapter05;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import java.util.Random;
@SuppressLint("DefaultLocale")
public class LoginForgetActivity extends AppCompatActivity implements View.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的编辑框
et_password_first = findViewById(R.id.et_password_first);
// 从布局文件中获取名叫et_password_second的编辑框
et_password_second = findViewById(R.id.et_password_second);
// 从布局文件中获取名叫et_verifycode的编辑框
et_verifycode = 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", new Random().nextInt(999999));
// 以下弹出提醒对话框,提示用户记住六位验证码数字
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.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(); // 结束当前的活动页面
}
}
}
}
activity_login_mainXML
<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="5dp" >
<RadioGroup
android:id="@+id/rg_login"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/rb_password"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:checked="true"
android:gravity="left|center"
android:text="密码登录"
android:textColor="@color/black"
android:textSize="17sp" />
<RadioButton
android:id="@+id/rb_verifycode"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:checked="false"
android:gravity="left|center"
android:text="验证码登录"
android:textColor="@color/black"
android:textSize="17sp" />
</RadioGroup>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp" >
<TextView
android:id="@+id/tv_phone"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="手机号码:"
android:textColor="@color/black"
android:textSize="17sp" />
<EditText
android:id="@+id/et_phone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="@+id/tv_phone"
android:background="@drawable/editext_selector"
android:gravity="left|center"
android:hint="请输入手机号码"
android:inputType="number"
android:maxLength="11"
android:textColor="@color/black"
android:textColorHint="@color/grey"
android:textSize="17sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp" >
<TextView
android:id="@+id/tv_password"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="登录密码:"
android:textColor="@color/black"
android:textSize="17sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="@+id/tv_password" >
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:background="@drawable/editext_selector"
android:gravity="left|center"
android:hint="请输入密码"
android:inputType="numberPassword"
android:maxLength="6"
android:textColor="@color/black"
android:textColorHint="@color/grey"
android:textSize="17sp" />
<Button
android:id="@+id/btn_forget"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center"
android:text="忘记密码"
android:textColor="@color/black"
android:textSize="17sp" />
</RelativeLayout>
</RelativeLayout>
<CheckBox
android:id="@+id/ck_remember"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="@drawable/checkbox_selector"
android:checked="false"
android:padding="10dp"
android:text="记住密码"
android:textColor="@color/black"
android:textSize="17sp" />
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="登 录"
android:textColor="@color/black"
android:textSize="20sp" />
</LinearLayout>
activity_login_forgetXML
<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="5dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp" >
<TextView
android:id="@+id/tv_password_first"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="输入新密码:"
android:textColor="@color/black"
android:textSize="17sp" />
<EditText
android:id="@+id/et_password_first"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="@+id/tv_password_first"
android:background="@drawable/editext_selector"
android:gravity="left|center"
android:hint="请输入新密码"
android:inputType="numberPassword"
android:maxLength="11"
android:textColor="@color/black"
android:textColorHint="@color/grey"
android:textSize="17sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp" >
<TextView
android:id="@+id/tv_password_second"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="确认新密码:"
android:textColor="@color/black"
android:textSize="17sp" />
<EditText
android:id="@+id/et_password_second"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="@+id/tv_password_second"
android:background="@drawable/editext_selector"
android:gravity="left|center"
android:hint="请再次输入新密码"
android:inputType="numberPassword"
android:maxLength="11"
android:textColor="@color/black"
android:textColorHint="@color/grey"
android:textSize="17sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp" >
<TextView
android:id="@+id/tv_verifycode"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text=" 验证码:"
android:textColor="@color/black"
android:textSize="17sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="@+id/tv_verifycode" >
<EditText
android:id="@+id/et_verifycode"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:background="@drawable/editext_selector"
android:gravity="left|center"
android:hint="请输入验证码"
android:inputType="numberPassword"
android:maxLength="6"
android:textColor="@color/black"
android:textColorHint="@color/grey"
android:textSize="17sp" />
<Button
android:id="@+id/btn_verifycode"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center"
android:text="获取验证码"
android:textColor="@color/black"
android:textSize="17sp" />
</RelativeLayout>
</RelativeLayout>
<Button
android:id="@+id/btn_confirm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="确 定"
android:textColor="@color/black"
android:textSize="20sp" />
</LinearLayout>
创作不易 觉得有帮助请点赞关注收藏文章来源地址https://www.toymoban.com/news/detail-401938.html
到了这里,关于Android Studio APP实战开发之找回密码及忘记密码(附源码 超实用必看)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!