AndroidStudio制作登录和注册功能的实现,界面的布局介绍
AndroidStudio制作登录和注册功能的实现,界面的布局介绍。
设计思路
设计思路
当我们面临制作登录和注册功能的实现时,我们需要先设计登录界面的布局和注册界面的布局,做到有完整的思路时才开始实现其功能效果会更好。
我们需要做个标题栏,登陆界面,实现登陆界面的功能代码块,注册界面,实现测试界面的功能模块即可完成。
标题栏的设计思路
标题栏的设计思路
每个APP都基本上有个标题栏,即是显示标题,标题栏的两侧大多数都有一个返回建。那么标题栏即是一个返回键和一个标题栏的制作布局。
为了避免大多数代码的冗杂,我们把这个标题栏的制作布局独立起来,标题的显示我们可以在每块主题模块上,用
setText()方法来显示不同的标题。
接下来我们创建
main_title_bar.xml布局文件:
具体代码如下:
补充:
补充:
现在标题栏布局做好了,我们需要了解怎么换图片,就是在
android:background="@drawable/go_back_selector",其实就是在drawable中创建这个
go_back_selector.xml文件而已,用到了
android:state_pressed="true"这个属性,当点击时就是变化的图片效果,记住state_pressed就OK。
登录界面布局
登录界面布局
创建登录界面,我们需要标题栏显示“登录”,那么就要通过
我们需要设计想好美化登录界面,需要以下图片:登录背景图片
login_bg.png,默认的头像图片
default_icon,输入用户名的背景图片
login_user_name_bg,在用户名前需要一个小标图
user_name_icon,同理,输入密码框需要图片有
login_psw_bg,psw_icon,按钮需要图片加以美观
register_selector,根据需要的图片可自行制作。
登录界面布局模块代码
登录界面布局模块代码
创建activity_login.xml布局文件,具体代码如下:
同理注册界面布局设计思路
同理注册界面布局设计思路
创建注册界面,我们需要标题栏显示“注册”,那么就要通过
注册界面思路图
注册布局模块代码
注册布局模块代码
创建activity_register.xml布局文件,具体代码如下:
MD5算法
MD5算法
MD5 为 Message-Digest Algorithm 5(信息--摘要算法),记住几个要点就可以了。
Message
Digest
MessageDigest
-
MessageDigest.getInstance( );
由于注册登录涉及密码,我们需要对用户的密码进行 MD5 算法加密,MD5 算法是把任意长度的字符串变成固定长度(通常是128位)的16进制字符串,且此算法不可逆。具体代码如下:
package cn.edu.gdmec.android.androidstudiodemo.utils; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MD5Utils { //md5 加密算法 public static String md5(String text) { MessageDigest digest = null; try { digest = MessageDigest.getInstance("md5"); // 数组 byte[] result -> digest.digest( ); 文本 text.getBytes(); byte[] result = digest.digest(text.getBytes()); //创建StringBuilder对象 然后建议StringBuffer,安全性高 //StringBuilder sb = new StringBuilder(); StringBuffer sb = new StringBuffer(); // result数组,digest.digest ( ); -> text.getBytes(); // for 循环数组byte[] result; for (byte b : result){ // 0xff 为16进制 int number = b & 0xff; // number值 转换 字符串 Integer.toHexString( ); String hex = Integer.toHexString(number); if (hex.length() == 1){ sb.append("0"+hex); }else { sb.append(hex); } } //sb StringBuffer sb = new StringBuffer();对象实例化 return sb.toString(); } catch (NoSuchAlgorithmException e) { e.printStackTrace(); //发送异常return空字符串 return ""; } } }
实现注册逻辑功能代码
完成注册页面的布局与 MD5 工具类后,进行注册界面的逻辑编写。
当在注册界面点击注册按钮后,需要获取用户名,用户密码和再次确认密码,当两次密码相同时,将用户名和密码(经过 MD5 加密)保存到 SharedPreferences 中,同时当注册成功后,需要将用户名传递到登录界面中。
RegisterActivity.java具体代码如下:
package cn.edu.gdmec.android.androidstudiodemo; import android.content.Intent; import android.content.SharedPreferences; import android.content.pm.ActivityInfo; import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.text.TextUtils; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.RelativeLayout; import android.widget.TextView; import android.widget.Toast; import cn.edu.gdmec.android.androidstudiodemo.utils.MD5Utils; public class RegisterActivity extends AppCompatActivity { private TextView tv_main_title;//标题 private TextView tv_back;//返回按钮 private Button btn_register;//注册按钮 //用户名,密码,再次输入的密码的控件 private EditText et_user_name,et_psw,et_psw_again; //用户名,密码,再次输入的密码的控件的获取值 private String userName,psw,pswAgain; //标题布局 private RelativeLayout rl_title_bar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //设置页面布局 ,注册界面 setContentView(R.layout.activity_register); //设置此界面为竖屏 setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); init(); } private void init() { //从main_title_bar.xml 页面布局中获取对应的UI控件 tv_main_title=findViewById(R.id.tv_main_title); tv_main_title.setText("注册"); tv_back=findViewById(R.id.tv_back); //布局根元素 rl_title_bar=findViewById(R.id.title_bar); rl_title_bar.setBackgroundColor(Color.TRANSPARENT); //从activity_register.xml 页面中获取对应的UI控件 btn_register=findViewById(R.id.btn_register); et_user_name=findViewById(R.id.et_user_name); et_psw=findViewById(R.id.et_psw); et_psw_again=findViewById(R.id.et_psw_again); tv_back.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //返回键 RegisterActivity.this.finish(); } }); //注册按钮 btn_register.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //获取输入在相应控件中的字符串 getEditString(); //判断输入框内容 if(TextUtils.isEmpty(userName)){ Toast.makeText(RegisterActivity.this, "请输入用户名", Toast.LENGTH_SHORT).show(); return; }else if(TextUtils.isEmpty(psw)){ Toast.makeText(RegisterActivity.this, "请输入密码", Toast.LENGTH_SHORT).show(); return; }else if(TextUtils.isEmpty(pswAgain)){ Toast.makeText(RegisterActivity.this, "请再次输入密码", Toast.LENGTH_SHORT).show(); return; }else if(!psw.equals(pswAgain)){ Toast.makeText(RegisterActivity.this, "输入两次的密码不一样", Toast.LENGTH_SHORT).show(); return; /** *从SharedPreferences中读取输入的用户名,判断SharedPreferences中是否有此用户名 */ }else if(isExistUserName(userName)){ Toast.makeText(RegisterActivity.this, "此账户名已经存在", Toast.LENGTH_SHORT).show(); return; }else{ Toast.makeText(RegisterActivity.this, "注册成功", Toast.LENGTH_SHORT).show(); //把账号、密码和账号标识保存到sp里面 /** * 保存账号和密码到SharedPreferences中 */ saveRegisterInfo(userName, psw); //注册成功后把账号传递到LoginActivity.java中 // 返回值到loginActivity显示 Intent data = new Intent(); data.putExtra("userName", userName); setResult(RESULT_OK, data); //RESULT_OK为Activity系统常量,状态码为-1, // 表示此页面下的内容操作成功将data返回到上一页面,如果是用back返回过去的则不存在用setResult传递data值 RegisterActivity.this.finish(); } } }); } /** * 获取控件中的字符串 */ private void getEditString(){ userName=et_user_name.getText().toString().trim(); psw=et_psw.getText().toString().trim(); pswAgain=et_psw_again.getText().toString().trim(); } /** * 从SharedPreferences中读取输入的用户名,判断SharedPreferences中是否有此用户名 */ private boolean isExistUserName(String userName){ boolean has_userName=false; //mode_private SharedPreferences sp = getSharedPreferences( ); // "loginInfo", MODE_PRIVATE SharedPreferences sp=getSharedPreferences("loginInfo", MODE_PRIVATE); //获取密码 String spPsw=sp.getString(userName, "");//传入用户名获取密码 //如果密码不为空则确实保存过这个用户名 if(!TextUtils.isEmpty(spPsw)) { has_userName=true; } return has_userName; } /** * 保存账号和密码到SharedPreferences中SharedPreferences */ private void saveRegisterInfo(String userName,String psw){ String md5Psw = MD5Utils.md5(psw);//把密码用MD5加密 //loginInfo表示文件名, mode_private SharedPreferences sp = getSharedPreferences( ); SharedPreferences sp=getSharedPreferences("loginInfo", MODE_PRIVATE); //获取编辑器, SharedPreferences.Editor editor -> sp.edit(); SharedPreferences.Editor editor=sp.edit(); //以用户名为key,密码为value保存在SharedPreferences中 //key,value,如键值对,editor.putString(用户名,密码); editor.putString(userName, md5Psw); //提交修改 editor.commit(); editor.commit(); } }
实现登录逻辑功能代码
完成登录界面布局后,来实现登录界面的逻辑代码。
当点击登录按钮时,需判断用户名和密码是否为空。
若为空,则提示请输入用户名或密码,这里的判断事项比较一开始凌乱,需要细细品味;若不为空,则获取用户输入的用户名,由于用的是本地数据,需要根据用户名在 SharedPreferences 中查询是否有对应的密码,若有对应的密码且与用户输入的密码(需通过 MD5 加密)比对一致情况,则登录成功。
LoginActivity.java具体代码如下:
package cn.edu.gdmec.android.androidstudiodemo; import android.content.Intent; import android.content.SharedPreferences; import android.content.pm.ActivityInfo; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.text.TextUtils; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; import cn.edu.gdmec.android.androidstudiodemo.utils.MD5Utils; public class LoginActivity extends AppCompatActivity{ private TextView tv_main_title;//标题 private TextView tv_back,tv_register,tv_find_psw;//返回键,显示的注册,找回密码 private Button btn_login;//登录按钮 private String userName,psw,spPsw;//获取的用户名,密码,加密密码 private EditText et_user_name,et_psw;//编辑框 @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_login); //设置此界面为竖屏 setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); init(); } //获取界面控件 private void init() { //从main_title_bar中获取的id tv_main_title=findViewById(R.id.tv_main_title); tv_main_title.setText("登录"); tv_back=findViewById(R.id.tv_back); //从activity_login.xml中获取的 tv_register=findViewById(R.id.tv_register); tv_find_psw=findViewById(R.id.tv_find_psw); btn_login=findViewById(R.id.btn_login); et_user_name=findViewById(R.id.et_user_name); et_psw=findViewById(R.id.et_psw); //返回键的点击事件 tv_back.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //登录界面销毁 LoginActivity.this.finish(); } }); //立即注册控件的点击事件 tv_register.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //为了跳转到注册界面,并实现注册功能 Intent intent=new Intent(LoginActivity.this,RegisterActivity.class); startActivityForResult(intent, 1); } }); //找回密码控件的点击事件 tv_find_psw.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //跳转到找回密码界面(此页面暂未创建) } }); //登录按钮的点击事件 btn_login.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //开始登录,获取用户名和密码 getText().toString().trim(); userName=et_user_name.getText().toString().trim(); psw=et_psw.getText().toString().trim(); //对当前用户输入的密码进行MD5加密再进行比对判断, MD5Utils.md5( ); psw 进行加密判断是否一致 String md5Psw= MD5Utils.md5(psw); // md5Psw ; spPsw 为 根据从SharedPreferences中用户名读取密码 // 定义方法 readPsw为了读取用户名,得到密码 spPsw=readPsw(userName); // TextUtils.isEmpty if(TextUtils.isEmpty(userName)){ Toast.makeText(LoginActivity.this, "请输入用户名", Toast.LENGTH_SHORT).show(); return; }else if(TextUtils.isEmpty(psw)){ Toast.makeText(LoginActivity.this, "请输入密码", Toast.LENGTH_SHORT).show(); return; // md5Psw.equals(); 判断,输入的密码加密后,是否与保存在SharedPreferences中一致 }else if(md5Psw.equals(spPsw)){ //一致登录成功 Toast.makeText(LoginActivity.this, "登录成功", Toast.LENGTH_SHORT).show(); //保存登录状态,在界面保存登录的用户名 定义个方法 saveLoginStatus boolean 状态 , userName 用户名; saveLoginStatus(true, userName); //登录成功后关闭此页面进入主页 Intent data=new Intent(); //datad.putExtra( ); name , value ; data.putExtra("isLogin",true); //RESULT_OK为Activity系统常量,状态码为-1 // 表示此页面下的内容操作成功将data返回到上一页面,如果是用back返回过去的则不存在用setResult传递data值 setResult(RESULT_OK,data); //销毁登录界面 LoginActivity.this.finish(); //跳转到主界面,登录成功的状态传递到 MainActivity 中 startActivity(new Intent(LoginActivity.this, MainActivity.class)); return; }else if((spPsw!=null&&!TextUtils.isEmpty(spPsw)&&!md5Psw.equals(spPsw))){ Toast.makeText(LoginActivity.this, "输入的用户名和密码不一致", Toast.LENGTH_SHORT).show(); return; }else{ Toast.makeText(LoginActivity.this, "此用户名不存在", Toast.LENGTH_SHORT).show(); } } }); } /** *从SharedPreferences中根据用户名读取密码 */ private String readPsw(String userName){ //getSharedPreferences("loginInfo",MODE_PRIVATE); //"loginInfo",mode_private; MODE_PRIVATE表示可以继续写入 SharedPreferences sp=getSharedPreferences("loginInfo", MODE_PRIVATE); //sp.getString() userName, ""; return sp.getString(userName , ""); } /** *保存登录状态和登录用户名到SharedPreferences中 */ private void saveLoginStatus(boolean status,String userName){ //saveLoginStatus(true, userName); //loginInfo表示文件名 SharedPreferences sp=getSharedPreferences("loginInfo", MODE_PRIVATE); SharedPreferences sp=getSharedPreferences("loginInfo", MODE_PRIVATE); //获取编辑器 SharedPreferences.Editor editor=sp.edit(); //存入boolean类型的登录状态 editor.putBoolean("isLogin", status); //存入登录状态时的用户名 editor.putString("loginUserName", userName); //提交修改 editor.commit(); } /** * 注册成功的数据返回至此 * @param requestCode 请求码 * @param resultCode 结果码 * @param data 数据 */ @Override //显示数据, onActivityResult //startActivityForResult(intent, 1); 从注册界面中获取数据 //int requestCode , int resultCode , Intent data // LoginActivity -> startActivityForResult -> onActivityResult(); protected void onActivityResult(int requestCode, int resultCode, Intent data) { //super.onActivityResult(requestCode, resultCode, data); super.onActivityResult(requestCode, resultCode, data); if(data!=null){ //是获取注册界面回传过来的用户名 // getExtra().getString("***"); String userName=data.getStringExtra("userName"); if(!TextUtils.isEmpty(userName)){ //设置用户名到 et_user_name 控件 et_user_name.setText(userName); //et_user_name控件的setSelection()方法来设置光标位置 et_user_name.setSelection(userName.length()); } } } }
补充
如做了效果,需要在清单文件中实现该类,文件的跳转,可以自己了解一下。主要介绍注册模块,登录模块。里面的注解我写的如果有不全的或者错误点,可以联系讨论。
接下来你看到如上代码有点多,那么我们可以进行代码的优化来减少代码量。