第4章我的模块.ppt

《第4章我的模块.ppt》由会员分享，可在线阅读，更多相关《第4章我的模块.ppt（50页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Android项目实战博学谷 第4章 我的模块 底部导航栏 修改密码 设置密保 找回密码 u 掌 握 底 部 导 航 栏 的 开 发 ， 并 能 实 现 设 置 界 面 ； u 掌 握 修 改 密 码 功 能 的 开 发 ， 实 现 用 户 密 码 的 修 改 ；u 掌握设置密保功能的开发，并且通过密保可以找回用户密码。 学习目标 4.1 “我”的界面4.2 设置主讲内容Speech content主讲内容4.3 修改密码4.4 设置密码和找回密码 4.1 “我”的界面任务综述任务综述根据“我”的界面设计图可知，该界面包含了用户头像、用户名、播放记录条目，设置条目和底部用于切换界面的导航栏。当

2、点击用户头像和用户名时会进入个人中心，点击播放记录条目时会进入查看播放记录的界面，点击设置条目时会进入设置界面。在底部导航栏中包含3个按钮，分别为课程、习题和我，这3个按钮是用于切换课程界面、习题界面和“我”的界面。由于3个界面的底部都包含了这3个按钮，因此可以创建一个底部导航栏框架方便每个界面使用。 4.1 “我”的界面【知识点】【知识点】 ImageView控件、TextView控件； SharedPreferences的使用。【技能点】【技能点】 掌握底部导航栏框架的设计和逻辑构思； 掌握如何获取和清除SharedPreferences中的数据； 学会搭建底部导航栏框架。 【任务4-】底

3、部导航栏任务分析任务分析根据前面介绍的设计图可知，此项目包含一个底部导航栏（即底部3个按钮），为了方便后续布局的搭建，因此创建一个底部导航栏UI的框架，界面效果如图4-1所示。 【任务4-】底部导航栏任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21） 【任务4-2】底部导航栏逻辑代码任务分析任务分析在底部导航栏中点击不同的按钮会进入不同的界面，因此需要为3个按钮添加监听事件。根据所在界面的不同，导航栏中的按钮和文字也有选中和未选中两种状态，因此需要创建方法来设置按钮的不同状态。在界面中间部分会根据按钮的选中状态切换不同的界面，因此需要创建相应的方法用于创建视图。 任务实施任务实

