第7章 课程模块

1、Android项目实战博学谷 第7章 课程模块 课程列表 课程详情 视频播放 播放记录 u 掌握博学谷课程模块的开发，能够实现课程列表的展示；u 掌握课程详情模块的开发，能够实现视频的播放功能；u 掌握播放记录模块的开发，能够实现对数据库的熟练运用。 学习目标 7.1 课程列表7.2 课程详情主讲内容Speech content主讲内容7.3 视频播放7.4 播放记录 7.1 课程列表任务综述任务综述在博学谷项目开发中，程序经过欢迎界面后会直接进入主界面也就是课程界面。课程界面分为上下两部分，上部分通过ViewPager与Fragment实现滑动广告展示，下部分是通过ListView控件来展示

2、Android移动开发基础案例教程1-10章的课程列表。由于博学谷项目用的是本地数据并且课程界面数据量比较大，因此课程界面的所有数据需存放在XML文件中，通过解析XML文件来获取数据填充界面。 【知识点】【知识点】 Fragment的使用； ViewPager控件； XML文件的解析； 自定义控件的使用。【技能点】【技能点】 掌握课程界面的设计和逻辑构思； 通过Fragment与ViewPager控件实现广告栏的滑动效果； 通过解析XML文件获取每章节的课程； 掌握如何自定义控件。7.1 课程列表 【任务7-】水平滑动广告栏界面任务分析任务分析水平滑动广告栏主要用于展示广告信息或者活动信息，由

3、ViewPager控件和一个自定义的线性布局ViewPagerIndicator组成的，界面效果如图7-1所示。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-】水平滑动广告栏界面 【任务7-2】课程界面任务分析任务分析课程界面主要是由水平滑动广告栏和基础视频列表组成，广告栏主要用于展示博学谷的教材体系及所得奖项信息，基础视频列表主要是展示Android 移动开发基础案例教程1-10章的课程列表，界面效果如图7-2所示。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-2】课程界面 【任务7-3】课程界面Item任务分析任务分析课程界面

4、是使用ListView控件展示视频列表的，因此需要创建一个该列表的Item界面。每个Item中包含有两个章节信息，每一个章节信息中又包含一个章节图片，一个章节名称和一个章节概要，界面效果如图7-3所示。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-3】课程界面Item 【任务7-4】创建CourseBean任务分析任务分析由于每章课程都会包含章节Id、课程图片上的标题、章节标题、章节视频简介等属性，同时在课程界面还需要一个广告栏图片属性，因此需要创建一个CourseBean类来存放这些属性。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任

5、务7-4】创建CourseBean 【任务7-5】创建AdBannerFragment任务分析任务分析由于课程界面的广告栏用到了ViewPager控件，因此创建一个AdBannerFragment类来设置ViewPager控件中的数据。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-5】创建AdBannerFragment 【任务7-6】创建AdBannerAdapter任务分析任务分析由于广告栏用到了ViewPager控件，因此需要创建一个数据适配器AdBannerAdapter对ViewPager控件进行数据适配。 任务实施任务实施任务步骤（任务步骤（详见教材

6、详见教材P15P21）【任务7-6】创建AdBannerAdapter 【任务7-7】课程界面Adapter任务分析任务分析课程界面的课程列表是用ListView控件展示的，因此需要创建一个数据适配器CourseAdapter对ListView控件进行数据适配。由于每个Item分为左右两部分，因此需要在CourseAdapter中判断数据是加载到哪个部分的。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-7】课程界面Adapter 【任务7-8】课程界面数据的存放任务分析任务分析在assets文件夹中创建一个XML文件，用于存放课程界面的数据。该XML文件中包含有

7、章节id，章节标题，章节图片上的概述，以及章节简介。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-8】课程界面数据的存放 【任务7-9】课程界面逻辑代码任务分析任务分析在课程界面需要编写广告栏逻辑和章节视频列表逻辑，由于广告栏每隔一段时间会自动切换到下一张图片，因此可以创建一个线程进行实现。章节视频列表数据是从assets文件夹中的chaptertitle.xml文件解析加载的。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-9】课程界面逻辑代码 （5）修改底部导航栏if (mCourseView = null) mCourseVi

