《Android项目实战——博学谷》电子教案(全)完整版课件整套教学课件

《Android项目实战——博学谷》第1章项目综述·项目需求分析·项目效果展示了解博学谷项目的功能与模块结构；了解博学谷项目的界面交互效果；学习目标1.1项目分析1.2效果展示主讲内容Speechcontent主讲内容1.1.1项目名称项目名称博学谷自学助手1.1.2项目概述博学谷项目是一个学生端自学助手，每个学生都可以注册账号，然后通过博学谷项目来学习《Android移动开发基础案例教程》1-10章的教学视频，并在学习完成后通过章节习 题 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 进行自我测验，达到课下预习或者复习的效果。1.1.3开发环境操作系统：Windows系统开发工具：JDK8AndroidStudio2.2.2数据库：SQLite1.1.4模块说明博学谷项目主要分为三大功能模块，分别为课程模块、习题模块、用户模块。1.1项目分析1.2效果展示主讲内容Speechcontent主讲内容1.2.1欢迎界面和主界面程序启动成功后，首先会在欢迎界面停留几秒然后进入主界面，在主界面中点击底部导航栏可以进入习题界面或我的界面。单击进入单击进入1.2.2课程详情界面点击课程界面中的某个课程时，会进入课程详情界面，在该界面中可以查看课程简介，以及与课程配套的视频，当点击某个视频时，会自动播放已有的视频。单击切换单击切换1.2.3习题详情界面单击进入单击返回按钮在主界面中，单击导航栏中的“习题”时，会进入习题列表界面。单击该界面中的某个条目，会展示当前章节的所有习题，即可开始答题。1.2.4我的界面在主界面中，单击导航栏中的“我”时，会进入登录界面。如果没有登录账号则可以点击“立即注册”进行注册，如果已经有登录账号则输入正确的用户名和密码即可登录，若忘记密码则可以点击“找回密码”，将密码找回。单击进入单击进入单击进入单击进入在登录成功界面中，可以进入播放记录界面和设置界面，在设置界面中可以修改密码和设置密保。单击进入单击进入1.2.4我的界面本章主要是整体介绍了博学谷项目的功能、模块、以及项目效果，初学者只需在头脑中有个简单的了解即可，在接下来的章节中，会一一实现这些功能模块以及界面的设计。1.3本章小结1.请思考博学谷项目有几个主要模块？2.请思考博学谷项目中界面之间是如何跳转的？思考题《Android项目实战——博学谷》第2章界面设计·欢迎界面设计·课程界面设计·习题界面设计掌握Axure的使用，会使用Axure进行界面设计；掌握界面设计的思路，实现项目界面的设计；学会动态面板的组合使用，能够制作复杂的动态面板。学习目标2.1欢迎界面2.2课程界面主讲内容Speechcontent主讲内容2.3习题界面拖入图片元件设置欢迎界面背景图片，设置图片元件宽高。图片元件的宽应与手机屏幕宽度一致。2.1欢迎界面05Step03Step04Step02Step01Step创建页面，命名为“Splash”，在元件库中将Nexus6P设备外框图拖入工作区域。从元件库中将系统状态栏拖入工作区域中双击图片元件，将欢迎界面背景图片导入到图片元件，然后将图片元件移入设备边框中。将文本标签拖入工作区域，双击文本标签编辑文本显示版本号，并将文本颜色设置为白色。2.1欢迎界面2.2课程界面主讲内容Speechcontent主讲内容2.3习题界面创建页面并命名为“Course”，放入手机外框及系统导航栏，将屏幕背景设置为白色。将文本元件拖入工作区制作标题栏，设置宽高为360*50。2.2.1制作标题栏02Step01Step将文本标签的背景设为蓝色，内容设置为“博学谷课程”，字号设置为20，文本颜色设置为白色，位置设置为水平和垂直居中显示。2.2.2制作广告轮播图03Step04Step02Step01Step首先拖入一个图片元件，并将宽高设置为360*180。双击图片元件，添加第一张展示图。使用椭圆形元件，为轮播图添加3个小圆点，并设置椭圆形元件的填充色为蓝色。选中图片元件与3个椭圆形元件进行组合，之后将其转换为动态面板。返回课程界面，将制作好的动态面板放入课程界面中。2.2.2制作广告轮播图07Step08Step06Step05Step接下来再复制两个动态面板，然后双击State2面板，更改第2个面板中的展示图片，并将第2个椭圆形元件的填充颜色设置为蓝色，恢复第1个椭圆形元件的填充颜色为灰色。双击State3面板，更改第3个面板中的展示图片，并将第3个椭圆形元件的填充颜色设置为蓝色，恢复第2个椭圆形元件的填充颜色为灰色。添加动态面板交互事件，实现图片轮播效果。选择载入时添加交互时间，将动态面板状态设置为“Next”，勾选向后循环，设置循环间隔时间2000毫秒，勾选并设置进入动画为“向左滑动”。向工作区域拖入一个图片元件，放置视频列表图标，并将宽高设置为30*30。将视频列表图标放入课程界面中，与视频标题文本水平对齐，且坐标为x=28,y=331。2.2.3制作课程列表标题03Step04Step02Step01Step在工作区域中，拖入一个文本标签，展示视频标题文本，将文本标签的宽高设为300*40，字号设置为16，对齐方式设置为左对齐。将文本标签放入课程界面中，使文本标签与屏幕的右侧对齐。在图片上有一行章节简介文本，通过文本标签进行实现。将文本标签拖入工作区域，设置宽高为140*20，在文本标签的样式中设置字体大小为11，字体颜色为白色，文本标签的背景为灰色，不透明度为70%。2.2.4制作课程列表界面将文本标签放在图片之上，且保证元件底部对齐。再放置一个文本标签，用于显示章节名称，该标签的宽高为140*30。03Step04Step02Step01Step将图片元件拖入工作区域，设置宽高为140*100，选择章节展示图片。将章节名称框顶部与图片底部对齐，由于每个章节的条目布局相同，因此可以将其进行组合。制作其余章节条目，第2章的条目坐标为x=208,y=376，完成视频列表的其余部分。07Step06Step05Step将第一章条目放入课程界面中，坐标尺寸为x=28,y=376。2.2.4制作课程列表界面将图片元件拖入工作区域，设置宽高为24*24，由于当前界面为课程界面，因此课程界面的图片应设置为蓝色图片，表示选中状。将文本标签拖入工作区域，将宽高设置为48*14，字号设置为11，颜色设置为蓝色，表示为选中状态，并将界面图标与文本标签进行组合。05Step03Step04Step02Step01Step将矩形元件拖入工作区域，设置宽高为360*55，元件背景设置为灰色。制作其他界面的图片及文本标签。需要注意的是，未选中界面的图标需要设置成为灰色的未选中图片，同样文本颜色也设置成灰色表示未选中状态。将制作好的导航栏放入课程界面中2.2.5制作底部导航栏接下来制作界面切换按钮，首先将文本标签拖入工作区域，设置宽高为180*40，字体大小为18，字体颜色为白色，背景颜色为蓝色。2.2.6制作课程详情界面将文本标签元件转换为动态面板，设置动态面板的名称，方便之后的使用。05Step03Step04Step02Step01Step创建新页面，命名为“Videos”，放入手机外框和系统状态栏。将图片元件拖入原型图中用于放置教材介绍图片，设置宽高为360*200，导入需要展示的图片。复制State1，制作未选中状态下的文本标签。在State2中将文本标签背景修改为白色，字体颜色修改为黑色。将动态面板放入原型图中。[点击播放视频]为视频动态面板添加交互事件，当点击“视频”时，视频按钮处于选中状态，即视频动态面板的State2状态，简介按钮处于未选中状态，即简介动态面板的State2状态。为简介动态面板添加交互事件，当点击“简介”时，简介按钮处于选中状态，即简介动态面板的State1状态，视频按钮处于未选中状态，即视频动态面板的State1状态。2.2.6制作课程详情界面将State2文本标签的背景颜色设为蓝色，字体颜色设为白色。将视频动态面板放入原型图中。10Step08Step09Step07Step06Step将简介动态面板进行复制并命名，制作视频动态面板。需要注意的是，视频界面默认在未选中状态，因此视频动态面板中的State1需要使用白色背景色，文字颜色为黑色。将矩形元件拖入工作区域，设置宽高为340*1，背景颜色为灰色，将矩形与背景元件居中对齐，与视频名称元件下部对齐。制作简介展示部分，将文本标签拖入原型图，设置宽高为360*328，字体大小为14，背景颜色为白色，行间距为20。2.2.6制作课程详情界面由于在单击简介按钮或视频按钮时，会分别切换到简介界面和视频列表界面，因此也可以此部分制作成动态面板，并重命名动态面板。复制动态面板State1，在State2中制作视频列表，首先将图片元件拖入原型图中，用于设置视频选项图，设置宽高为25*25。15Step13Step14Step12Step11Step将文本标签拖入工作区域，用于显示视频名称，设置宽高为290*50，字体大小为16，垂直居中，将文本标签的右侧与背景文本框的右侧对齐。2.2.6制作课程详情界面完成本章视频列表。修改简介动态面板的单击事件，当单击“简介”按钮时，将内容详情动态面板的状态设为State1。修改视频动态面板的单击事件，当单击“视频”按钮时，将内容详情动态面板的状态设为State2。18Step17Step16Step课程详情界面制作完成后，还需要返回课程界面添加交互事件，当点击章节图片时跳转到相应的课程详情界面，此处以第1章课程为例来添加交互事件。2.2.7添加课程列表的交互事件01Step课程界面已经制作完成，接下来完成欢迎界面的自动跳转功能，设置欢迎界面的交互事件，让欢迎界面等待3秒自动进入课程界面。首先在欢迎界面中添加“载入时”事件，设置等待时间为3000毫秒，然后设置当前窗口中打开课程界面。2.2.8添加欢迎界面的交互事件01Step2.1欢迎界面2.2课程界面主讲内容Speechcontent主讲内容2.3习题界面将文本标签的背景设为蓝色，文本位置设为垂直居中和水平居中，字号设为20，同时将文字颜色设为白色。创建新页面，命名为“Exercises”，拖入手机外框及系统状态栏，将背景设置为白色，标题栏可用文本标签实现，将文本框拖入工作区，并将宽高设为360*50。2.3.1制作标题栏02Step01Step2.3.2制作习题列表界面在习题列表中，每一个条目之间会有一条灰色的间隔线，这个间隔线可以通过矩形实现。将矩形高度设为1，并将矩形填充色设置为灰色。拖入文本标签放置在图片中间，显示章节编号，并将文本颜色修改为白色。由于每个选项之前都有编号，因此首先放入一个图片元件，并导入相应图片。03Step04Step02Step01Step首先制作习题列表中的一个选项，从元件库中拖入一个矩形，设置宽高为360*70，并在矩形中编写两行文本。2.3.2制作习题列表界面将第一个条目组合进行复制，修改其中的文本内容并更改章节图片，完成习题列表的制作。06Step05Step由于每个条目的内容基本相同，因此可将条目内容与间隔线制作成母版或者进行组合，本文将其进行组合使用，之后将条目放入到原型图中。在导航栏中，点击不同按钮可以切换到不同的界面。为了能够切换到课程界面中，还需给“课程”按钮添加交互事件，在鼠标单击课程按钮时当前窗口中打开课程界面。2.3.3修改底部导航栏02Step01Step将导航栏放入原型图中，由于当前界面处于习题界面，因此需要更换图片以及修改文本颜色，将其置于选中状态。2.3.4制作习题详情界面导航栏为返回按键添加交互事件，当点击返回按钮时跳转到习题列表界面。在标题栏左侧有一个返回按键，点击返回按键跳转到习题列表界面，首先向原型图中拖入一个图片元件，将图片宽高设置为40*40，之后添加返回按钮图片。03Step02Step01Step添加新页面，命名为“Questions”，将手机外框及系统状态栏放入工作区域，拖入一个矩形元件，设置宽高为360*50，将矩形背景设置为蓝色，文本颜色设置为白色。制作选项图标，将图片元件拖入工作区并命名，设置宽高为40*40，并导入选项未选中时的图片，放置于选项内容左侧。接下来制作试题选项部分，首先制作选项内容，将文本标签拖入工作区域并设置宽高为290*40，垂直居中。制作习题内容部分，拖入文本标签元件，设置宽高为360*60，将背景颜色设置为白色，对齐方式设置成左对齐，字号设置为13。首先制作题型栏，将文本标签拖入原型图中，设置宽高为360*40，背景颜色设置为白色，对齐方式设置成左对齐，字号设置为16。2.3.5制作习题详情界面03Step04Step02Step01Step06Step05Step将图片与矩形进行组合，方便之后的使用，将选项放置于原型图中，使右侧对齐。通过复制第一个选项组合，制作其他三个选项，更换选项图片及选项内容并设置每个选项的名称。2.3.5制作习题详情界面2.3.6添加选项的交互事件选择错误选项时还需要将正确选项“C”的图标修改为正确图标。当选择错误选项时，首先该选项的图标变成错误图标。选择一个选项之后其他三个选项不能够再被选择，因此将其他三个选项设为禁用状态。添加图片点击事件，当选择答案“C”时，将选项图片变成正确图片。03Step04Step02Step01Step在选择选项之后，其他选项不能够再次被选中，因此禁用其他选项。按照上述步骤，添加所有选项的交互事件。再放置一个练习题，完成习题详情界面内容，并设置选项的交互事件。07Step06Step05Step2.3.6添加选项的交互事件2.3.7添加习题列表的交互事件01Step在习题列表中点击每一章的条目时会跳转到相应的习题详情界面，因此需要为习题列表的每一个条目添加交互事件。2.3.8添加底部导航栏的交互事件01Step在课程界面点击导航栏中的习题按钮会跳转到习题界面，因此需要在“习题”按钮上添加鼠标单击的交互事件。本章主要讲解了博学谷项目的界面设计，其中以欢迎界面、课程界面、习题界面3个界面为主，按照步骤分别实现。在界面设计的过程中，读者需要重点掌握动态面板的使用，以及交互事件的使用，因为这部分知识在原型图设计的过程中经常使用，非常重要。2.4本章小结1.请思考如何使用动态面板制作轮播图？2.请思考如何设置选择题的选项点击事件？思考题《Android项目实战——博学谷》第3章注册与登录模块·欢迎界面开发·用户登录与注册掌握欢迎界面的开发，能够独立制作欢迎界面；掌握注册和登录模块的开发，能够实现用户登录功能。学习目标3.1欢迎界面3.2注册主讲内容Speechcontent主讲内容3.3登录3.1欢迎界面任务综述　　在实际开发中，开启应用程序时首先会呈现一个欢迎界面，用于展示产品Logo或展示广告等，接下来将创建博学谷项目的欢迎界面。博学谷项目的欢迎界面是由RelativeLayout布局和一个TextView控件组成，其中RelativeLayout的背景图片用于展示产品Logo，TextView控件用于展示程序版本号。3.1欢迎界面【 知识点 高中化学知识点免费下载体育概论知识点下载名人传知识点免费下载线性代数知识点汇总下载高中化学知识点免费下载 】布局文件的创建与设计；RelativeLayout布局、TextView控件；Timer与TimerTask。【技能点】实现Android项目的创建；通过Timer实现界面延迟跳转；通过PackageManager获取程序版本号。【任务３-１】欢迎界面任务分析　　博学谷项目的欢迎界面效果如图3-1所示。【任务３-１】欢迎界面任务实施任务步骤（详见教材P15—P21）（4）修改清单文件android:icon="@mipmap/app_icon"在AndroidManifest.xml的标签中修改icon属性，引入博学谷图标。在标签中修改theme属性，去掉标题栏，android:theme="@style/Theme.AppCompat.NoActionBar"在配置文件中将MainActivity的标签以及标签中的所有内容剪切到SplashActivity所在的标签中【任务３-2】欢迎界面逻辑代码任务分析　　欢迎界面主要展示产品Logo和版本信息，通常会在该界面停留一段之后自动跳转到其他界面，因此需要在逻辑代码中设置欢迎界面暂停几秒（3秒）后再跳转，并获取程序的版本号。任务实施任务步骤（详见教材P15—P21）【任务３-2】欢迎界面逻辑代码Timer类是JDK（JavaSEDevelopmentKit是Java开发工具包）中提供的一个定时器工具，使用时会在主线程之外开启一个单独的线程执行指定任务，任务可以执行一次或多次。TimerTask类是一个实现了Runnable接口的抽象类，同时代表一个可以被Timer执行的任务，因此跳转到主界面的任务代码写在TimerTask的run()方法中。Timer的schedule()方法是任务调度方法，在3秒之后调度TimerTask执行跳转操作，实现延迟跳转功能。Timertimer=newTimer();TimerTasktask=newTimerTask(){@Overridepublicvoidrun(){Intentintent=newIntent(SplashActivity.this,MainActivity.class);startActivity(intent);SplashActivity.this.finish();}};timer.schedule(task,3000);在指定时间内执行的task设置task延迟3秒后执行（2）让界面延迟跳转3.1欢迎界面3.2注册主讲内容Speechcontent主讲内容3.3登录3.2注册任务综述　　注册界面主要用于用户输入注册信息，在注册界面中用户需要输入用户名、密码、再次输入密码（确保密码输入无误），当点击注册按钮时进行注册。由于博学谷项目使用的是本地数据，因此注册成功后，需要将用户名和密码保存在SharedPreferences中便于后续用户登录。为了保证账户的安全，在保存密码时会采用MD5加密算法，这种算法是不可逆的，且具有一定的安全性。【知识点】标题栏的创建；ImageView控件、EditText控件、Button控件；SharedPreferences的使用；setResult(RESULT_OK,data)方法的使用；MD5加密算法。【技能点】掌握注册界面的设计和逻辑构思；掌握标题栏的创建以及常用控件的使用；通过SharedPreferences实现数据的存取功能；通过setResult(RESULT_OK,data)方法实现界面间数据的回传；通过MD5加密算法实现密码加密功能；实现博学谷的注册功能。3.2注册任务分析　　在博学谷项目中，大部分界面都有一个后退键和一个标题栏。为了便于代码重复利用，可以将后退键和标题栏抽取出来单独放在一个布局文件（main_title_bar.xml）中，界面效果如图3-2所示。【任务３-3】标题栏任务实施任务步骤（详见教材P15—P21）【任务３-3】标题栏按钮按下状态（2）创建背景选择器【任务３-4】注册界面任务分析　　注册界面用于输入用户的注册信息，在注册界面中需要3个EditText用于输入用户名、密码、再次确认密码，当点击注册按钮后完成用户注册，界面效果如图3-3所示。任务实施任务步骤（详见教材P15—P21）【任务３-4】注册界面【任务３-5】MD5加密算法任务分析　　MD5的全称是Message-DigestAlgorithm5（信息--摘要算法），MD5算法简单来说就是把任意长度的字符串变换成固定长度（通常是128位）的16进制字符串。在存储密码过程中，直接存储明文密码是很危险的，因此在存储密码前需要使用MD5算法加密，这样不仅提高了用户信息的安全性，同时也增加了密码破解的难度。任务实施任务步骤（详见教材P15—P21）【任务３-5】MD5加密算法【任务３-6】注册界面逻辑代码任务分析　　在注册界面点击注册按钮后，需要获取用户名，用户密码和再次确认密码，当两次密码相同时，将用户名和密码（经过MD5加密）保存到SharedPreferences中。同时当注册成功之后需要将用户名传递到登录界面（LoginActivity目前还未创建）中。【任务３-6】注册界面逻辑代码任务实施任务步骤（详见教材P15—P21）/***从SharedPreferences中读取输入的用户名，判断SP中是否有此用户名*/privatebooleanisExistUserName(StringuserName){booleanhas_userName=false;SharedPreferencessp=getSharedPreferences("loginInfo",MODE_PRIVATE);StringspPsw=sp.getString(userName,"");if(!TextUtils.isEmpty(spPsw)){has_userName=true;}returnhas_userName;}（2）保存注册信息到SharedPreferences中/***保存用户名和密码到SharedPreferences中*/privatevoidsaveRegisterInfo(StringuserName,Stringpsw){Stringmd5Psw=MD5Utils.md5(psw);//把密码用MD5加密//loginInfo表示文件名SharedPreferencessp=getSharedPreferences("loginInfo",MODE_PRIVATE);SharedPreferences.Editoreditor=sp.edit();//获取编辑器//以用户名为key,密码为value保存到SharedPreferences中editor.putString(userName,md5Psw);editor.commit();//提交修改}（2）保存注册信息到SharedPreferences中3.1欢迎界面3.2注册主讲内容Speechcontent主讲内容3.3登录3.3登录任务综述　　登录界面主要是为用户提供一个输入登录信息的界面，当点击登录按钮时需要在SharedPreferences中查询输入的用户名是否有对应的密码，如果有则用此密码与当前输入的密码（需MD5加密）进行比对，如果信息一致，则登录成功，并把登录成功的状态和用户名保存到SharedPreferences中，便于后续判断登录状态和获取用户名。如果登录失败，则有两种情况，一种是输入的用户名和密码不一致；另一种是此用户名不存在。【知识点】标题栏的引用；EditText控件、Button控件；SharedPreferences的使用；setResult(RESULT_OK,data)方法的使用；Intent的使用。【技能点】掌握登录界面的设计和逻辑构思；通过SharedPreferences实现数据的存取功能；通过setResult(RESULT_OK,data)方法实现界面间数据的回传；通过Intent实现Activity之间的跳转；实现博学谷的登录功能。3.3登录【任务３-7】登录界面任务分析　　登录界面主要是为用户提供一个登录的入口，在登录界面中用户可以输入用户名和密码，点击登录按钮。若用户还未注册，可以点击“立即注册”进入注册界面；若用户忘记密码，则可以点击“找回密码”进入找回密码界面（找回密码界面未创建），界面效果如图3-4所示。【任务３-7】登录界面任务实施任务步骤（详见教材P15—P21）【任务３-8】登录界面逻辑代码任务分析　　当点击登录按钮时，需要先判断用户名和密码是否为空，若为空则提示请输入用户名和密码；若不为空则获取用户输入的用户名，由于博学谷项目用的是本地数据，因此根据用户名在SharedPreferences中查询是否有对应的密码，如果有对应的密码并且与用户输入的密码（需MD5加密）比对一致，则登录成功。【任务３-8】登录界面逻辑代码任务实施任务步骤（详见教材P15—P21）/***从SharedPreferences中根据用户名读取密码*/privateStringreadPsw(StringuserName){SharedPreferencessp=getSharedPreferences("loginInfo",MODE_PRIVATE);returnsp.getString(userName,"");}（3）保存登录状态到SharedPreferences中/***保存登录状态和登录用户名到SharedPreferences中*/privatevoidsaveLoginStatus(booleanstatus,StringuserName){//loginInfo表示文件名SharedPreferencessp=getSharedPreferences("loginInfo",MODE_PRIVATE);SharedPreferences.Editoreditor=sp.edit();//获取编辑器editor.putBoolean("isLogin",status);//存入boolean类型的登录状态editor.putString("loginUserName",userName);//存入登录时的用户名editor.commit();//提交修改}（3）保存登录状态到SharedPreferences中@OverrideprotectedvoidonActivityResult(intrequestCode,intresultCode,Intentdata){super.onActivityResult(requestCode,resultCode,data);if(data!=null){//从注册界面传递过来的用户名StringuserName=data.getStringExtra("userName");if(!TextUtils.isEmpty(userName)){et_user_name.setText(userName);//设置光标的位置et_user_name.setSelection(userName.length());}}}（3）保存登录状态到SharedPreferences中本章主要讲解了博学谷项目的欢迎界面、注册模块、登录模块功能。这三个功能模块是本项目最简单的部分，因此放在开篇讲解，读者先熟悉下项目的开发流程以及开发步骤，方便后续学习。3.4本章小结1.请思考如何使用MD5加密算法对密码进行加密？2.请思考博学谷项目中如何实现用户登录的？思考题《Android项目实战——博学谷》第4章我的模块·底部导航栏·修改密码·设置密保·找回密码掌握底部导航栏的开发，并能实现设置界面；掌握修改密码功能的开发，实现用户密码的修改；掌握设置密保功能的开发，并且通过密保可以找回用户密码。学习目标4.1“我”的界面4.2设置主讲内容Speechcontent主讲内容4.3修改密码4.4设置密码和找回密码4.1“我”的界面任务综述　　根据“我”的界面设计图可知，该界面包含了用户头像、用户名、播放记录条目，设置条目和底部用于切换界面的导航栏。当点击用户头像和用户名时会进入个人中心，点击播放记录条目时会进入查看播放记录的界面，点击设置条目时会进入设置界面。在底部导航栏中包含3个按钮，分别为课程、习题和我，这3个按钮是用于切换课程界面、习题界面和“我”的界面。由于3个界面的底部都包含了这3个按钮，因此可以创建一个底部导航栏框架方便每个界面使用。4.1“我”的界面【知识点】ImageView控件、TextView控件；SharedPreferences的使用。【技能点】掌握底部导航栏框架的设计和逻辑构思；掌握如何获取和清除SharedPreferences中的数据；学会搭建底部导航栏框架。【任务4-１】底部导航栏任务分析　　根据前面介绍的设计图可知，此项目包含一个底部导航栏（即底部3个按钮），为了方便后续布局的搭建，因此创建一个底部导航栏UI的框架，界面效果如图4-1所示。【任务4-１】底部导航栏任务实施任务步骤（详见教材P15—P21）【任务4-2】底部导航栏逻辑代码任务分析　　在底部导航栏中点击不同的按钮会进入不同的界面，因此需要为3个按钮添加监听事件。根据所在界面的不同，导航栏中的按钮和文字也有选中和未选中两种状态，因此需要创建方法来设置按钮的不同状态。在界面中间部分会根据按钮的选中状态切换不同的界面，因此需要创建相应的方法用于创建视图。任务实施任务步骤（详见教材P15—P21）【任务4-2】底部导航栏逻辑代码（6）读取和清除SharedPreferences中的登录状态privatevoidsetSelectedStatus(intindex){switch(index){case0:mCourseBtn.setSelected(true);iv_course.setImageResource(R.drawable.main_course_icon_selected);tv_course.setTextColor(Color.parseColor("#0097F7"));rl_title_bar.setVisibility(View.VISIBLE);tv_main_title.setText("博学谷课程");break;case1: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("博学谷习题");break;case2:…….}}（6）读取和清除SharedPreferences中的登录状态publicbooleanonKeyDown(intkeyCode,KeyEventevent){if(keyCode==KeyEvent.KEYCODE_BACK&&event.getAction()==KeyEvent.ACTION_DOWN){if((System.currentTimeMillis()-exitTime)>2000){Toast.makeText(MainActivity.this,"再按一次退出博学谷",Toast.LENGTH_SHORT).show();exitTime=System.currentTimeMillis();}else{MainActivity.this.finish();if(readLoginStatus()){clearLoginStatus();}System.exit(0);}returntrue;}returnsuper.onKeyDown(keyCode,event);}【任务4-3】“我”的界面任务分析　　“我”的界面需要显示头像，用户名，播放记录条目，设置条目和底部导航栏，界面效果如图4-2所示。任务实施任务步骤（详见教材P15—P21）【任务4-3】“我”的界面【任务4-4】AnalysisUtils工具类任务分析　　由于博学谷项目在保存和获取数据时会多次用到用户名，因此可以创建一个工具类AnalysisUtils用于获取用户名，便于后续调用。packagecom.boxuegu.utils;importandroid.content.Context;importandroid.content.SharedPreferences;publicclassAnalysisUtils{/***从SharedPreferences中读取登录用户名*/publicstaticStringreadLoginUserName(Contextcontext){SharedPreferencessp=context.getSharedPreferences("loginInfo",Context.MODE_PRIVATE);StringuserName=sp.getString("loginUserName","");//获取登录时的用户名returnuserName;}}任务实施任务步骤（详见教材P15—P21）【任务4-4】AnalysisUtils工具类【任务4-5】我的界面逻辑代码任务分析　　在“我”的界面中需要判断用户是否登录，若用户已经登录则显示用户名，若用户未登录则显示“点击登录”。若用户已经登录，当点击用户头像时会跳转到个人资料界面，点击播放记录条目时跳转到播放记录界面，点击设置条目时跳转到设置界面。任务实施任务步骤（详见教材P15—P21）【任务4-5】我的界面逻辑代码privateMyInfoViewmMyInfoView;在【任务4-2】MainActivity.java文件中的第40行代码下方添加如下代码在配置文件中将MainActivity的标签以及标签中的所有内容剪切到SplashActivity所在的标签中，如下所示if(mMyInfoView==null){mMyInfoView=newMyInfoView(this);mBodyLayout.addView(mMyInfoView.getView());}else{mMyInfoView.getView();}mMyInfoView.showView();（4）修改底部导航栏（5）修改登录成功时代码在【任务4-2】中MainActivity.java文件，在该文件中重写onActivityResult()方法，并导入对应的包，具体代码如下：if(mMyInfoView==null){mMyInfoView=newMyInfoView(this);mBodyLayout.addView(mMyInfoView.getView());}else{mMyInfoView.getView();}mMyInfoView.showView();4.1“我”的界面4.2设置主讲内容Speechcontent主讲内容4.3修改密码4.4设置密码和找回密码4.2设置任务综述　　在设置界面主要包含了修改密码、设置密保、退出登录等功能。当用户点击修改密码时会跳转到修改密码界面，当用户点击设置密保时会跳转到设置密保界面，当点击退出登录时会退出当前登录账号。【知识点】ImageView控件、TextView控件；SharedPreferences的使用；setResult(RESULT_OK,data)方法的使用。【技能点】掌握设置界面的设计和逻辑构思；掌握如何清除SharedPreferences中的数据；通过setResult(RESULT_OK,data)方法实现界面间的数据回传功能；实现博学谷的退出登录功能。4.2设置任务分析　　根据任务综述可知设置界面有3个功能，分别为修改密码、设置密保和退出登录，界面效果如图4-3所示。【任务4-6】设置界面【任务4-6】设置界面任务实施任务步骤（详见教材P15—P21）【任务4-7】设置界面逻辑代码任务分析　　在设置界面中添加点击事件，当点击修改密码时跳转到修改密码界面，当点击设置密保时跳转到设置密保界面，当点击退出登录时清除登录状态和用户名，并且将退出的状态传递给MainActivity。任务实施任务步骤（详见教材P15—P21）【任务4-7】设置界面逻辑代码（2）清除SharedPreferences中的登录状态和登录时的用户名/***清除SharedPreferences中的登录状态和登录时的用户名*/privatevoidclearLoginStatus(){SharedPreferencessp=getSharedPreferences("loginInfo",Context.MODE_PRIVATE);SharedPreferences.Editoreditor=sp.edit();//获取编辑器editor.putBoolean("isLogin",false);//清除登录状态editor.putString("loginUserName","");//清除用户名editor.commit();//提交修改}4.1“我”的界面4.2设置主讲内容Speechcontent主讲内容4.3修改密码4.4设置密码和找回密码4.3修改密码任务综述　　修改密码界面主要是让用户能够在必要时去修改密码，保证用户信息的安全性。修改密码需要输入一次原始密码和两次新密码来防止用户输入错误，密码修改成功后需要把SharedPreferences中用户的旧密码修改成新密码。【知识点】EditText控件、Button控件；SharedPreferences的使用。【技能点】掌握修改密码界面的设计和逻辑构思；掌握如何修改SharedPreferences中的数据；实现博学谷的修改密码功能。4.3修改密码【任务4-8】修改密码界面任务分析　　修改密码界面主要是让用户在必要时修改自己的原始密码，从而保证用户信息的安全性，界面效果如图4-4所示。任务实施任务步骤（详见教材P15—P21）【任务4-8】修改密码界面【任务4-9】修改密码界面逻辑代码任务分析　　根据图4-4可知，修改密码界面主要用于输入原始密码、新密码、再次输入新密码。输入的原始密码与从SharedPreferences中读取的原始密码必须一致，输入的新密码与原始密码不能相同，再次输入的新密码与输入的新密码必须相同。以上条件都符合之后，点击保存按钮提示新密码设置成功，同时修改SharedPreferences中的原始密码。任务实施任务步骤（详见教材P15—P21）【任务4-9】修改密码界面逻辑代码/***获取控件上的字符串*/privatevoidgetEditString(){originalPsw=et_original_psw.getText().toString().trim();newPsw=et_new_psw.getText().toString().trim();newPswAgain=et_new_psw_again.getText().toString().trim();}（2）修改SharedPreferences中的原始密码/***修改登录成功时保存在SharedPreferences中的密码*/privatevoidmodifyPsw(StringnewPsw){Stringmd5Psw=MD5Utils.md5(newPsw);//把密码用MD5加密SharedPreferencessp=getSharedPreferences("loginInfo",MODE_PRIVATE);SharedPreferences.Editoreditor=sp.edit();//获取编辑器editor.putString(userName,md5Psw);//保存新密码editor.commit();//提交修改}（2）修改SharedPreferences中的原始密码4.1“我”的界面4.2设置主讲内容Speechcontent主讲内容4.3修改密码4.4设置密码和找回密码4.4设置密保和找回密码任务综述　　根据功能展示可知，设置密保界面和找回密码界面基本相同，同时两个界面的代码逻辑也十分相似，因此这两个界面可以使用同一个布局文件，也可以使用同一个Activity来处理逻辑代码。设置密保主要是将当前用户输入的姓名作为密保，找回密码是根据用户输入的用户名和密保姓名将该用户的密码重置为初始密码123456（由于之前保存的密码是经过MD5加密的，MD5是不可逆的，所以之前的密码不能获取明文）。【知识点】EditText控件、TextView控件、Button控件；SharedPreferences的使用。【技能点】掌握设置密保和找回密码界面的设计和逻辑构思；掌握如何获取和修改SharedPreferences中的数据；实现博学谷的设置密保功能；实现博学谷的找回密码功能。4.4设置密保和找回密码【任务4-10】设置密保和找回密码界面任务分析　　设置密保界面主要用于输入要设为密保的姓名，找回密码界面可以根据用户当前输入的用户名和设为密保的姓名找回密码，界面效果如图4-5所示。任务实施任务步骤（详见教材P15—P21）【任务4-10】设置密保和找回密码界面【任务4-11】设置密保与找回密码界面逻辑代码任务分析　　根据任务综述可知，设置密保界面和找回密码界面用的同一个Activity，在这个Activity中主要是根据从设置界面和登录界面传递过来的from参数的值来判断要跳转到哪个界面，若值为security则处理的是设置密保的界面，否则处理的就是找回密码的界面。设置密保界面的逻辑主要是保存用户输入的姓名到SharedPreferences中，找回密码界面的逻辑主要是把SharedPreferences中用户名对应的原始密码修改为123456。任务实施任务步骤（详见教材P15—P21）【任务4-11】设置密保与找回密码界面逻辑代码/***保存初始化的密码*/privatevoidsavePsw(StringuserName){Stringmd5Psw=MD5Utils.md5("123456");//把密码用Md5加密SharedPreferencessp=getSharedPreferences("loginInfo",MODE_PRIVATE);SharedPreferences.Editoreditor=sp.edit();//获取编辑器editor.putString(userName,md5Psw);editor.commit();//提交修改}（3）保存初始化密码到SharedPreferences中/***保存密保到SharedPreferences中*/privatevoidsaveSecurity(StringvalidateName){SharedPreferencessp=getSharedPreferences("loginInfo",MODE_PRIVATE);SharedPreferences.Editoreditor=sp.edit();//获取编辑器editor.putString(AnalysisUtils.readLoginUserName(this)+"_security",validateName);//存入用户对应的密保editor.commit();//提交修改}（3）保存初始化密码到SharedPreferences中/***从SharedPreferences中读取密保*/privateStringreadSecurity(StringuserName){SharedPreferencessp=getSharedPreferences("loginInfo",Context.MODE_PRIVATE);Stringsecurity=sp.getString(userName+"_security","");returnsecurity;}（3）保存初始化密码到SharedPreferences中/***从SharedPreferences中根据用户输入的用户名来判断是否有此用户*/privatebooleanisExistUserName(StringuserName){booleanhasUserName=false;SharedPreferencessp=getSharedPreferences("loginInfo",MODE_PRIVATE);StringspPsw=sp.getString(userName,"");if(!TextUtils.isEmpty(spPsw)){hasUserName=true;}returnhasUserName;}（3）保存初始化密码到SharedPreferences中本章主要讲解了底部导航栏，设置界面、修改密码、设置密保、找回密码等功能。读者通过本章的学习，可以掌握界面的搭建过程以及简单的界面开发与数据存储。4.5本章小结1.请思考博学谷项目中如何实现底部导航栏？2.请思考博学谷项目中如何设置密保？思考题《Android项目实战——博学谷》第5章个人资料模块·个人资料界面·用户信息表·DBUtils工具类·修改个人信息掌握SQLite数据库的使用，能够使用数据库保存用户信息；掌握个人资料界面的创建，并能实现个人资料的修改。学习目标5.1个人资料5.2个人资料修改主讲内容Speechcontent主讲内容5.1个人资料任务综述　　个人资料界面主要用于显示用户信息，其中包含用户头像、用户名、昵称、性别和签名，除了头像和用户名不可修改之外，其余信息均可修改。当注册一个新用户并第一次进入个人资料界面时，除用户名以外的信息均使用默认值，当修改个人资料信息时需要使用SQLite数据库进行保存。【知识点】SQLite数据库的使用。【技能点】掌握个人资料界面的设计与逻辑构思；掌握如何修改性别属性的值；通过SQLite数据库实现昵称、性别、签名的保存功能。5.1个人资料【任务5-１】个人资料界面任务分析　　个人资料界面主要用于展示用户的个人信息，包括用户头像、用户名、昵称、性别和签名，界面效果如图5-1所示。任务实施任务步骤（详见教材P15—P21）【任务5-１】个人资料界面【任务5-2】创建UserBean任务分析　　博学谷用户具有用户名、昵称、性别等信息，为了便于后续对这些属性进行操作，因此创建一个UserBean类来存放这些属性。任务实施【任务5-2】创建UserBeanpackagecom.boxuegu.bean;publicclassUserBean{publicStringuserName;//用户名publicStringnickName;//昵称publicStringsex;//性别publicStringsignature;//签名}任务步骤（详见教材P15—P21）【任务5-3】创建用户信息表任务分析　　在个人资料界面中，由于经常会对用户信息进行保存和更新，因此需要创建一个数据库来对用户信息进行操作，便于后续数据的显示和更新。用户包含用户名、昵称、性别和签名信息，因此需要在数据库中创建与之对应的表。任务实施任务步骤（详见教材P15—P21）【任务5-3】创建用户信息表publicvoidonCreate(SQLiteDatabasedb){/***创建个人信息表*/db.execSQL("CREATETABLEIFNOTEXISTS"+U_USERINFO+"("+"_idINTEGERPRIMARYKEY