2.2　课程界面

课程界面主要包含四部分，分别是标题栏部分、广告轮播图部分、课程列表部分和导航栏部分。接下来本节将针对课程界面的制作进行详细讲解。

2.2.1　制作标题栏

步骤1　创建页面并命名为“Course”，放入手机外框及系统导航栏，将屏幕背景设置为白色。然后将文本元件拖入工作区，用于制作标题栏部分，设置宽高为360×50，如图2-6所示。

步骤2　将文本标签的背景设为蓝色，文本内容设置为“博学谷课程”，字号设置为20，文本颜色设置为白色，位置设置为水平和垂直居中显示，如图2-7所示。

2.2.2　制作广告轮播图

广告轮播图部分用于展示宣传图片，并且能够自动切换到下一张，因此需要使用动态面板进行实现。

步骤1　首先拖入一个图片元件，并将宽高设置为360×180，如图2-8所示。

步骤2　双击图片元件，添加第一张展示图，如图2-9所示。

步骤3　使用椭圆形元件，为轮播图添加3个小圆点，并设置第一个椭圆形元件的填充色为蓝色，其他椭圆形元件为灰色，如图2-10所示。

步骤4　选中图片元件与3个椭圆形元件进行组合，之后将其转换为动态面板，如图2-11所示。

步骤5　由于首页需要展示3张轮播图，因此需要三个动态面板。接下来再复制两个动态面板，然后双击State2面板，更改第2个面板中的展示图片，并将第2个椭圆形元件的填充颜色设置为蓝色，恢复第1个椭圆形元件的填充颜色为灰色，如图2-12所示。

步骤6　双击State3面板，更改第3个面板中的展示图片，并将第3个椭圆形元件的填充颜色设置为蓝色，恢复第2个椭圆形元件的填充颜色为灰色，如图2-13所示。

步骤7　返回课程界面，将制作好的动态面板放入课程界面中，如图2-14所示。

步骤8　添加动态面板交互事件，实现图片轮播效果。可以选择载入时添加交互事件，将动态面板状态设置为“Next”，勾选“向后循环”，设置循环间隔时间为2000毫秒，设置进入动画为“向左滑动”，如图2-15所示。

2.2.3　制作视频列表标题

步骤1　在工作区域中，拖入一个文本标签，用于展示视频标题文本，将文本标签的宽高设置为300×40，字号设置为16，对齐方式设置为左对齐，如图2-16所示。

步骤2　将文本标签放入课程界面中，使文本标签与屏幕的右侧对齐，如图2-17所示。

步骤3　向工作区域拖入一个图片元件，用于放置视频列表图标，并将宽高设置为30×30，如图2-18所示。

步骤4　将视频列表图标放入课程界面中，与视频标题文本水平对齐，且坐标为x=28，y=331，如图2-19所示。

2.2.4　制作课程列表界面

步骤1　将图片元件拖入工作区域，设置宽高为140×100，选择章节展示图片，如图2-20所示。

步骤2　在图片上有一行章节简介文本，可以通过文本标签进行实现。将文本标签拖入工作区域，设置宽高为140×20，在文本标签的样式中设置字体大小为11，字体颜色为白色，文本标签的背景为灰色，不透明度为70％，如图2-21所示。

步骤3　将文本标签放在图片之上，且保证元件底部对齐，如图2-22所示。

步骤4　再放置一个文本标签，用于显示章节名称，该标签的宽高为140×30，如图2-23所示。

步骤5　将章节名称框顶部与图片底部对齐，由于每个章节的条目布局相同，因此可以将其进行组合，如图2-24所示。

步骤6　将第1章条目放入课程界面中，坐标尺寸为x=28，y=376，如图2-25所示。

步骤7　制作其余章节条目，第2章的条目坐标为x=208，y=376，完成视频列表的其余部分，如图2-26所示。

至此，视频列表部分制作完成，在屏幕底部还有导航栏部分，接下来将详细讲解导航栏的制作。

2.2.5　制作底部导航栏

导航栏用于点击不同按钮跳转到不同页面，在导航栏中主要包含导航栏背景、界面图标和界面文本，接下来按步骤实现导航栏的制作。

步骤1　将矩形元件拖入工作区域，设置宽高为360×55，将元件背景设置为灰色，如图2-27所示。

步骤2　将图片元件拖入工作区域，设置宽高为24×24，由于当前界面为课程界面，因此课程界面的图片应设置为蓝色图片，表示选中状态，如图2-28所示。