8、ew = new CourseView(this);mBodyLayout.addView(mCourseView.getView(); else mCourseView.getView();mCourseView.showView();找到【任务4-2】MainActivity.java文件，在该文件的private ExercisesView mExercisesView;语句下方添加如下代码：private CourseView mCourseView;在createView()方法中，当case为0时，在注释“/课程界面”的下方添加如下代码： 7.1 课程列表7.2 课程详情主讲内容S

9、peech content主讲内容7.3 视频播放7.4 播放记录 7.2 课程详情任务综述任务综述课程详情界面用于展示每章节课程简介和视频列表，其中视频列表的数据是从assets文件夹中的data.json文件中获取的。当用户是登录状态时，此界面所播放过的视频信息会保存到本地数据库中，同时出现在用户的播放记录中，本案例以播放本地视频为例（注意此视频首先要保存到手机SD卡中）。 【知识点】【知识点】VideoView控件；JSON数据解析；数据库SQLite的使用。【技能点】【技能点】掌握课程详情界面的设计和逻辑构思；掌握如何解析JSON数据；通过SQLite数据库实现视频信息的保存功能。7.

10、2 课程详情 任务分析任务分析在博学谷项目中，点击课程界面列表中的条目，会跳转到课程详情界面。课程详情界面是显示每章节的课程简介和视频列表。课程简介部分展示该章节的简介，视频列表部分展示该章节所包含的课程视频。当用户点击视频列表中的某个条目时，会播放相应的视频，界面效果如图7-4所示。【任务7-10】课程详情界面 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-10】课程详情界面 任务分析任务分析由于课程详情界面用到了ListView控件，因此需要为该控件创建一个Item界面，界面效果如图7-5所示。【任务7-11】课程详情界面Item 任务实施任务实施任务步骤（任

11、务步骤（详见教材详见教材P15P21）【任务7-11】课程详情界面Item 【任务7-12】创建VideoBean任务分析任务分析由于每章节的视频详细信息都会有章节Id、视频Id、章节标题、视频标题、视频播放地址等属性，因此需要创建一个VideoBean类来存放这些属性。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-12】创建VideoBean 【任务7-13】课程详情界面Adapter任务分析任务分析由于课程详情界面的视频列表用的是ListView控件，因此需要创建一个数据适配器VideoListAdapter对ListView进行数据适配。在数据适配器中需要

12、为Item添加点击事件的监听，当点击Item时需要跳转到视频播放界面播放相应的视频。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-13】课程详情界面Adapter 【任务7-14】视频列表数据的存放任务分析任务分析视频列表部分需要展示相关的视频信息，因此需要在assets文件夹中创建一个data.json文件保存视频相关信息。data.json文件中包含有章节Id，视频Id，章节名称，视频名称和视频地址。由于博学谷项目使用的是本地数据，因此需要在data.json文件中指定视频所在位置。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7

13、-14】视频列表数据的存放 【任务7-15】课程详情界面逻辑代码任务分析任务分析课程详情界面主要展示课程简介和视频列表，当点击课程简介按钮时，展示课程简介的布局；当点击视频列表按钮时，展示视频列表布局。在视频列表中，视频列表数据是根据课程界面传递过来的章节Id获取的，当用户是登录状态并点击了视频列表时，会把点击过的视频信息保存到数据库中，然后在播放记录界面显示出来。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-15】课程详情界面逻辑代码 7.1 课程列表7.2 课程详情主讲内容Speech content主讲内容7.3 视频播放7.4 播放记录 7.3 视频播放

14、任务综述任务综述视频播放界面主要是将视频详情界面或者播放记录界面的视频进行全屏播放，获取视频所在的本地路径并进行加载即可完成视频播放。 【知识点】【知识点】VideoView控件【技能点】【技能点】掌握视频播放界面的设计和逻辑构思；通过VideoView控件实现本地视频的播放。7.3 视频播放 【任务7-16】视频播放界面任务分析任务分析由于视频播放界面只是用来播放视频的，因此只需放置1个VideoView控件全屏显示在此界面即可。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-16】视频播放界面 【任务7-17】视频播放界面逻辑代码任务分析任务分析VideoPl

15、ayActivity类用于实现视频播放逻辑，首先获取从课程详情或播放记录界面传递过来的视频地址，之后加载视频地址进行视频播放。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-17】视频播放界面逻辑代码 Intent intent=new Intent(VideoListActivity.this,VideoPlayActivity.class); intent.putExtra(videoPath, videoPath); intent.putExtra(position, position); startActivityForResult(intent, 1);

16、（3）修改课程详情界面找到【任务7-15】VideoListActivity.java文件中的init()方法，在注释“/跳转到视频播放界面”下方添加如下代码： Override protected void onActivityResult(int requestCode, int resultCode, Intent data) super.onActivityResult(requestCode, resultCode, data); if(data!=null) /接收播放界面回传过来的被选中的视频的位置 int position=data.getIntExtra(position,

17、0); adapter.setSelectedPosition(position);/设置被选中的位置 /视频选项卡被选中时所有图标的颜色值 lv_video_list.setVisibility(View.VISIBLE); sv_chapter_intro.setVisibility(View.GONE); tv_intro.setBackgroundColor(Color.parseColor(#FFFFFF); tv_video.setBackgroundColor(Color.parseColor(#30B4FF); tv_intro.setTextColor(Color.parse

18、Color(#000000); tv_video.setTextColor(Color.parseColor(#FFFFFF); （3）修改课程详情界面 7.1 课程列表7.2 课程详情主讲内容Speech content主讲内容7.3 视频播放7.4 播放记录 7.4 播放记录任务综述任务综述播放记录界面用于展示用户播放过的视频信息。由于在课程详情界面播放过的视频信息都在数据库中保存，因此在进入播放记录界面时要判断数据库中是否有视频信息，如果没有，则显示暂无播放记录。当用户点击播放记录中任意一条信息时就跳转到视频播放界面，开始播放选中的视频。 【知识点】【知识点】SQLite数据库的使用【技能点】【技能点】掌握播放记录界面的设计和逻辑构思；通过SQLite数据库查询播放过的视频信息。7.4 播放记录 【任务7-18】视频播放界面任务分析任务分析播放记录界面主要用于显示课程详情界面播放过的视频信息，播放记录界面效果如图7-6所示。 任务实施任务实施任务步骤（任务步骤（详见教材详见教材P15P21）【任务7-18】视频播放界面 【任务7