小学信息技术 课件教案 6年级下册 课时12_第二单元_羊城新八景——界面布局与屏幕切换-课件.pptx

《小学信息技术 课件教案 6年级下册 课时12_第二单元_羊城新八景——界面布局与屏幕切换-课件.pptx》由会员分享，可在线阅读，更多相关《小学信息技术 课件教案 6年级下册 课时12_第二单元_羊城新八景——界面布局与屏幕切换-课件.pptx（45页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、六年级广州版信息技术第二单元广州市越秀区署前路小学 严佩宜第第1313课课 羊城新八景羊城新八景界面布局与屏幕切换界面布局与屏幕切换学习的主要内容1.增加屏幕2.“标签”组件的使用3.界面布局的使用4.屏幕的切换“羊城新八景”应用程序 点击首页的景点按钮，就能切换到相应的景点介绍页面。点击返回按钮又能回到首页。思考：思考：“羊城新八景羊城新八景”程序有什么功能？实现这些功能程序有什么功能？实现这些功能需要解决哪些问题？需要解决哪些问题？任务分析任务分析任务一：新建项目、增加屏幕Screen1Screen1是首页，新增一是首页，新增一个个“Screen”“Screen”对应一个景点，如：对应一个

2、景点，如：Screen1 Screen1 首页首页 Screen2 Screen2 古祠流芳古祠流芳任务一：新建项目、增加屏幕Screen2Screen2为了为了显示显示8 8个景点的介绍内容个景点的介绍内容，首，首先要增加先要增加屏幕屏幕。屏幕屏幕的标识名称是的标识名称是“Screen“Screen”。Screen1Screen1任务一：新建项目、增加屏幕注意：屏幕名称只能字母、数字和下划线，且一定要字母开头。屏幕名称一旦命名确定后就不能修改了。我们接下来无论是组件还是逻辑设计时都要注意当前是在哪个屏幕。标题文字标题文字各个景点的各个景点的图片按钮图片按钮木棉仔的图片木棉仔的图片任务二：对每

3、个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计标题文字标题文字任务二：对每个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计标签：显示文字 任务二：对每个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计任务二：对每个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计轻松逛花市羊城新八景如何使两个组件并排如何使两个组件并排？任务二：对每个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计“界面布局”类组件：水平布局如何使两个组件并排如何使两个组件并排？任务二：对每个屏

4、幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计如何使按钮组件以表如何使按钮组件以表格形式排列？格形式排列？任务二：对每个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计如何使按钮组件以表如何使按钮组件以表格形式排列？格形式排列？任务二：对每个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计“界面布局”类组件：表格布局 水平对齐：水平对齐：“居中：居中：3”3”标标 题：题：首页首页 图图 标：标：logo.jpglogo.jpg任务二：对每个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计步

5、骤一：设置步骤一：设置步骤一：设置步骤一：设置Screen1Screen1Screen1Screen1属性。属性。属性。属性。请暂停播放，完成操作后再继续。任务二：对每个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计步骤二：设计界面，添加步骤二：设计界面，添加步骤二：设计界面，添加步骤二：设计界面，添加“水平布局水平布局水平布局水平布局”和和和和“表格布局表格布局表格布局表格布局”并设置属性。并设置属性。并设置属性。并设置属性。表格布局默认为表格布局默认为表格布局默认为表格布局默认为2 2 2 2行行行行2 2 2 2列，我们可以直接在属性更改行列数。列，我们可以直

6、接在属性更改行列数。列，我们可以直接在属性更改行列数。列，我们可以直接在属性更改行列数。表格内部的框线是暂时看不到的。表格内部的框线是暂时看不到的。表格内部的框线是暂时看不到的。表格内部的框线是暂时看不到的。布局组件布局组件布局组件属性布局组件属性水平布局水平布局水平布局水平布局1 1 1 1表格布局表格布局表格布局表格布局1 1 1 1请暂停播放，完成操作后再继续。任务二：对每个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计步骤三：在步骤三：在步骤三：在步骤三：在“水平布局水平布局水平布局水平布局1”1”1”1”中添加中添加中添加中添加“图像图像图像图像”和和和和

7、“标签标签标签标签”组件，并重命组件，并重命组件，并重命组件，并重命名和设置属性。名和设置属性。名和设置属性。名和设置属性。组件名称组件名称组件属性组件属性请暂停播放，完成操作后再继续。任务二：对每个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计图像按钮图像按钮属性属性属性属性第一，表格里的是按钮不是图片。任务二：对每个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计第二，注意按钮组件定位在哪个单元格注意按钮组件定位在哪个单元格任务二：对每个屏幕进行组件设计（1 1）Screen1Screen1的组件设计的组件设计步骤四：在步骤四：在步骤四

8、：在步骤四：在“表格布局表格布局表格布局表格布局1”1”1”1”中添加中添加中添加中添加“按钮按钮按钮按钮”组件，并重命名和设置属性。组件，并重命名和设置属性。组件，并重命名和设置属性。组件，并重命名和设置属性。组件名称组件名称组件属性组件属性古祠流芳按钮古祠流芳按钮1 1图像：1gslf.png越秀风华按钮越秀风华按钮2 2图像：2yxfh.png云山叠翠按钮云山叠翠按钮3 3图像：3ysdc.png湿地唱晚按钮湿地唱晚按钮4 4图像：4sdwc.png科城锦绣按钮科城锦绣按钮5 5图像：5kcjx.png塔耀新城按钮塔耀新城按钮6 6图像：6tyxc.png荔湾胜景按钮荔湾胜景按钮7 7图