步骤3　将文本标签拖入工作区域，用于显示当前界面文本。将文本标签宽高设置为48×14，字号设置为11，由于课程界面为当前展示界面，因此将界面文本的颜色设置为蓝色，表示为选中状态，并将界面图标与文本标签进行组合以方便使用，如图2-29所示。

步骤4　制作其他界面的图片及文本标签。需要注意的是，未选中界面的图标需要设置成灰色的未选中图片，同样文本颜色也设置成灰色表示未选中状态，如图2-30所示。

步骤5　将制作好的导航栏放入课程界面中，如图2-31所示。

2.2.6　制作课程详情界面

课程详情界面主要包括图片展示部分、界面选择导航栏和界面内容展示部分，接下来将实现视频详情界面。

步骤1　创建新页面，命名为“Videos”，放入手机外框和系统状态栏。将图片元件拖入原型图中用于放置教材简介图片，设置宽高为360×200，导入需要展示的图片，如图2-32所示。

步骤2　接下来制作界面切换按钮，当点击不同按钮时，按钮会更改选中状态，同时相应的界面内容也会随之改变。由于这个按钮具有动态效果，因此可以用动态面板来实现。首先将文本标签拖入工作区域，设置宽高为180×40，字体大小为18，字体颜色为白色，背景颜色为蓝色，如图2-33所示。

步骤3　将文本标签元件转换为动态面板，设置动态面板的名称，以便之后的使用，如图2-34所示。

步骤4　复制State1，制作未选中状态下的文本标签。在State2中将文本标签背景修改为白色，字体颜色修改为黑色，如图2-35所示。

步骤5　将动态面板放入原型图中，如图2-36所示。

步骤6　将简介动态面板进行复制并命名，制作视频动态面板。需要注意的是，视频界面默认在未选中状态，因此视频动态面板中的State1需要使用白色背景色，文字颜色为黑色，如图2-37所示。

步骤7　将视频动态面板中的State2文本标签的背景颜色设为蓝色，字体颜色设为白色，如图2-38所示。

步骤8　将视频动态面板放入原型图中，如图2-39所示。

步骤9　为简介动态面板添加交互事件，当点击“简介”时，简介按钮处于选中状态，即简介动态面板的State1状态，视频按钮处于未选中状态，即视频动态面板的State1状态，如图2-40所示。

步骤10　为视频动态面板添加交互事件，当点击“视频”时，视频按钮处于选中状态，即视频动态面板的State2状态，简介按钮处于未选中状态，即简介动态面板的State2状态，如图2-41所示。

步骤11　制作简介展示部分，将文本标签拖入原型图，设置宽高为360×328，字体大小为14，背景颜色为白色，行间距为20，如图2-42所示。

步骤12　由于在点击“简介”按钮或“视频”按钮时，会分别切换到简介界面和视频列表界面，因此也可以将此部分制作成动态面板，并重命名动态面板，如图2-43所示。

步骤13　复制动态面板State1，在State2中制作视频列表。首先将图片元件拖入原型图中，用于设置视频选项图，设置宽高为25×25，如图2-44所示。

步骤14　将文本标签拖入工作区域，用于显示视频名称，设置宽高为290×50，字体大小为16，垂直居中，如图2-45所示。

步骤15　将矩形元件拖入工作区域，设置宽高为340×1，背景颜色为灰色，与视频名称元件底部对齐，如图2-46所示。

步骤16　完成本章视频列表，如图2-47所示。

步骤17　修改简介动态面板的点击事件，当点击“简介”按钮时，将内容详情动态面板的状态设为State1，如图2-48所示。

步骤18　修改视频动态面板的点击事件，当点击“视频”按钮时，将内容详情动态面板的状态设为State2，如图2-49所示。

2.2.7　添加课程列表的交互事件

课程详情界面制作完成后，还需要返回课程界面添加交互事件，当点击章节图片时跳转到相应的课程详情界面，此处以第1章课程为例来添加交互事件，如图2-50所示。

2.2.8　添加欢迎界面的交互事件

至此，课程界面已经制作完成，接下来完成欢迎界面的自动跳转功能，设置欢迎界面的交互事件，让欢迎界面等待3秒自动进入课程界面。首先在欢迎界面中添加“载入时”事件，设置等待时间为3000毫秒，然后再设置当前窗口中打开课程界面，如图2-51所示。