Chapter13Web前端框架与移动应用开发TP13

第十七章QQApp登录注册界面设计,预习检查,简述“QQApp登录注册界面设计”项目需求如何实现从splash欢迎界面定时跳转到登录界面？如何隐藏界面的布局？登录界面有哪些主要元素？在注册界面和输入验证码界面中有相同的内容，应该怎样重用界面的布局？Android”倒计时器”类CountDownTimer的子类MyCount有哪些常用属性和常用方法？,集中测试,2/41,本章任务,设计一个类似于QQApp的登陆及注册系统界面欢迎界面登录界面，以及一个动态切换效果注册界面注册确认界面,3/41,训练的技能点,会使用RelativeLayout实现手机界面布局会使用LinearLayout实现手机界面布局会使用FrameLayout实现手机界面布局会使用功能标记实现复用熟练使用TextView控件掌握Button的用法熟练使用ImageView控件熟练使用CheckBox控件熟练使用EditText控件掌握组件上的点击事件处理方法,4/41,任务描述,系统概述,5/41,系统开发步骤,问题分析1：整体开发思路,6/41,问题分析2：界面交互设计,界面交互设计的原则Android界面设计规范,7/41,问题分析3：技术分析,技术实现中需要考虑的问题需要哪些组件，每个组件保存哪些类型的数据会出现哪些事件，采用哪些技术实现事件处理命名规范如何完成手机界面布局,8/41,难点分析1：理解业务,欢迎界面（splash）手机启动后显示3000毫秒后跳转到登录界面登录界面用户名得到焦点后，默认为数字键盘密码框中输入显示内容为“.”点击注册新账号，跳转到注册界面注册界面验证输入的手机号是否符合格式要求输入验证码界面10秒倒计时计时器为0时，显示“重新获取”验证码按钮,9/41,难点分析2：定时操作,手机启动后显示splash欢迎界面，30秒后跳转到登录界面,Thread.sleep(3000);,10/41,难点分析3：登录界面的布局,多个布局嵌套两个EditText组件之间有一条分割线默认情况下，“更多登录选项”部分隐藏点击事件处理,分割线,隐藏布局,11/41,难点分析4：复用布局,注册界面和输入验证码界面顶部的“返回”按钮部分相同,两个界面中的相同布局,注册界面,输入验证码界面,12/41,难点分析5：倒计时,输入验证码界面，10秒倒计时，到计时器到0时，显示“重新获取”验证码按钮CountDownTimer类的MyCount子类构造方法参数millisInFuture：指定倒计时的总时长（如10000毫秒）参数countDownInterval：指定倒计时的时间间隔（如每隔1000毫秒）两个回调方法onTick(longmillisUntilFinished)方法：每隔millisUnitlFinished时间被执行一次，直到倒计时结束onFinish()方法：在倒计时结束后被调用,MyCount(longmillisInFuture,longcountDownInterval),13/41,开发计划2-1,用例1：欢迎界面【20分钟】界面布局【10分钟】定时跳转【10分钟】用例2：登录界面【55分钟】界面布局【15分钟】“更多登录选项”隐藏、显示【20分钟】点击事件处理【20分钟】,14/41,开发计划2-2,用例3：注册界面【45分钟】界面布局【20分钟】复用布局【10分钟】点击事件处理【15分钟】用例4：输入验证码界面【50分钟】界面布局【20分钟】倒计时器【20分钟】点击事件处理【10分钟】,15/41,用例1：欢迎界面3-1,需求说明手机启动后显示，3秒后跳转到登录界面使用LinearLayout布局方式将图片设置它的背景,指导,分析,16/41,用例1：欢迎界面3-2,界面布局定时跳转线程来模拟应用的启动，实现3000毫秒计时用startActivity()方法从当前界面跳转到另一个界面,分析,newThread(newRunnable()publicvoidrun()tryThread.sleep(3000);/获取应用的上下文，生命周期是整个应用，应用结束才会结束getApplicationContext().startActivity(intent);finish();catch(InterruptedExceptione)e.printStackTrace();).start();,17/41,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,18/41,用例1：欢迎界面3-3,界面布局合理、正确图片正常显示3000毫秒后能自动跳转到另一个界面要求互相验证完成的程序功能小组长检查本组完成情况,功能测试,19/41,用例2：登录界面3-1,需求说明用户名输入框为焦点时，默认为数字键盘用户名只接受数字输入密码框中输入显示内容为“.”点击“更多登录选项”后，界面显示更多设置信息点击注册新账号，跳转到注册界面,完成时间：120分钟,指导,20/41,用例2：登录界面4-2,界面布局两个EditText之间设置一条分割线用View顶级组件实现,分析,提示,21/41,用例2：登录界面4-2,隐藏“更多登录选项”的布局把visibility属性设置成“gone”,分析,提示,22/41,用例2：登录界面4-3,鼠标的点击事件处理设置RelativeLayout的clickable属性值为trueActivity的代码,分析,提示,publicvoidshowMoreMenu(booleanshow)if(show)/如果菜单不展开的时候mMenuMore.setVisibility(View.GONE);mImgMoreUp.setImageResource(R.drawable.login_more_up);mIsShowMenu=false;else/菜单展开的时候mMenuMore.setVisibility(View.VISIBLE);mImgMoreUp.setImageResource(R.drawable.login_more);mIsShowMenu=true;,23/41,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,24/41,用例2：登录界面4-4,界面布局合理、正确，满足需求说明“更多登录选项”是否能按需求实现正常隐藏和显示是否能正确处理鼠标点击事件要求互相验证完成的程序功能小组长检查本组完成情况,功能测试,25/41,用例3：注册界面2-1,需求说明两个界面复用顶部的“返回”按钮所在内容的布局判断手机号输入框中输入的内容，必须满足手机号格式以1开头的11位数字如果未勾选“已阅读并同意”，在点击“向我发送验证码”时，提示用户勾选输入正确的手机号及勾选“已阅读并同意”后，点击“向我发送验证码”，跳转到输入验证码界面,练习,在输入验证码界面中复用,26/41,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,27/41,用例3：注册界面2-2,是否正确实现界面的布局方式是否正确使用并实现复用布局检验手机号是否符合格式要求是否能判断“已阅读并同意”已勾选是否能正确的跳转到输入验证码界面要求互相验证完成的程序功能小组长检查本组完成情况,功能测试,28/41,用例4：输入验证码界面2-1,需求说明重新获得验证码”文本视图和“重新获取”按钮是相互叠加的10秒倒计倒计时器值为0时，显示“重新获取”验证码按钮启动倒计时器文本视图和按钮相互叠加,练习,提示,mc.start();,mTvRegReget.setVisibility(View.VISIBLE);mBtnRegReget.setVisibility(View.GONE);,29/41,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,30/41,用例4：输入验证码界面2-2,是否正确实现复用布局重新获得验证码”文本视图和“重新获取”按钮是否实现了相互叠加倒计时器值为0时，是否显示“重新获取”验证码按钮要求互相验证完成的程序功能小组长检查本组完成情况,功能测试,31/41,项目总结,讲解要点完成情况、技能总结、经验分享、项目收获表达要求清晰流畅、有条理、重点突出,作品展示,32/41,总结,技术实现项目流程,界面布局常用组件重用布局：标签事件处理,技能总结,需求设计开发测试部署用户培训,LinerLayoutRelativeLayoutFrameLay