资源简介

(共45张PPT)
第13课 羊城新八景——界面布局与屏幕切换
学习的主要内容
“羊城新八景”应用程序
点击首页的景点按钮，就能切换到相应的景点介绍页面。点击返回按钮又能回到首页。
思考：“羊城新八景”程序有什么功能？实现这些功能需要解决哪些问题？
任务分析
任务一：新建项目、增加屏幕
Screen1是首页，新增一个“Screen”对应一个景点，如：
Screen1 —— 首页
Screen2 —— 古祠流芳
任务一：新建项目、增加屏幕
Screen2
为了显示8个景点的介绍内容，首先要增加屏幕。
屏幕的标识名称是“Screen”。
Screen1
任务一：新建项目、增加屏幕
注意：
屏幕名称只能字母、数字和下划线，且一定要字母开头。
屏幕名称一旦命名确定后就不能修改了。
我们接下来无论是组件还是逻辑设计时都要注意当前是在哪个屏幕。
标题文字
各个景点的图片按钮
木棉仔的图片
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
标题文字
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
标签：显示文字
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
轻松逛花市
羊城新八景
如何使两个组件并排？
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
“界面布局”类组件：
水平布局
如何使两个组件并排？
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
如何使按钮组件以表格形式排列？
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
如何使按钮组件以表格形式排列？
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
“界面布局”类组件：
表格布局
水平对齐：“居中：3”
标 题： 首页
图 标： logo.jpg
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
步骤一：设置Screen1属性。
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
步骤二：设计界面，添加“水平布局”和“表格布局”并设置属性。
表格布局默认为2行2列，我们可以直接在属性更改行列数。
表格内部的框线是暂时看不到的。
布局组件 布局组件属性
水平布局1
表格布局1
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
步骤三：在“水平布局1”中添加“图像”和“标签”组件，并重命名和设置属性。
组件名称 组件属性
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
图像按钮
属性
第一，表格里的是按钮不是图片。
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
第二，注意按钮组件定位在哪个单元格
任务二：对每个屏幕进行组件设计
（1）Screen1的组件设计
步骤四：在“表格布局1”中添加“按钮”组件，并重命名和设置属性。
组件名称 组件属性 古祠流芳按钮1 图像：1gslf.png
越秀风华按钮2 图像：2yxfh.png
云山叠翠按钮3 图像：3ysdc.png
湿地唱晚按钮4 图像：4sdwc.png
科城锦绣按钮5 图像：5kcjx.png
塔耀新城按钮6 图像：6tyxc.png
荔湾胜景按钮7 图像：lwsj.png
珠光流水按钮8 图像：zgls.png
小知识：水平布局、垂直布局和表格布局可互相嵌套，
组合多种布局效果。
小知识：水平布局、垂直布局和表格布局可互相嵌套，
组合多种布局效果。
任务二：对每个屏幕进行组件设计
（2）Screen2的组件设置。
切换到“Screen2”，将标题设为“景点介绍”。
任务二：对每个屏幕进行组件设计
（2）Screen2的组件设计。
水平对齐：居中：3；宽度：充满
字号：28；文本：古祠流芳；文本颜色：红色
水平对齐：居中：3；宽度：充满
水平对齐：居中：3；宽度：充满
水平对齐：居右：2；宽度：充满
图片：1gclf.png
文本：
文本：返回
屏幕 位置 内容 组件 功能
Screen1 第一部分 图片、标题文字 水平布局+图像、标签 图文并茂的标题
第二部分 八张图片 表格布局+8个按钮 以表格方式排列8个图片按钮
Screen2 第一行 标题文字 水平布局+标签 居中显示标题文字
第二行 图片 水平布局+图像 居中显示景点图片
第三行 简介 水平布局+标签 居中显示简介文字
第四行 返回 水平布局+按钮 右边显示返回按钮
思考：如何实现屏幕的切换呢？
任务三：完成首页与景点页面切换的逻辑设计
当 被点击，屏幕 。
古祠流芳按钮
跳转到Screen2
当 被点击，
屏幕 。
返回按钮
跳转回Screen1
思考：如何实现屏幕的切换呢？
任务三：完成首页与景点页面切换的逻辑设计
任务三：完成首页与景点页面切换的逻辑设计
“控制”内置块
字符串文本代码块
注意：
1.确定屏幕名称输入正确。
任务三：完成首页与景点页面切换的逻辑设计
注意：
1.确定屏幕名称输入正确。
2.要确认当前是在哪个屏幕。
任务三：完成首页与景点页面切换的逻辑设计
继续增加七个景点对应的屏幕，参考Screen2设计组件、编写程序，并进行测试。实现点击Screen1中任一景点就能切换到该景点的效果。
任务四：完成“羊城新八景”项目
首页 Screen1
古祠流芳 Screen2
越秀风华 Screen3
云山叠翠 Screen4
湿地唱晚 Screen5
科城锦绣 Screen6
塔耀新城 Screen7
荔湾胜景 Screen8
珠光流水 Screen9
拓展任务：
综合应用所学内容，完善和丰富“羊城新八景”项目。
补充更多的“羊城新八景”的图片，更加全面地展示“羊城新八景”的魅力。
补充景点交通、游览要点等详细攻略，提高APP的实用性。
设计更多的介绍广州文化的APP，如红色文化之旅、美食之旅、艺术之旅、传统文化之旅等等，更好地展示广州的文化魅力。
总结
功能 问题 解决方法
1、有多个画面 如何增加多个画面呢？ 增加屏幕“Screen”
2、首页上图文并茂 如何在屏幕上显示标题文字？ “标签”组件
3、首页的景点图片按钮以田字格形式排列 如何使图片摆放得像表格一样？ “表格布局”组件
4、点击图片按钮跳转不同的画面 如何实现切换不同的屏幕呢？ 逻辑设计控制屏幕的切换
总结
操作 要注意的地方
增加屏幕 屏幕名称：字母开头，字母+数字+下划线组成，确定后不能改
“界面布局”组件的使用 注意组件拖动到布局的位置
可以互相嵌套
使用“打开另一屏幕 屏幕名称”代码块切换屏幕 注意确认当前是哪个屏幕
屏幕名称不能输入错误
再见

展开更多......

收起↑