9、像：lwsj.png珠光流水按钮珠光流水按钮8 8图像：zgls.png请暂停播放，完成操作后再继续。小知识：水平布局、垂直布局和表格布局可互相嵌套，水平布局、垂直布局和表格布局可互相嵌套，组合多种布局效果。组合多种布局效果。小知识：水平布局、垂直布局和表格布局可互相嵌套，水平布局、垂直布局和表格布局可互相嵌套，组合多种布局效果。组合多种布局效果。任务二：对每个屏幕进行组件设计（2 2）Screen2Screen2的组件设置的组件设置。切换到切换到“Screen2Screen2”，将标题设为，将标题设为“景点介绍景点介绍”。任务二：对每个屏幕进行组件设计（2 2）Screen2Screen2的

10、组件设计。的组件设计。请暂停播放，完成操作后再继续。水平对齐：居中：水平对齐：居中：3 3；宽度：充满；宽度：充满字号：字号：2828；文本：古祠流芳；文本颜色：红色；文本：古祠流芳；文本颜色：红色水平对齐：居中：水平对齐：居中：3 3；宽度：充满；宽度：充满水平对齐：居中：水平对齐：居中：3 3；宽度：充满；宽度：充满水平对齐：居右：水平对齐：居右：2 2；宽度：充满；宽度：充满图片：图片：1gclf.png1gclf.png文本：文本：文本：返回文本：返回屏幕屏幕位置位置内容内容组件组件功能功能Screen1第一部分图片、标题文字水平布局+图像、标签图文并茂的标题第二部分八张图片表格布局+

11、8个按钮以表格方式排列8个图片按钮Screen2第一行标题文字水平布局+标签居中显示标题文字第二行图片水平布局+图像居中显示景点图片第三行简介水平布局+标签居中显示简介文字第四行返回水平布局+按钮右边显示返回按钮思考：如何实现屏幕的切换切换呢？任务三：完成首页与景点页面切换的逻辑设计完成首页与景点页面切换的逻辑设计当当 被点击，被点击，屏幕屏幕 。古祠流芳按钮古祠流芳按钮跳转到跳转到Screen2Screen2当当 被点击，被点击，屏幕屏幕 。返回按钮返回按钮跳转回跳转回Screen1Screen1思考：如何实现屏幕的切换切换呢？任务三：完成首页与景点页面切换的逻辑设计完成首页与景点页面切换的

12、逻辑设计当按钮被点击当按钮被点击屏幕跳转到另一屏幕屏幕跳转到另一屏幕任务三：完成首页与景点页面切换的逻辑设计完成首页与景点页面切换的逻辑设计“控制控制控制控制”内置块内置块内置块内置块字符串文本字符串文本字符串文本字符串文本代码块代码块代码块代码块当按钮被点击当按钮被点击屏幕跳转到另一屏幕屏幕跳转到另一屏幕注意：注意：1.1.确定确定屏幕名称屏幕名称输入正确。输入正确。任务三：完成首页与景点页面切换的逻辑设计完成首页与景点页面切换的逻辑设计注意：注意：1.1.确定确定屏幕名称屏幕名称输入正确。输入正确。2.2.要确认当前是在哪个屏幕要确认当前是在哪个屏幕。任务三：完成首页与景点页面切换的逻辑设

13、计完成首页与景点页面切换的逻辑设计请暂停播放，完成操作后再继续。继续增加七个景点对应的屏幕，参考Screen2设计组件、编写程序，并进行测试。实现点击Screen1中任一景点就能切换到该景点的效果。任务四：完成完成“羊城新八景羊城新八景”项目项目首页首页Screen1Screen1古祠流芳古祠流芳Screen2越秀风华越秀风华Screen3云山叠翠云山叠翠Screen4湿地唱晚湿地唱晚Screen5科城锦绣科城锦绣Screen6塔耀新城塔耀新城Screen7荔湾胜景荔湾胜景Screen8珠光流水珠光流水Screen9请暂停播放，完成操作后再继续。拓展任务：综合应用所学内容，完善和丰富“羊城新八

14、景”项目。补充更多的“羊城新八景”的图片，更加全面地展示“羊城新八景”的魅力。补充景点交通、游览要点等详细攻略，提高APP的实用性。设计更多的介绍广州文化的设计更多的介绍广州文化的APPAPP，如红色文化之旅、美食之旅、艺术之旅、传统文化之旅等等，更好地展示广州的文化魅力。“羊城新八景”的开发设计1、新建项目2、增加屏幕3、组件设计Screen1水平布局图片、标签表格布局按钮Screen2水平布局标签、图片、按钮4、逻辑设计Screen1Screen25、连接调试总结总结功能功能问题问题解决方法解决方法1、有多个画面如何增加多个画面呢？增加屏幕“Screen”“Screen”2、首页上图文并茂如何在屏幕上显示标题文字？“标签标签”组件组件3、首页的景点图片按钮以田字格形式排列如何使图片摆放得像表格一样？“表格布局表格布局”组件组件4、点击图片按钮跳转不同的画面如何实现切换不同的屏幕呢？逻辑设计控制屏幕的切换总结总结操作操作要注意的地方要注意的地方增加屏幕屏幕名称：字母开头，字母+数字+下划线组成，确定后不能改“界面布局”组件的使用注意组件拖动到布局的位置可以互相嵌套使用“打开另一屏幕 屏幕名称”代码块切换屏幕注意确认当前是哪个屏幕屏幕名称不能输入错误再见