4、施任务步骤（任务步骤（详见教材详见教材P15P21）【任务4-2】底部导航栏逻辑代码 （6）读取和清除SharedPreferences中的登录状态 private void setSelectedStatus(int index) switch (index) case 0: mCourseBtn.setSelected(true); iv_course.setImageResource(R.drawable.main_course_icon_selected); tv_course.setTextColor(Color.parseColor(#0097F7); rl_title_bar.s

5、etVisibility(View.VISIBLE); tv_main_title.setText(博学谷课程); break; case 1: mExercisesBtn.setSelected(true); iv_exercises.setImageResource(R.drawable.main_exercises_icon_selected); tv_exercises.setTextColor(Color.parseColor(#0097F7); rl_title_bar.setVisibility(View.VISIBLE); tv_main_title.setText(博学谷习题

6、); break; case 2: . （6）读取和清除SharedPreferences中的登录状态 public boolean onKeyDown(int keyCode, KeyEvent event) if (keyCode = KeyEvent.KEYCODE_BACK & event.getAction() = KeyEvent.ACTION_DOWN) if (System.currentTimeMillis() - exitTime) 2000) Toast.makeText(MainActivity.this, 再按一次退出博学谷, Toast.LENGTH_SHORT).

7、show(); exitTime = System.currentTimeMillis(); else MainActivity.this.finish(); if (readLoginStatus() clearLoginStatus(); System.exit(0); return true; return super.onKeyDown(keyCode, event); 【任务4-3】“我”的界面 任务分析任务分析“我”的界面需要显示头像，用户名，播放记录条目，设置条目和底部导航栏，界面效果如图4-2所示。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务4-3

8、】“我”的界面 【任务4-4】AnalysisUtils工具类任务分析任务分析由于博学谷项目在保存和获取数据时会多次用到用户名，因此可以创建一个工具类AnalysisUtils用于获取用户名，便于后续调用。 package com.boxuegu.utils; import android.content.Context; import android.content.SharedPreferences; public class AnalysisUtils /* * 从SharedPreferences中读取登录用户名 */public static String readLoginUser

9、Name(Context context)SharedPreferences sp=context.getSharedPreferences(loginInfo, Context.MODE_PRIVATE);String userName=sp.getString(loginUserName, );/获取登录时的用户名return userName; 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务4-4】AnalysisUtils工具类 【任务4-5】我的界面逻辑代码任务分析任务分析在“我”的界面中需要判断用户是否登录，若用户已经登录则显示用户名，若用户未登录则显示“

10、点击登录”。若用户已经登录，当点击用户头像时会跳转到个人资料界面，点击播放记录条目时跳转到播放记录界面，点击设置条目时跳转到设置界面。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务4-5】我的界面逻辑代码 private MyInfoView mMyInfoView;在【任务4-2】MainActivity.java文件中的第40行代码下方添加如下代码在配置文件中将MainActivity的标签以及标签中的所有内容剪切到SplashActivity所在的标签中，如下所示 if (mMyInfoView = null) mMyInfoView = new MyInfo

11、View(this); mBodyLayout.addView(mMyInfoView.getView(); else mMyInfoView.getView(); mMyInfoView.showView();（4）修改底部导航栏 （5）修改登录成功时代码在【任务4-2】中MainActivity.java文件，在该文件中重写onActivityResult()方法，并导入对应的包，具体代码如下： if (mMyInfoView = null) mMyInfoView = new MyInfoView(this); mBodyLayout.addView(mMyInfoView.getVie

12、w(); else mMyInfoView.getView(); mMyInfoView.showView(); 4.1 “我”的界面4.2 设置主讲内容Speech content主讲内容4.3 修改密码4.4 设置密码和找回密码 4.2 设置任务综述任务综述在设置界面主要包含了修改密码、设置密保、退出登录等功能。当用户点击修改密码时会跳转到修改密码界面，当用户点击设置密保时会跳转到设置密保界面，当点击退出登录时会退出当前登录账号。 【知识点】【知识点】ImageView控件、TextView控件；SharedPreferences的使用；setResult(RESULT_OK, data)

13、方法的使用。【技能点】【技能点】 掌握设置界面的设计和逻辑构思； 掌握如何清除SharedPreferences中的数据； 通过setResult(RESULT_OK, data)方法实现界面间的数据回传功能； 实现博学谷的退出登录功能。4.2 设置 任务分析任务分析根据任务综述可知设置界面有3个功能，分别为修改密码、设置密保和退出登录，界面效果如图4-3所示。【任务4-6】设置界面 【任务4-6】设置界面任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21） 【任务4-7】设置界面逻辑代码任务分析任务分析在设置界面中添加点击事件，当点击修改密码时跳转到修改密码界面，当点击设置密保

14、时跳转到设置密保界面，当点击退出登录时清除登录状态和用户名，并且将退出的状态传递给MainActivity。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务4-7】设置界面逻辑代码 （2） 清除SharedPreferences中的 登录状态和登录时的用户名 /* * 清除SharedPreferences中的登录状态和登录时的用户名 */ private void clearLoginStatus() SharedPreferences sp=getSharedPreferences(loginInfo, Context.MODE_PRIVATE); SharedP

15、references.Editor editor=sp.edit(); /获取编辑器 editor.putBoolean(isLogin, false); /清除登录状态 editor.putString(loginUserName, ); /清除用户名 mit(); /提交修改 4.1 “我”的界面4.2 设置主讲内容Speech content主讲内容4.3 修改密码4.4 设置密码和找回密码 4.3 修改密码任务综述任务综述修改密码界面主要是让用户能够在必要时去修改密码，保证用户信息的安全性。修改密码需要输入一次原始密码和两次新密码来防止用户输入错误，密码修改成功后需要把SharedPr

16、eferences中用户的旧密码修改成新密码。 【知识点】【知识点】EditText控件、Button控件；SharedPreferences的使用。【技能点】【技能点】掌握修改密码界面的设计和逻辑构思；掌握如何修改SharedPreferences中的数据；实现博学谷的修改密码功能。4.3 修改密码 【任务4-8】修改密码界面 任务分析任务分析修改密码界面主要是让用户在必要时修改自己的原始密码，从而保证用户信息的安全性，界面效果如图4-4所示。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务4-8】修改密码界面 【任务4-9】修改密码界面逻辑代码任务分析任务分析根据

17、图4-4可知，修改密码界面主要用于输入原始密码、新密码、再次输入新密码。输入的原始密码与从SharedPreferences中读取的原始密码必须一致，输入的新密码与原始密码不能相同，再次输入的新密码与输入的新密码必须相同。以上条件都符合之后，点击保存按钮提示新密码设置成功，同时修改SharedPreferences中的原始密码。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务4-9】修改密码界面逻辑代码 /* * 获取控件上的字符串 */ private void getEditString() originalPsw=et_original_psw.getText(

18、).toString().trim(); newPsw=et_new_psw.getText().toString().trim(); newPswAgain=et_new_psw_again.getText().toString().trim(); （2）修改SharedPreferences中的原始密码 /* * 修改登录成功时保存在SharedPreferences中的密码 */ private void modifyPsw(String newPsw) String md5Psw= MD5Utils.md5(newPsw); /把密码用MD5加密 SharedPreferences s

19、p=getSharedPreferences(loginInfo, MODE_PRIVATE); SharedPreferences.Editor editor=sp.edit(); /获取编辑器 editor.putString(userName, md5Psw); /保存新密码 mit(); /提交修改 （2）修改SharedPreferences中的原始密码 4.1 “我”的界面4.2 设置主讲内容Speech content主讲内容4.3 修改密码4.4 设置密码和找回密码 4.4 设置密保和找回密码任务综述任务综述根据功能展示可知，设置密保界面和找回密码界面基本相同，同时两个界面的代

20、码逻辑也十分相似，因此这两个界面可以使用同一个布局文件，也可以使用同一个Activity来处理逻辑代码。设置密保主要是将当前用户输入的姓名作为密保，找回密码是根据用户输入的用户名和密保姓名将该用户的密码重置为初始密码123456（由于之前保存的密码是经过MD5加密的，MD5是不可逆的，所以之前的密码不能获取明文）。 【知识点】【知识点】EditText控件、TextView控件、Button控件；SharedPreferences的使用。【技能点】【技能点】掌握设置密保和找回密码界面的设计和逻辑构思；掌握如何获取和修改SharedPreferences中的数据；实现博学谷的设置密保功能；实现博

21、学谷的找回密码功能。4.4 设置密保和找回密码 【任务4-10】设置密保和找回密码界面 任务分析任务分析设置密保界面主要用于输入要设为密保的姓名，找回密码界面可以根据用户当前输入的用户名和设为密保的姓名找回密码，界面效果如图4-5所示。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务4-10】设置密保和找回密码界面 【任务4-11】设置密保与找回密码界面逻辑代码任务分析任务分析根据任务综述可知，设置密保界面和找回密码界面用的同一个Activity，在这个Activity中主要是根据从设置界面和登录界面传递过来的from参数的值来判断要跳转到哪个界面，若值为securi

22、ty则处理的是设置密保的界面，否则处理的就是找回密码的界面。设置密保界面的逻辑主要是保存用户输入的姓名到SharedPreferences中，找回密码界面的逻辑主要是把SharedPreferences中用户名对应的原始密码修改为123456。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务4-11】设置密保与找回密码界面逻辑代码 /* * 保存初始化的密码 */ private void savePsw(String userName) String md5Psw= MD5Utils.md5(123456); /把密码用Md5加密 SharedPreferences

23、 sp=getSharedPreferences(loginInfo, MODE_PRIVATE); SharedPreferences.Editor editor=sp.edit();/获取编辑器 editor.putString(userName, md5Psw); mit(); /提交修改 （3）保存初始化密码到SharedPreferences中 /* * 保存密保到SharedPreferences中 */ private void saveSecurity(String validateName) SharedPreferences sp=getSharedPreferences(

24、loginInfo, MODE_PRIVATE); SharedPreferences.Editor editor=sp.edit();/获取编辑器 editor.putString(AnalysisUtils.readLoginUserName(this)+_security, validateName); /存入用户对应的密保 mit(); /提交修改 （3）保存初始化密码到SharedPreferences中 /* * 从SharedPreferences中读取密保 */ private String readSecurity(String userName) SharedPrefere

25、nces sp=getSharedPreferences(loginInfo, Context.MODE_PRIVATE); String security=sp.getString(userName+_security, ); return security; （3）保存初始化密码到SharedPreferences中 /* * 从SharedPreferences中根据用户输入的用户名来判断是否有此用户 */ private boolean isExistUserName(String userName) boolean hasUserName=false; SharedPreferenc

26、es sp=getSharedPreferences(loginInfo, MODE_PRIVATE); String spPsw=sp.getString(userName, ); if(!TextUtils.isEmpty(spPsw) hasUserName=true; return hasUserName; （3）保存初始化密码到SharedPreferences中 本章主要讲解了底部导航栏，设置界面、修改密码、设置密保、找回密码等功能。读者通过本章的学习，可以掌握界面的搭建过程以及简单的界面开发与数据存储。 4.5 本章小结 1. 请思考博学谷项目中如何实现底部导航栏？ 2. 请思考博学谷项目中如何设置密保？思考题