在开发Android应用时，登录界面是用户与应用交互的第一步，设计一个既安全又用户友好的登录界面至关重要。本文将基于Android Studio实现一个包含密码登录、验证码登录、获取验证码、找回密码以及记住密码功能的登录界面。
目录
1. 准备工作
1.1 环境搭建
确保你的开发环境已经安装了Android Studio，并配置了相应的Android SDK。
1.2 项目创建
在Android Studio中创建一个新的Android项目，选择Empty Activity作为起始模板。
2. 设计登录界面
values和drawable中的配置文件按需求自定义即可，本文不一一粘贴了，如有需求欢迎私信
2.1 登录界面XML布局
在res/layout/activity_main.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">
<RadioGroup
android:id="@+id/rg_login"
android:layout_width="match_parent"
android:layout_height="@dimen/item_layout_height"
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:text="@string/login_by_password"
android:textColor="@color/black"
android:textSize="@dimen/common_font_size" />
<RadioButton
android:id="@+id/rb_verifycode"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="@string/login_by_verifycode"
android:textColor="@color/black"
android:textSize="@dimen/common_font_size" />
</RadioGroup>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/item_layout_height"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_phone"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/phone_number"
android:textColor="@color/black"
android:textSize="@dimen/common_font_size" />
<EditText
android:id="@+id/et_phone"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_weight="1"
android:background="@drawable/editext_selector"
android:hint="@string/input_phone_number"
android:inputType="number"
android:maxLength="11"
android:textColor="@color/black"
android:textColorHint="@color/grey"
android:textSize="@dimen/common_font_size" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/item_layout_height"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_password"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/login_password"
android:textColor="@color/black"
android:textSize="@dimen/common_font_size" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_weight="1"
android:background="@drawable/editext_selector"
android:hint="@string/input_password"
android:inputType="numberPassword"
android:maxLength="11"
android:textColor="@color/black"
android:textColorHint="@color/grey"
android:textSize="@dimen/common_font_size" />
<Button
android:id="@+id/btn_forget_password"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:text="@string/forget_password"
android:textColor="@color/black"
android:textSize="@dimen/common_font_size" />
</RelativeLayout>
</LinearLayout>
<CheckBox
android:id="@+id/ck_remember_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="@drawable/checkbox_selector"
android:text="@string/remember_password"
android:textColor="@color/black"
android:textSize="@dimen/common_font_size" />
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/login"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size"/>
</LinearLayout>
2.2 忘记密码界面XML布局
在res/layout/activity_forget.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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/item_layout_height"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/input_new_password"
android:textColor="@color/black"
android:textSize="@dimen/common_font_size" />
<EditText
android:id="@+id/et_password_first"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_weight="1"
android:background="@drawable/editext_selector"
android:hint="@string/input_new_password_hint"
android:inputType="numberPassword"
android:maxLength="11"
android:textColor="@color/black"
android:textColorHint="@color/grey"
android:textSize="@dimen/common_font_size" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/item_layout_height"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/confirm_new_password"
android:textColor="@color/black"
android:textSize="@dimen/common_font_size" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<EditText
android:id="@+id/et_password_second"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_weight="1"
android:background="@drawable/editext_selector"
android:hint="@string/input_new_password_again"
android:inputType="numberPassword"
android:maxLength="11"
android:textColor="@color/black"
android:textColorHint="@color/grey"
android:textSize="@dimen/common_font_size" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/item_layout_height"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/verifycode2"
android:textColor="@color/black"
android:textSize="@dimen/common_font_size" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<EditText
android:id="@+id/et_verifycode"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_weight="1"
android:background="@drawable/editext_selector"
android:hint="@string/input_verifycode"
android:inputType="numberPassword"
android:maxLength="11"
android:textColor="@color/black"
android:textColorHint="@color/grey"
android:textSize="@dimen/common_font_size" />
<Button
android:id="@+id/btn_verifycode"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:text="@string/get_verifycode"
android:textColor="@color/black"
android:textSize="@dimen/common_font_size" />
</RelativeLayout>
</LinearLayout>
<Button
android:id="@+id/btn_confirm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/done"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size"/>
</LinearLayout>
3. 实现功能
3.1 LoginMainActivity.java
登录界面业务逻辑
package com.example.login_view;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;
import androidx.activity.result.ActivityResult;
import androidx.activity.result.ActivityResultCallback;
import androidx.activity.result.ActivityResultLauncher;
import androidx.activity.result.contract.ActivityResultContracts;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import com.example.login_view.utils.ViewUtil;
import java.util.Random;
public class LoginMainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener, View.OnClickListener {
private TextView tv_password;
private EditText et_password;
private Button btn_forget;
private CheckBox ck_remember;
private EditText et_phone;
private RadioButton rb_password;
private RadioButton rb_verifycode;
private ActivityResultLauncher<Intent> register;
private Button btn_login;
private String mPassword = "111111";
private String mVerifyCode;
private SharedPreferences preferences;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login_main);
RadioGroup rg_login = findViewById(R.id.rg_login);
tv_password = findViewById(R.id.tv_password);
et_phone = findViewById(R.id.et_phone);
et_password = findViewById(R.id.et_password);
btn_forget = findViewById(R.id.btn_forget_password);
ck_remember = findViewById(R.id.ck_remember_password);
rb_password = findViewById(R.id.rb_password);
rb_verifycode = findViewById(R.id.rb_verifycode);
btn_login = findViewById(R.id.btn_login);
//设置单选按钮的监听器
rg_login.setOnCheckedChangeListener(this);
et_phone.addTextChangedListener(new HideTextWatcher(et_phone, 11));
et_password.addTextChangedListener(new HideTextWatcher(et_password, 6));
btn_forget.setOnClickListener(this);
btn_login.setOnClickListener(this);
register = registerForActivityResult(new ActivityResultContracts.StartActivityForResult(), new ActivityResultCallback<ActivityResult>() {
@Override
public void onActivityResult(ActivityResult result) {
Intent intent = result.getData();
if (intent != null && result.getResultCode() == Activity.RESULT_OK) {
//更新密码
mPassword = intent.getStringExtra("new_password");
}
}
});
preferences = getSharedPreferences("config", Context.MODE_PRIVATE);
reload();
}
private void reload() {
boolean isRemember = preferences.getBoolean("is_remember", false);
if (isRemember) {
String phone = preferences.getString("phone", "");
String password = preferences.getString("password", "");
et_phone.setText(phone);
et_password.setText(password);
ck_remember.setChecked(true);
}
}
//单选按钮的点击事件
@Override
public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
//如果选中了密码登录
if (checkedId == R.id.rb_password) {
//设置文本
tv_password.setText(getString(R.string.login_password));
//设置输入框的提示
et_password.setHint(getString(R.string.input_password));
//设置按钮的文本
btn_forget.setText(getString(R.string.forget_password));
//隐藏记住密码的复选框
ck_remember.setVisibility(View.VISIBLE);
}
//如果选中了验证码登录
else if (checkedId == R.id.rb_verifycode) {
//设置文本
tv_password.setText(getString(R.string.verifycode));
//设置输入框的提示
et_password.setHint(getString(R.string.input_verifycode));
//设置按钮的文本
btn_forget.setText(getString(R.string.get_verifycode));
//隐藏记住密码的复选框
ck_remember.setVisibility(View.GONE);
}
}
@Override
public void onClick(View view) {
Log.d("panbug", "log");
String phone = et_phone.getText().toString();
Log.d("panbug", "log2");
//判断手机号是否为空
if (phone.length() < 11) {
Toast.makeText(this, "请输入正确的手机号", Toast.LENGTH_SHORT).show();
Log.d("panbug", "log3");
return;
}
if (view.getId() == R.id.btn_forget_password) {
//如果选中了密码登录,跳到找回密码界面
if (rb_password.isChecked()) {
//携带手机号码跳转到找回密码界面
Intent intent = new Intent(this, LoginForgetActivity.class);
intent.putExtra("phone", phone);
register.launch(intent);
} 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 dialog = builder.create();
dialog.show();
}
} else if (view.getId() == R.id.btn_login) {
//密码方式校验
if (rb_password.isChecked()) {
if (!mPassword.equals(et_password.getText().toString())) {
Toast.makeText(this, "请输入正确密码", Toast.LENGTH_SHORT).show();
} else {
loginSuccess();
}
} else if (rb_verifycode.isChecked()) {
if (mVerifyCode == null) {
Toast.makeText(this, "请获取验证码", Toast.LENGTH_SHORT).show();
}
//验证码校验
else if (!mVerifyCode.equals(et_password.getText().toString())) {
Toast.makeText(this, "请输入正确验证码", Toast.LENGTH_SHORT).show();
} else {
loginSuccess();
}
}
}
}
//模拟登录成功
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("确定返回", (dialog, which) -> {
//TODO
finish();
});
builder.setNegativeButton("取消", null);
AlertDialog dialog = builder.create();
dialog.show();
if (ck_remember.isChecked()) {
SharedPreferences.Editor editor = preferences.edit();
editor.putString("phone", et_phone.getText().toString());
editor.putString("password", et_password.getText().toString());
editor.putBoolean("is_remember", ck_remember.isChecked());
editor.commit();
}
}
//自定义一个文本输入框的监听器，用于隐藏输入法
private class HideTextWatcher implements TextWatcher {
private EditText mView;
private int mMaxLength;
public HideTextWatcher(EditText v, int maxLength) {
this.mView = v;
this.mMaxLength = maxLength;
}
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void afterTextChanged(Editable editable) {
if (editable.toString().length() == mMaxLength) {
//隐藏输入法
ViewUtil.hideOneInputMethod(LoginMainActivity.this, mView);
}
}
}
}
3.2 LoginMainActivity.java
忘记密码页面业务逻辑
package com.example.login_view;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import java.util.Random;
public class LoginForgetActivity extends AppCompatActivity implements View.OnClickListener {
private String mPhone;
private String mVerifyCode = "";
private EditText et_password_first;
private EditText et_password_second;
private EditText et_verifycode;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login_forget);
//从上一个页面获取要修改的手机密码
mPhone = getIntent().getStringExtra("phone");
et_verifycode = findViewById(R.id.et_verifycode);
et_password_first = findViewById(R.id.et_password_first);
et_password_second = findViewById(R.id.et_password_second);
findViewById(R.id.btn_verifycode).setOnClickListener(this);
findViewById(R.id.btn_confirm).setOnClickListener(this);
}
@Override
public void onClick(View view) {
//生成验证码
if (view.getId() == R.id.btn_verifycode) {
//如果选中了验证码登录，生成六位随机验证码
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 dialog = builder.create();
dialog.show();
}
//点击确认按钮
if (view.getId() == R.id.btn_confirm) {
String password_first = et_password_first.getText().toString();
String password_second = et_password_second.getText().toString();
if (password_first.isEmpty() || password_second.isEmpty()) {//判断密码是否为空
Toast.makeText(this, "请输入密码", Toast.LENGTH_SHORT).show();
return;
}
if (et_verifycode.getText().toString().isEmpty()) {//判断验证码是否为空
Toast.makeText(this, "请输入验证码", Toast.LENGTH_SHORT).show();
return;
}
//判断密码长度合法
if (password_first.length() < 6) {
Toast.makeText(this, "请输入大于6位密码", Toast.LENGTH_SHORT).show();
return;
}
//判断两次输入的密码是否一致
if (!password_first.equals(password_second)) {//密码一致，修改密码
Toast.makeText(this, "两次输入的密码不一致", Toast.LENGTH_SHORT).show();
return;
}
Log.d("panbug", "onClick: " + mVerifyCode + " " + et_verifycode.getText().toString());
Log.d("panbug", "onClick: " + mVerifyCode.equals(et_verifycode.getText().toString()));
//判断验证码是否正确
if (!mVerifyCode.equals(et_verifycode.getText().toString())) {
Toast.makeText(this, "验证码错误", Toast.LENGTH_SHORT).show();
return;
} else {
Intent intent = new Intent();
intent.putExtra("new_password", password_first);
setResult(Activity.RESULT_OK, intent);
//验证码正确，修改密码
Toast.makeText(this, "密码修改成功", Toast.LENGTH_SHORT).show();
finish();
}
}
}
}
3.3工具类ViewUtil
package com.example.login_view.utils;
import android.app.Activity;
import android.content.Context;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
public class ViewUtil {
public static void hideOneInputMethod(Activity activity, View view) {
// 获取输入法管理器
InputMethodManager imm = (InputMethodManager) activity.getSystemService(Context.INPUT_METHOD_SERVICE);
// 隐藏输入法软键盘
imm.hideSoftInputFromWindow(view.getWindowToken(), 0);
}
}
4. 页面预览
扫一扫
1340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
