
由于这个模块内容较多,分为上、中、下 三篇博客分别来讲述,请耐心阅读。
课程模块分为四个部分
- [x] 课程列表
- [ ] 课程详情
- [ ] 视频播放
- [ ] 播放记录
课程模块(上)主要讲述课程列表部分
一、水平滑动广告栏界面
1、创建水平滑动广告栏界面
在res/layout文件夹下,创建一个布局文件,命名为main_adbanner。
2、导入界面图片
将广告栏界面所需图片default_img、banner_1.png、banner_2.png、banner_3.png导入到drawable文件夹。
3、界面代码——main_adbanner.xml
1<?xml version="1.0" encoding="utf-8"?> 2<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="vertical" 4 android:layout_width="match_parent" 5 android:layout_height="160dp" 6 android:id="@+id/rl_adBanner" 7 android:background="#eeeeee"> 8 <!-- 如果没有android.support.v4包可以手动导入 --> 9 <android.support.v4.view.ViewPager 10 android:id="@+id/vp_advertBanner" 11 android:layout_width="fill_parent" 12 android:layout_height="fill_parent" 13 android:layout_alignParentLeft="true" 14 android:layout_alignParentTop="true" 15 android:layout_marginBottom="1dp" 16 android:background="@drawable/default_img" 17 android:gravity="center"/> 18 <LinearLayout 19 android:layout_width="fill_parent" 20 android:layout_height="wrap_content" 21 android:layout_alignParentBottom="true" 22 android:background="@android:color/transparent"> 23 <com.boxuegu.view.ViewPagerIndicator 24 android:id="@+id/vpi_advert_indicator" 25 android:layout_width="0dp" 26 android:layout_height="fill_parent" 27 android:layout_weight="1" 28 android:gravity="center" 29 android:padding="4dp"/> 30 </LinearLayout> 31</RelativeLayout>
4、自定义控件
广告栏底部小圆点需要用自定义控件来实现。在com.boxuegu.view包中创建一个ViewPageIndicator类并继承LinearLayout类。代码如下:
1package com.boxuegu.view; 2 3import android.content.Context; 4import android.util.AttributeSet; 5import android.view.Gravity; 6import android.widget.ImageView; 7import android.widget.LinearLayout; 8import com.boxuegu.R; 9 10public class ViewPagerIndicator extends LinearLayout { 11 12 private int mCount; //小圆点的个数 13 private int mIndex; //当前小圆点的位置 14 private Context context; 15 16 public ViewPagerIndicator(Context context) { 17 this(context,null); 18 } 19 20 public ViewPagerIndicator(Context context,AttributeSet attrs) { 21 super(context, attrs); 22 this.context = context; 23 setGravity(Gravity.CENTER); //设置小圆点布局居中 24 } 25 26 //设置滑动到当前小圆点时其他小圆点的位置 27 public void setCurrentPosition(int currentIndex){ 28 mIndex = currentIndex; //当前小圆点 29 removeAllViews(); //移除界面上存在的view 30 int pex = 5; 31 for (int i=0;i<mCount;i++){ 32 ImageView imageView = new ImageView(context); 33 if (mIndex == i){ //滑到当前界面 34 //蓝色小圆点 35 imageView.setImageResource(R.drawable.indicator_on); 36 }else{ 37 //灰色小圆点 38 imageView.setImageResource(R.drawable.indicator_off); 39 } 40 imageView.setPadding(pex,0,pex,0); 41 addView(imageView); 42 } 43 } 44 45 //设置小圆点的数目 46 public void setCount(int count){ 47 this.mCount = count; 48 } 49}
5、indicator_on.xml和indicator_off.xml的创建
这两个文件分别对应蓝色和灰色的小圆点,在drawable文件夹下创建。
indicator_on.xml代码
1<?xml version="1.0" encoding="utf-8"?> 2<shape xmlns:android="http://schemas.android.com/apk/res/android" 3 android:shape="oval"> 4 <size 5 android:width="6dp" 6 android:height="6dp" /> 7 <solid android:color="#00ABF8" /> 8</shape>
indicator_off.xml代码
1<?xml version="1.0" encoding="utf-8"?> 2<shape xmlns:android="http://schemas.android.com/apk/res/android" 3 android:shape="oval"> 4 <size 5 android:width="6dp" 6 android:height="6dp" /> 7 <solid android:color="#737373" /> 8</shape>
二、课程界面
1、创建课程界面
在res/layout文件夹下创建一个布局文件命名为main_view_course。
2、导入界面图片
将所需图片 course_intro_icon.png、chapter_1_icon.png、chapter_2_icon.png、chapter_3_icon.png、chapter_4_icon.png、chapter_5_icon.png、chapter_6_icon.png、chapter_7_icon.png、chapter_8_icon.png、chapter_9_icon.png、chapter_10_icon.png、导入到drawable文件夹
3、界面代码——main_view_course.xml
1<?xml version="1.0" encoding="utf-8"?> 2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="vertical" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 android:background="@android:color/white"> 7 <include layout="@layout/main_adbanner"/> 8 <LinearLayout 9 android:layout_width="fill_parent" 10 android:layout_height="45dp" 11 > 12 <ImageView 13 android:layout_width="25dp" 14 android:layout_height="25dp" 15 android:layout_gravity="center_vertical" 16 android:layout_marginLeft="8dp" 17 android:src="@drawable/course_intro_icon"/> 18 <TextView 19 android:layout_width="wrap_content" 20 android:layout_height="fill_parent" 21 android:layout_marginLeft="5dp" 22 android:gravity="center_vertical" 23 android:text="WordPress 基础教程1-10章视频" 24 android:textColor="@android:color/black" 25 android:textSize="16sp" 26 android:textStyle="bold"/> 27 </LinearLayout> 28 <View 29 android:layout_width="fill_parent" 30 android:layout_height="1dp" 31 android:layout_marginLeft="8dp" 32 android:layout_marginRight="8dp" 33 android:background="#E4E4E4"/> 34 <ListView 35 android:id="@+id/lv_list" 36 android:layout_width="fill_parent" 37 android:layout_height="fill_parent" 38 android:layout_marginBottom="55dp" 39 android:divider="@null" 40 android:dividerHeight="0dp" 41 android:scrollbars="none"/> 42</LinearLayout>
三、课程界面Item
创建课程界面Item,在res/layout文件夹中创建一个布局文件,命名为course_list_item。代码如下:
1<?xml version="1.0" encoding="utf-8"?> 2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="horizontal" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 android:background="@android:color/white"> 7 <LinearLayout 8 android:layout_width="0dp" 9 android:layout_height="140dp" 10 android:layout_weight="1" 11 android:orientation="vertical"> 12 <RelativeLayout 13 android:layout_width="fill_parent" 14 android:layout_height="115dp"> 15 <ImageView 16 android:id="@+id/iv_left_img" 17 android:layout_width="fill_parent" 18 android:layout_height="fill_parent" 19 android:paddingBottom="4dp" 20 android:paddingLeft="8dp" 21 android:paddingRight="4dp" 22 android:paddingTop="8dp" 23 android:src="@drawable/chapter_1_icon"/> 24 <TextView 25 android:id="@+id/tv_left_img_title" 26 android:layout_width="fill_parent" 27 android:layout_height="wrap_content" 28 android:layout_alignParentBottom="true" 29 android:layout_marginBottom="4dp" 30 android:layout_marginLeft="10dp" 31 android:layout_marginRight="6dp" 32 android:background="#30000000" 33 android:paddingBottom="2dp" 34 android:paddingLeft="5dp" 35 android:paddingRight="5dp" 36 android:paddingTop="2dp" 37 android:textColor="@android:color/white" 38 android:textSize="12sp"/> 39 </RelativeLayout> 40 <TextView 41 android:id="@+id/tv_left_title" 42 android:layout_width="wrap_content" 43 android:layout_height="wrap_content" 44 android:layout_gravity="center_horizontal" 45 android:singleLine="true" 46 android:textColor="@android:color/black" 47 android:textSize="14sp"/> 48 </LinearLayout> 49 <LinearLayout 50 android:layout_width="0dp" 51 android:layout_height="140dp" 52 android:layout_weight="1" 53 android:orientation="vertical"> 54 <RelativeLayout 55 android:layout_width="fill_parent" 56 android:layout_height="115dp"> 57 <ImageView 58 android:id="@+id/iv_right_img" 59 android:layout_width="fill_parent" 60 android:layout_height="115dp" 61 android:paddingBottom="4dp" 62 android:paddingLeft="4dp" 63 android:paddingRight="8dp" 64 android:paddingTop="8dp" 65 android:src="@drawable/chapter_1_icon"/> 66 <TextView 67 android:id="@+id/tv_right_img_title" 68 android:layout_width="fill_parent" 69 android:layout_height="wrap_content" 70 android:layout_alignParentBottom="true" 71 android:layout_marginBottom="4dp" 72 android:layout_marginLeft="6dp" 73 android:layout_marginRight="10dp" 74 android:background="#30000000" 75 android:paddingBottom="2dp" 76 android:paddingLeft="5dp" 77 android:paddingRight="5dp" 78 android:paddingTop="2dp" 79 android:textColor="@android:color/white" 80 android:textSize="12sp"/> 81 </RelativeLayout> 82 <TextView 83 android:id="@+id/tv_right_title" 84 android:layout_width="wrap_content" 85 android:layout_height="wrap_content" 86 android:layout_gravity="center_horizontal" 87 android:singleLine="true" 88 android:textColor="@android:color/black" 89 android:textSize="14sp"/> 90 </LinearLayout> 91</LinearLayout>
四、创建CourseBean
在com.boxuegu.bean包中创建一个CourseBean类,用来创建课程所有属性。
1package com.boxuegu.bean; 2 3public class CourseBean { 4 public int id; //每章ID 5 public String imgTitle; //图片上的标题 6 public String title; //章标题 7 public String intro; //章视频简介 8 public String icon; //广告栏上的图片 9}
五、创建AdBannerFragment
在com.boxuegu包中创建一个fragment包,在fragment包中创建一个AdBannerFragment类并继承Fragment类。代码如下:
1package com.boxuegu.fragment; 2 3import com.boxuegu.R; 4import android.os.Bundle; 5import android.support.v4.app.Fragment; 6import android.view.LayoutInflater; 7import android.view.View; 8import android.view.ViewGroup; 9import android.widget.ImageView; 10 11public class AdBeannerFragment extends Fragment { 12 private String ab; //广告 13 private ImageView iv; //图片 14 public static AdBeannerFragment newInstance(Bundle args){ 15 AdBeannerFragment af = new AdBeannerFragment(); 16 af.setArguments(args); 17 return af; 18 } 19 @Override 20 public void onCreate(Bundle savedInstanceState){ 21 super.onCreate(savedInstanceState); 22 Bundle arg = getArguments(); 23 //获取广告图片名称 24 ab = arg.getString("ad"); 25 } 26 @Override 27 public void onActivityCreated(Bundle savedInstanceState){ 28 super.onActivityCreated(savedInstanceState); 29 } 30 @Override 31 public void onResume(){ 32 super.onResume(); 33 if (ab != null){ 34 if ("banner_1".equals(ab)){ 35 iv.setImageResource(R.drawable.banner_1); 36 }else if ("banner_2".equals(ab)){ 37 iv.setImageResource(R.drawable.banner_2); 38 }else if ("banner_3".equals(ab)){ 39 iv.setImageResource(R.drawable.banner_3); 40 } 41 } 42 } 43 @Override 44 public void onDestroy(){ 45 super.onDestroy(); 46 if (iv != null){ 47 iv.setImageDrawable(null); 48 } 49 } 50 @Override 51 public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){ 52 //创建广告图片控件 53 iv = new ImageView(getActivity()); 54 ViewGroup.LayoutParams lp = new ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 55 ViewGroup.LayoutParams.MATCH_PARENT); 56 iv.setLayoutParams(lp); 57 iv.setScaleType(ImageView.ScaleType.FIT_XY); 58 return iv; 59 } 60 61}
六、创建AdBannerAdapter
在com.boxuegu.adapter包中创建一个AdBannerAdapter类并继承FragmentStatePageAdapter类,并且实现OnTouchListener接口。
1package com.boxuegu.adapter; 2 3import com.boxuegu.bean.CourseBean; 4import com.boxuegu.fragment.AdBeannerFragment; 5import com.boxuegu.view.CourseView; 6import android.os.Bundle; 7import android.os.Handler; 8import android.support.v4.app.Fragment; 9import android.support.v4.app.FragmentManager; 10import android.support.v4.app.FragmentStatePagerAdapter; 11import android.view.MotionEvent; 12import android.view.View; 13import android.view.View.OnTouchListener; 14import java.util.ArrayList; 15import java.util.List; 16 17 18public class AdBannerAdapter extends FragmentStatePagerAdapter implements OnTouchListener { 19 private Handler mHandler; 20 private List<CourseBean> cabl; 21 public AdBannerAdapter(FragmentManager fm){ 22 super(fm); 23 cabl = new ArrayList<CourseBean>(); 24 } 25 public AdBannerAdapter(FragmentManager fm,Handler handler){ 26 super(fm); 27 mHandler = handler; 28 cabl = new ArrayList<CourseBean>(); 29 } 30 31 //设置数据更新界面 32 public void setDatas(List<CourseBean> cabl){ 33 this.cabl = cabl; 34 notifyDataSetChanged(); 35 } 36 37 @Override 38 public Fragment getItem(int index) { 39 Bundle args = new Bundle(); 40 if (cabl.size()>0) 41 args.putString("ad",cabl.get(index%cabl.size()).icon); 42 return AdBeannerFragment.newInstance(args); 43 } 44 45 @Override 46 public int getCount() { 47 return Integer.MAX_VALUE; 48 } 49 50 //返回数据集的真实容量大小 51 public int getSize(){ 52 return cabl == null?0:cabl.size(); 53 } 54 @Override 55 public int getItemPosition(Object object){ 56 //防止刷新结果显示列表时出现缓存数据,重载这个函数,默认返回POSITION_NONE 57 return POSITION_NONE; 58 } 59 60 @Override 61 public boolean onTouch(View v, MotionEvent event) { 62 mHandler.removeMessages(CourseView.MSG_AD_SLID); 63 return false; 64 } 65}
七、课程界面Adapter
在com.boxuegu.adapter包中创建一个CourseAdapter类,继承自BaseAdapter类。代码如下:
1package com.boxuegu.adapter; 2 3import android.content.Context; 4import android.content.Intent; 5import android.view.LayoutInflater; 6import android.view.View; 7import android.view.ViewGroup; 8import android.widget.BaseAdapter; 9import android.widget.ImageView; 10import android.widget.TextView; 11import java.util.List; 12import com.boxuegu.R; 13import com.boxuegu.activity.VideoListActivity; 14import com.boxuegu.bean.CourseBean; 15 16 17 18public class CourseAdapter extends BaseAdapter { 19 private Context mContext; 20 private List<List<CourseBean>> cbl; 21 public CourseAdapter(Context context){ 22 this.mContext = context; 23 } 24 25 //设置数据更新界面 26 public void setData(List<List<CourseBean>>cbl){ 27 this.cbl = cbl; 28 notifyDataSetChanged(); 29 } 30 31 //获取item的总数 32 @Override 33 public int getCount() { 34 return cbl == null?0:cbl.size(); 35 } 36 37 //根据position得到对应的item的对象 38 @Override 39 public List<CourseBean> getItem(int position) { 40 return cbl == null ? null : cbl.get(position); 41 } 42 43 //根据position得到对应的item的ID 44 @Override 45 public long getItemId(int position) { 46 return position; 47 } 48 49 //得到对应position的视图 50 @Override 51 public View getView(int position, View convertView, ViewGroup parent) { 52 final ViewHolder vh; 53 if (convertView == null){ 54 vh = new ViewHolder(); 55 convertView = LayoutInflater.from(mContext).inflate(R.layout.course_list_item,null); 56 vh.iv_left_img = (ImageView) convertView.findViewById(R.id.iv_left_img); 57 vh.iv_right_img = (ImageView) convertView.findViewById(R.id.iv_right_img); 58 vh.tv_left_img_title = (TextView) convertView.findViewById(R.id.tv_left_img_title); 59 vh.tv_left_title = (TextView) convertView.findViewById(R.id.tv_left_title); 60 vh.tv_right_img_title = (TextView) convertView.findViewById(R.id.tv_right_img_title); 61 vh.tv_right_title = (TextView) convertView.findViewById(R.id.tv_right_title); 62 convertView.setTag(vh); 63 }else { 64 //复用convertView 65 vh = (ViewHolder) convertView.getTag(); 66 } 67 final List<CourseBean> list = getItem(position); 68 if (list != null){ 69 for (int i=0;i<list.size();i++){ 70 final CourseBean bean = list.get(i); 71 switch (i){ 72 case 0: //设置左边图片与标题的信息 73 vh.tv_left_img_title.setText(bean.imgTitle); 74 vh.tv_left_title.setText(bean.title); 75 setLeftImg(bean.id,vh.iv_left_img); 76 vh.iv_left_img.setOnClickListener(new View.OnClickListener(){ 77 @Override 78 public void onClick(View v){ 79 //跳转到课程详情界面 80 81 } 82 }); 83 break; 84 case 1: //设置右边图片与标题的信息 85 vh.tv_right_img_title.setText(bean.imgTitle); 86 vh.tv_right_title.setText(bean.title); 87 setRightImg(bean.id,vh.iv_right_img); 88 vh.iv_right_img.setOnClickListener(new View.OnClickListener(){ 89 @Override 90 public void onClick(View v){ 91 //跳转到课程详情界面 92 93 } 94 }); 95 break; 96 default: 97 break; 98 } 99 } 100 } 101 102 return convertView; 103 } 104 105 //设置左边图片 106 private void setLeftImg(int id,ImageView iv_left_img){ 107 switch (id){ 108 case 1: 109 iv_left_img.setImageResource(R.drawable.chapter_1_icon); 110 break; 111 case 3: 112 iv_left_img.setImageResource(R.drawable.chapter_3_icon); 113 break; 114 case 5: 115 iv_left_img.setImageResource(R.drawable.chapter_5_icon); 116 break; 117 case 7: 118 iv_left_img.setImageResource(R.drawable.chapter_7_icon); 119 break; 120 case 9: 121 iv_left_img.setImageResource(R.drawable.chapter_9_icon); 122 break; 123 } 124 } 125 126 //设置右边图片 127 private void setRightImg(int id,ImageView iv_right_img){ 128 switch (id){ 129 case 2: 130 iv_right_img.setImageResource(R.drawable.chapter_2_icon); 131 break; 132 case 4: 133 iv_right_img.setImageResource(R.drawable.chapter_4_icon); 134 break; 135 case 6: 136 iv_right_img.setImageResource(R.drawable.chapter_6_icon); 137 break; 138 case 8: 139 iv_right_img.setImageResource(R.drawable.chapter_8_icon); 140 break; 141 case 10: 142 iv_right_img.setImageResource(R.drawable.chapter_10_icon); 143 break; 144 } 145 } 146 class ViewHolder{ 147 public TextView tv_left_img_title,tv_left_title,tv_right_img_title,tv_right_title; 148 public ImageView iv_left_img,iv_right_img; 149 } 150}
八、课程界面数据的存放
在assets文件夹下创建一个XML文件,命名为chaptertitle.xml,代码如下:
1<?xml version="1.0" encoding="UTF-8"?> 2 3<infos> 4 <course id="1"> 5 <imgtitle>博客(网站)简介</imgtitle> 6 <title>第1章 认识博客(网站)</title> 7 <intro> 博客,仅音译,英文名为Blogger,为Web Log的混成词。它的正式名称为网络日记;又音译为部落格或部落阁等,是使用特定的软件,在网络上出版、发表和张贴个人文章的人,或者是一种通常由个人管理、不定期张贴新的文章的网站。</intro> 8 </course> 9 <course id="2"> 10 <imgtitle>Linux系统简介</imgtitle> 11 <title>第2章 Linux系统简介</title> 12 <intro> Linux,全称GNU/Linux,是一套免费使用和自由传播的类UNIX操作系统,其内核由林纳斯·本纳第克特·托瓦兹于1991年第一次释出,它主要受到Minix和Unix思想的启发,是一个基于POSIX和Unix的多用户、多任务、支持多线程和多CPU的操作系统。</intro> 13 </course> 14 <course id="3"> 15 <imgtitle>初识WordPress</imgtitle> 16 <title>第3章 WordPress简介</title> 17 <intro> WordPress是一款个人博客系统,并逐步演化成一款内容管理系统软件,它是使用PHP语言和MySQL数据库开发的,用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。</intro> 18 </course> 19 <course id="4"> 20 <imgtitle> 安装MySQL数据库</imgtitle> 21 <title>第4章 安装MySQL数据库</title> 22 <intro> MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBMS (Relational Database Management System,关系数据库管理系统) 应用软件之一。</intro> 23 </course> 24 <course id="5"> 25 <imgtitle>安装Nginx</imgtitle> 26 <title>第5章 数据存储服务器</title> 27 <intro> Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,第一个公开版本0.1.0发布于2004年10月4日。</intro> 28 </course> 29 <course id="6"> 30 <imgtitle>PHP的搭建</imgtitle> 31 <title>第6章 安装PHP环境</title> 32 <intro> PHP即“超文本预处理器”,是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习,使用广泛,主要适用于Web开发领域。</intro> 33 </course> 34 35 <course id="7"> 36 <imgtitle>云服务器的购买</imgtitle> 37 <title>第7章 云服务器的购买</title> 38 <intro> 云服务器(Elastic Compute Service, ECS)是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件,即可迅速创建或释放任意多台云服务器。</intro> 39 </course> 40 <course id="8"> 41 <imgtitle>域名购买及备案</imgtitle> 42 <title>第8章 域名购买及备案</title> 43 <intro> 域名(英语:Domain Name),又称网域,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时对计算机的定位标识(有时也指地理位置)。</intro> 44 </course> 45 <course id="9"> 46 <imgtitle>安装WordPress</imgtitle> 47 <title>第9章 安装WordPress</title> 48 <intro> 丰富的插件和模板是WordPress非常流行的一个特性。WordPress插件数据库中有超过18000个插件,包括SEO、控件等等。个人可以根据它的核心程序提供的规则自己开发模板和插件。这些插件可以快速地把你的博客改变成cms、forums、门户等各种类型的站点。</intro> 49 </course> 50 <course id="10"> 51 <imgtitle>WordPress简单设置</imgtitle> 52 <title>第10章 WordPress简单设置</title> 53 <intro> WordPress 功能强大、扩展性强,这主要得益于其插件众多,易于扩充功能,基本上一个完整网站该有的功能,通过其第三方插件都能实现所有功能;</intro> 54 </course> 55</infos>
九、课程界面逻辑代码
1、在com.boxuegu.view包中新建一个CourseView类,代码如下:
1package com.boxuegu.view; 2 3import android.app.Activity; 4import android.os.Handler; 5import android.os.Message; 6import android.support.v4.app.FragmentActivity; 7import android.support.v4.view.ViewPager; 8import android.util.DisplayMetrics; 9import android.view.Display; 10import android.view.LayoutInflater; 11import android.view.View; 12import android.view.ViewGroup; 13import android.widget.ListView; 14import android.widget.RelativeLayout; 15import java.io.InputStream; 16import java.util.ArrayList; 17import java.util.List; 18import com.boxuegu.R; 19import com.boxuegu.adapter.AdBannerAdapter; 20import com.boxuegu.adapter.CourseAdapter; 21import com.boxuegu.bean.CourseBean; 22import com.boxuegu.utils.AnalysisUtils; 23 24public class CourseView { 25 26 public static final int MSG_AD_SLID = 002; 27 private LayoutInflater mInflater; 28 private FragmentActivity mContext; 29 private ArrayList<CourseBean> cadl; 30 private List<List<CourseBean>> cbl; 31 private View mCurrentView; 32 private ListView lv_list; 33 private CourseAdapter adapter; 34 private ViewPager adPager; 35 private Handler mHandler; 36 private AdBannerAdapter ada; //适配器 37 private ViewPagerIndicator vpi; //小圆点 38 private RelativeLayout adBannerLay; //广告条容器 39 40 public CourseView(FragmentActivity context) { 41 mContext = context; 42 //为之后将Layout转化为view时用 43 mInflater = LayoutInflater.from(context); 44 } 45 46 private void createView() { 47 mHandler = new MHandler(); 48 initAdData(); 49 getCourseData(); 50 initView(); 51 new AdAutoSlidThread().start(); 52 } 53 54 55 //获取课程信息 56 private void getCourseData() { 57 try { 58 InputStream is = mContext.getResources().getAssets().open("chaptertitle.xml"); 59 cbl = AnalysisUtils.getCouresInfos(is); 60 } catch (Exception e) { 61 e.printStackTrace(); 62 } 63 } 64 65 //初始化广告的数据 66 private void initAdData() { 67 cadl = new ArrayList<CourseBean>(); 68 for (int i = 0; i < 3; i++) { 69 CourseBean bean = new CourseBean(); 70 bean.id = (i + 1); 71 switch (i) { 72 case 0: 73 bean.icon = "banner_1"; 74 break; 75 case 1: 76 bean.icon = "banner_2"; 77 break; 78 case 2: 79 bean.icon = "banner_3"; 80 break; 81 default: 82 break; 83 } 84 cadl.add(bean); 85 } 86 } 87 88 private void initView() { 89 mCurrentView = mInflater.inflate(R.layout.main_view_course, null); 90 lv_list = (ListView) mCurrentView.findViewById(R.id.lv_list); 91 adapter = new CourseAdapter(mContext); 92 adapter.setData(cbl); 93 lv_list.setAdapter(adapter); 94 95 adPager = (ViewPager) mCurrentView.findViewById(R.id.vp_advertBanner); 96 adPager.setLongClickable(false); 97 ada = new AdBannerAdapter(mContext.getSupportFragmentManager(), mHandler); 98 adPager.setAdapter(ada); 99 adPager.setOnTouchListener(ada); 100 vpi = (ViewPagerIndicator) mCurrentView 101 .findViewById(R.id.vpi_advert_indicator); 102 vpi.setCount(ada.getSize()); 103 adBannerLay = (RelativeLayout) mCurrentView.findViewById(R.id.rl_adBanner); 104 adPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { 105 @Override 106 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 107 108 } 109 110 @Override 111 public void onPageSelected(int position) { 112 if (ada.getSize() > 0) { 113 vpi.setCurrentPosition(position % ada.getSize()); 114 } 115 } 116 117 @Override 118 public void onPageScrollStateChanged(int state) { 119 120 } 121 }); 122 resetSize(); 123 if (cadl != null) { 124 if (cadl.size() > 0) { 125 vpi.setCount(cadl.size()); 126 vpi.setCurrentPosition(0); 127 } 128 ada.setDatas(cadl); 129 } 130 } 131 132 //计算控件大小 133 private void resetSize() { 134 int sw = getScreenWidth(mContext); 135 int adLheight = sw / 2; //广告条高度 136 ViewGroup.LayoutParams adlp = adBannerLay.getLayoutParams(); 137 adlp.width = sw; 138 adlp.height = adLheight; 139 adBannerLay.setLayoutParams(adlp); 140 } 141 142 //获取屏幕宽度 143 private int getScreenWidth(Activity context) { 144 DisplayMetrics displayMetrics = new DisplayMetrics(); 145 Display display = context.getWindowManager().getDefaultDisplay(); 146 display.getMetrics(displayMetrics); 147 return displayMetrics.widthPixels; 148 } 149 150 //广告自动滑动 151 private class AdAutoSlidThread extends Thread { 152 @Override 153 public void run() { 154 super.run(); 155 while (true) { 156 try { 157 sleep(5000); 158 } catch (InterruptedException e) { 159 e.printStackTrace(); 160 } 161 if (mHandler != null) { 162 mHandler.sendEmptyMessage(MSG_AD_SLID); 163 } 164 } 165 } 166 } 167 168 //事件捕获 169 private class MHandler extends Handler { 170 @Override 171 public void dispatchMessage(Message msg) { 172 super.dispatchMessage(msg); 173 switch (msg.what) { 174 case MSG_AD_SLID: 175 if (ada.getCount() > 0) { 176 adPager.setCurrentItem(adPager.getCurrentItem() + 1); 177 } 178 break; 179 } 180 } 181 } 182 183 public View getView() { 184 if (mCurrentView == null) { 185 createView(); 186 } 187 return mCurrentView; 188 } 189 190 public void showView() { 191 if (mCurrentView == null) { 192 createView(); 193 } 194 mCurrentView.setVisibility(View.VISIBLE); 195 } 196}
2、修改界面代码
(1)、找到AnalysisUtils.java文件,在文件中添加一个解析XML文件的方法。
1public static List<List<CourseBean>> getCouresInfos(InputStream is) throws Exception{ 2 XmlPullParser parser = Xml.newPullParser(); 3 parser.setInput(is,"utf-8"); 4 List<List<CourseBean>> courseInfos=null; 5 List<CourseBean> couresList = null; 6 CourseBean courseInfo=null; 7 int count=0; 8 int type = parser.getEventType(); 9 while (type!=XmlPullParser.END_DOCUMENT){ 10 switch (type){ 11 case XmlPullParser.START_TAG: 12 if ("infos".equals(parser.getName())){ 13 courseInfos=new ArrayList<List<CourseBean>>(); 14 couresList = new ArrayList<CourseBean>(); 15 }else if ("course".equals(parser.getName())){ 16 courseInfo = new CourseBean(); 17 String ids = parser.getAttributeValue(0); 18 courseInfo.id = Integer.parseInt(ids); 19 }else if ("imgtitle".equals(parser.getName())){ 20 String imgtitle = parser.nextText(); 21 courseInfo.imgTitle = imgtitle; 22 }else if ("title".equals(parser.getName())){ 23 String title = parser.nextText(); 24 courseInfo.title = title; 25 }else if ("intro".equals(parser.getName())){ 26 String intro = parser.nextText(); 27 courseInfo.intro = intro; 28 } 29 break; 30 case XmlPullParser.END_TAG: 31 if ("course".equals(parser.getName())){ 32 count++; 33 couresList.add(courseInfo); 34 if (count%2==0){ 35 courseInfos.add(couresList); 36 couresList=null; 37 couresList=new ArrayList<CourseBean>(); 38 } 39 courseInfo=null; 40 } 41 break; 42 } 43 type=parser.next(); 44 } 45 return courseInfos; 46 }
(2)、修改底部导航栏,找到MainActivity.java,在private ExercisesView mExerciseView;下方添加:
private CourseView mCourseView;
(3)、找到MainActivity.java,在注释//课程界面的下方添加如下代码:
1if (mCourseView == null){ 2 mCourseView = new CourseView(this); 3 mBodyLayout.addView(mCourseView.getView()); 4 }else{ 5 mCourseView.getView(); 6 } 7 mCourseView.showView();
十、运行效果


