Android应用开发项目式教程 教案 项目2 个性名片-界面布局

项目2个性名片——界面布局2.1布局管理概述课程教案课程名称Android应用开发项目名称个性名片任务名称布局管理概述课时1授课地点科大讯飞人工智能实训室教学形式项目化教学、理实一体、线上线下混合式授课班级20应用电子技术2(对)学习情境QQ界面、微信界面、网易新闻的Android程序界面很美观，如何做整齐、美观的界面，加强用户的第一印象。教学内容分析视图（View）或视图组（ViewGroup）的概念，布局的编写方式，布局的类型和特点。教学目标知识目标1、了解View视图和ViewGroup视图组的关系；2、掌握在XML文件中与Java代码中编写界面布局；3、不同布局方式的特点。技能目标1、学生根据提供的代码，可以在XML文件中的进行代码运行；2、观察身边简单界面案例，判断布局类型。素质目标根据简单UI了解View视图和ViewGroup视图组，站在用户角度对UI设计有全局管理观。教学重点1、UI的概念。UI（UserInterface）是人与手机之间数据传递、交互信息的重要媒介和对话接口，是Android系统的重要组成部分；2、UI中View视图和ViewGroup视图组概念和的相互关系；3、布局的概念。教学难点1、XML文件中编写布局；2、在Java代码中编写布局。学情分析学生已经掌握开发环境的搭建，掌握Android程序的开发，并可以动手开发简单程序。学生对Android编程有浓厚的兴趣。让学生在网络上看不同的UI，说出内含布局的元素。教学设计课前布置任务：1、发现身边的UI，理解什么是UI？什么是布局？2、通过大学MOOC教学平台，自学相关的视频；课中学生分别例举UI，通过讲解理解View视图和ViewGroup视图组；课后强化布局的分类，再次寻找和关注身边的UI，发现他们的不同，最后理解布局对完美UI设计的重要性。思政设计善于发现和类比；布局需要细节上的“小心思”，视觉上的“大追求”。教学方法问题导入法：通过布置任务，让学生首先去发现身边关于UI的案例；通过引导让学生对某个具体的UI进行布局的讨论。考核评价自评、互评、教师评，项目评价表、项目考核表、线上考核成绩等。教学资源项目任务单、操作视频、PPT课件、知识点微课、拓展任务单等。教学流程教学步骤教学活动教学资源思政元素课前自主学习教师发布学习视频任务微视频、PPT、动画自主学习布置任务：分小组以学习强国APP为例或喜欢的游戏发现身边UI网络学习强国APP善于发现细节对不同UI进行控键布置的比较网络学会类比任务描述寻找简单UI，发现UI的不同QQ群、微信等任务实施学生小组讨论沟通能力成果交流小组代表发言，相互补充PPT或文档表达能力、团队精神考核评价学生互评评价表责任意识课后拓展提高1、通过课学堂知识讲解，把预习时的UI进行更发的认识，深层次理解UI和布局；2、清晰View视图和ViewGroup视图组的关系；3、提高在XML文件中编写布局以及在Java代码中编写布局流程。网络、大学MOOC自我纠错，逐步提高和稳固教学流程一、提出任务（课前）每个同学都有手机，都会用QQ、微信、学校APP的健康打卡、学习强国APP等发现Android程序的界面各有不同，去发现这些界面上有些什么控键，如何布局来实现的。即说明一个丰富的界面总是要由很多控件组成的，如何才能让各个控件都有条不紊地摆放在界面上呢？分析任务（课中）1、以学生推荐的UI为例，让学生讲解UI的组成；认识控键View视图和控键组ViewGroup；3、提出布局概念4、在Android中的编写布局的方式（1）在XML文件中定义布局有效地将界面中布局的代码和Java代码隔离。（2）Java代码编写布局更加灵活比如自定义控件或一些特殊要求时，使用Java代码布局。5、为了适应不同的界面风格，目前常用的布局如PPT中所示有线性布局、表格布局、帧布局、约束布局；二、探索研究（课中）根据不同类型的布局特点，UI布局的不同类型2、XML文件中编写布局；在Java代码中编写布局三、评价检查（自评、互评、教师点评相结合）教师：激发--答疑（个别）、演示UI（重点内容、技巧等）--再激发--答疑。自评、互评、教师点评。自评内容：任务完成情况、指出小组例举UI的布局特点。互评内容：认同其他小组总结合理地方，提出认为不合理的地方。教师点评：总体评价总结提高通过对Android程序APP案例的观察，提出相关控件进行界面设计优化的建议。五、布置任务（学生接受任务）通过线上资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。细致观察、学会思考、学会正类比2.2线性布局LinearLayout和表格TableLayout布局课程教案课程名称Android应用开发项目名称个性名片任务名称线性布局LinearLayout和表格TableLayout布局课时2授课地点科大讯飞人工智能实训室教学形式项目化教学、理实一体、线上线下混合式授课班级20应用电子技术2(对)学习情境以程序员身份，用分别用线性布局和表格布局实现不同的UI。教学内容分析线性布局的编写方式和属性教学目标知识目标1、要求学生掌握布局的通用属性；2、掌握线性布局编写和线性布局的特点；3、掌握表格布局编写和线性布局的特点。技能目标1、学生根据提供的代码，可以在XML文件中的进行代码运行，实现线性布局；2、学生根据提供的代码，可以在XML文件中的进行代码运行，实现表格布局。素质目标团队协作、分组讨论、分析问题能力。教学重点1、线性布局LinearLayout主要有两种形式，一种是水平线性布局，一种是垂直线性布局；2、表格布局（TableLayout）是以表格形式排列控件的,通过行和列将界面划分为多个单元格，每个单元格都可以添加控件。教学难点1、修改线性布局属性，改变线性布局的UI；2、修改表格布局属性，改变表格布局的UI。学情分析了解布局的概念，了解View视图、在XML文件中与Java代码中编写布局等知识，知道如何编写界面布局。学生非常期待掌握简单布局（线性布局和操作和了解各布局的属性。教学设计课前布置任务：1、发现身边的UI，理解什么是UI？什么是布局？2、通过大学MOOC教学平台，自学相关的视频；课中学生分别例举UI，通过讲解理解View视图和ViewGroup视图组；课后强化布局的分类，再次寻找和关注身边的UI，发现他们的不同，最后理解布局对完美UI设计的重要性。思政设计善于发现和类比；布局需要细节上的“小心思”，视觉上的“大追求”。通过程序设计，给学生强调规范操作，精益求精。教学方法问题导入法：通过布置任务，让学生首先自学找；课堂操作演示法：通过课中的实际操作强调参数属性的配置；学生实操演练，达到操作训练目的。考核评价自评、互评、教师评，项目评价表、项目考核表、线上考核成绩等。教学资源项目任务单、操作视频、PPT课件、知识点微课、拓展任务单等。教学流程教学步骤教学活动教学资源思政元素课前自主学习教师发布学习视频任务微视频、PPT、动画自主学习布置任务：观看大学MOOC相关视频和PPT：中国大学MOOC平台自主学习能力中国大学MOOC平台自主学习能力任务描述1、完成纵向一列和水平一行的布局管理；2、当需要有多行控键横向或纵向布局时（比如简单计算器界面）如何实现？完成一份下图表格布局管理。QQ群、微信等发挥学生的创造性任务实施学生小组讨论操作规范成果交流1、演示线性布局LinearLayout的属性特点和使用注意项；2、演示表格布局TableLayout的属性特点和注意事项；实操结果、多媒体演示表达能力、团队精神考核评价学生互评评价表操作规范、责任意识课后拓展提高1、遇到程序出错，学会查找错误；2、修改线性布局LinearLayout的属性参数值，改变UI；3、修改表格布局TableLayout的属性参数值，改变UI；软件操作平台、大学MOOC自我纠错，逐步提高和稳固教学流程一、提出任务（课前）运用课前自学知识，列出由三个控键组成一行或一列的线性布局LinearLayout；当需要有多行控键横向或纵向布局时如何实现？即表格布局TableLayout的实现。二、分析任务（课中）1、线性布局（LinearLayout）主要以水平或垂直方式来显示界面中的控件。当控件水平排列时，显示顺序依次为从左到右，当控件垂直排列时，显示顺序依次为从上到下。线性布局中，每行或每列中只允许有一个子视图或控件。2、表格布局（TableLayout）是以表格形式排列控件的，通过行和列将界面划分为多个单元格，每个单元格都可以添加控件。三、探索研究（课中）1、LinearLayout的最主要的属性有：（1）android:gravity：设置内部控件的显示位置。（2）android:orientation：设置内部控件的排列方向，常量horizontal（默认值）表示水平排列，vertical表示垂直排列。（3）android:layout_weight：设置内部控件在LinearLayout中所占的权重2、表格布局需要和TableRow配合使用，每一行都由TableRow对象组成，因此TableRow的数量决定表格的行数。而表格的列数是由包含最多控件的TableRow决定的，例如第1个TableRow有两个控件，第2个TableRow有三个控件，则表格列数为3四、评价检查（自评、互评、教师点评相结合）教师：激发--答疑（个别）、演示线性布局、表格布局（重点内容、技巧等）--再激发--答疑。自评、互评、教师点评。自评内容：任务完成情况、指出小组例举UI的布局特点。互评内容：认同其他小组总结合理地方，提出认为不合理的地方。教师点评：总体评价。五、总结提高1、通过对Android程序线性布局的练习，提出线性布局设计优化的建议。2、通过对Android程序表格布局的练习，提出表格布局设计优化的建议。六、布置任务（学生接受任务）通过线上资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。细致观察、学会思考、学会类比；通过改变提高创造新能力。2.3约束布局ConstraintLayout课程教案课程名称Android应用开发项目名称个性名片任务名称约束布局ConstraintLayout课时2课时授课地点科大讯飞人工智能实训室教学形式项目化教学、理实一体、线上线下混合式授课班级20应用电子技术2(对)学习情境线性布局、表格布局和帧布局都是通过XML文件编写而得，是否可以用拖动控键的方式来进行布局，这样即方便又灵活，以程序员的身份来思考这个问题。教学内容分析线性布局的编写方式和属性教学目标知识目标1、掌握相对定位是在ConstraintLayout中创建布局的基本构建方法；2、掌握约束布局ConstraintLayout的特点；3、理解约束布局ConstraintLayout属性参数。技能目标使用可视化的方式编写界面布局素质目标团队协作、分组讨论、分析问题、学会类比提高创新能力。教学重点约束布局ConstraintLayout可以在不嵌套ViewGroup的情况下实现非常庞大、复杂的布局，实现扁平化。教学难点Constraint布局下控件移动很灵活，但太灵活，适合需要精确控制定位控件，即对约束布局ConstraintLayout属性参数准确把握。学情分析掌握了线性布局、表格布局、帧布局都是在XML文件中编写，如果开发高级界面就比较复杂，提出能否不用代码而用大家熟悉的拖拽的方式拖动控键进行布局，学生非常期待手机游戏中的约束布局是如何实现的?教学设计课前布置任务：1、手机游戏动画的布局是否能用线性布局、表格布局、帧布局完成？2、通过大学MOOC教学平台，自学相关的视频；课中学生分别例举有约束布局的设计操作；课后强化对约束布局进行UI，完成自已的新布局。思政设计善于发现和类比；通过学习可以改变和创新。通过程序设计，给学生强调规范操作，精益求精。教学方法问题导入法：通过布置任务，让学生通过视频先自学；课堂操作演示法：通过课中的实际操作强调相对位置和调参数属性的配置；学生实操演练，达到操作训练目的。考核评价自评、互评、教师评，项目评价表、项目考核表、线上考核成绩等。教学资源中国大学MOOC/course/JSSVC-1449806164项目任务书、操作视频、PPT课件、知识点微课、拓展任务书等。教学流程教学步骤教学活动教学资源思政元素课前自主学习教师发布学习视频任务中国大学MOOC自主学习能力布置任务：通过网络查找Google在2016年的GoogleI/O大会上提出的一个可以灵活控制子控件的位置和大小的新布局，布局最大程度的扁平化。网络了解信息技术的发展带来的改变和创新任务描述对于开发高级界面，如何实现灵活控制子控件的位置和大小的新布局。中国大学MOOC平台讨论区、QQ群、微信等发挥学生的创造性任务实施学生小组讨论、资料查找网络操作规范成果交流演示约束布局ConstraintLayout的属性特点和使用注意项；实操结果、多媒体演示表达能力、团队精神考核评价学生自评、互评、教师评价评价表操作规范、责任意识课后拓展提高1、遇到程序出错，学会查找错误；2、修改约束布局ConstraintLayout的属性参数值，改变UI。软件操作平台、大学MOOC自我纠错，逐步提高和稳固教学流程一、提出任务（课前）ConstraintLayout是Google在2016年的GoogleI/O大会上提出的一个可以灵活控制子控件的位置和大小的新布局，达到动画效果并且其号称可以实现布局最大程度的扁平化。项目中的布局嵌套问题对项目性能有着不小的威胁。布局能实现扁平化的话会让软件性能得到很大的提升。二、分析任务（课中）1、ConstraintLayout是AndroidStudio2.2新添加的布局。与前面介绍的界面布局相比，ConstraintLayout并不太适合使用XML代码的方式编写布局，但是它非常适合使用可视化的方式编写界面布局。可视化操作的背后仍然是使用XML代码实现的，只不过这些代码是AndroidStudio根据我们的操作自动生成的。2、相对定位实操例举如图所示：。三、探索研究（课中）Constraint布局下控件移动很灵活，但太灵活，适合需要精确控制定位控件，即对约束布局ConstraintLayout属性参数准确把握，辅助线与居中倾向实操非常重要。四、评价检查（自评、互评、教师点评相结合）教师：激发--答疑（个别）、演示线性布局、表格布局（重点内容、技巧等）--再激发--答疑。自评、互评、教师点评。自评内容：任务完成情况、指出小组完成约束布局特点。互评内容：认同其他小组总结合理地方，提出认为不合理的地方。教师点评：总体评价总结提高通过对Android程序约束布局的练习，提出约束布局设计优化的建议。六、布置任务（学生接受任务）通过线上资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。七、撰写项目训练报告撰写项目二任务的关键知识点、操作流程、项目实施中出现的问题以及解决的方案，为后续项目学习提供借鉴。自我纠错，分析问题，解决问题，同时训练科学思维试，逐步提高和稳固2.4帧布局Framelayout课程教案课程名称Android应用开发项目名称个性名片任务名称帧布局Framelayout课时1授课地点科大讯飞人工智能实训室教学形式项目化教学、理实一体、线上线下混合式授课班级20应用电子技术2(对)学习情境以程序员身份，找出层叠的方式显示布局（如手机游戏中经常会发现一画面会叠加在另一些画面）。教学内容分析线性布局的编写方式和属性教学目标知识目标1、掌握帧布局Framelayout的特点；2、理解帧布局Framelayout属性参数。技能目标学生根据提供的代码，可以在XML文件中的进行代码运行，实现帧布局。素质目标团队协作、分组讨论、分析问题能力。教学重点帧布局Framelayout是一种特殊的布局，它以层叠的方式显示布局中的多个控件，最后添加的控件位于最前面。教学难点帧布局Framelayout属性参数学情分析有了线性布局和表格布局和帧布局的操作经验，并在XML文件中代码中编写布局等。提出是否可以像其他画图软件一样用拖动控键的方式来实现布局，所见即所得?教学设计课前布置任务：1、手机游戏中经常会发现一画面会叠加在另一些画面？2、通过大学MOOC教学平台，自学相关的视频；课中学生分别例举有重叠布局的UI帧布局的设计操作；课后再次寻找帧布局UI，发现他们的不同，学生可以仿照学生感兴趣的重叠控件进行参数修改，形成自已的新布局。思政设计善于发现和类比；通过学习可以改变和创新。教学方法问题导入法：通过布置任务，让学生首先自学找；课堂操作演示法：通过课中的实际操作强调参数属性的配置；学生实操演练，达到操作训练目的。考核评价自评、互评、教师评，项目评价表、项目考核表、线上考核成绩等。教学资源项目任务单、操作视频、PPT课件、知识点微课、拓展任务单等。教学流程教学步骤教学活动教学资源思政元素课前自主学习教师发布学习视频任务微视频、PPT、动画自主学习布置任务：手机游戏中经常会发现一画面会叠加在另一些画面？大学MOOC平台善于发现、比较学习如何画面重叠的控键大学MOOC平台自主学习能力任务描述1、完成帧布局管理；QQ群、微信等发挥学生的创造性任务实施学生小组讨论操作规范成果交流演示帧布局Framelayout的属性特点和使用注意项；实操结果、多媒体演示表达能力、团队精神考核评价学生互评评价表操作规范、责任意识课后拓展提高1、遇到程序出错，学会查找错误；2、修改帧布局Framelayout的属性参数值，改变UI；软件操作平台、大学MOOC自我纠错，分析问题，解决问题，同时训练科学思维试，逐步提高和稳固教学流程一、提出任务（课前）许多同学喜欢手机游戏，能不能找出游戏或其他应用中出现控键是重叠的现象？比如手机游戏中经常会发现一画面会叠加在另一些画面？是以层叠方式来显示布局中的多个控件。二、分析任务（课中）帧布局是一种特殊的布局，它以层叠的方式显示布局中的多个控件。帧布局为每个加入其中的控件创建一个空白区域（称为一帧，每个控件占据一帧）。采用帧布局方式设计界面时，所有控件都默认显示在屏幕左上角，并按照先后放入的顺序重叠摆放，先放