| 本項目是用eclipse軟件編寫，經過我的親自實踐，其真實有效，希望能給您有所幫助😘😘
項目版本：android5.1.1 AVD建議：android4.4.2及以上 若有不足之處或不對的地方，歡迎大佬們指點 |
文章目錄
- 效果圖：
- 1、導入界面圖片
- 2、創建課程詳情界面佈局文件`activity_video_list.xml`
- 3、課程詳情界而`Item`
- （1）將視頻列表`Item`界面所需圖片`course_bar_icon.png`導入到`drawable`文件夾中
- （2）在`res/layout`文件夾中，創建一個佈局文件`video_list_item.xml`
- 4、創建`VideoBean`
- 5、課程洋情界面`Adapter`
- 6、視頻列表數據的存放
- 7、創建`U_VIDEO_PLAY_LIST`表
- 8、創建保存視頻信息到數據庫方法
- 9、課程詳情界面邏輯代碼
- 10、修改課程界面數據適配器
- 11、修改`AndroidManifest.xml`文件
課程詳情界面用於展示每章節課程簡介和視頻列表
點擊課程界面列表中的條目，會跳轉到課程詳情界面。課程詳情界面是顯示每章節的課程簡介和視頻列表。課程簡介部分展示該章節的簡介，視頻列表 部分展示該章節所包含的課程視頻。當用戶點擊視頻列表中的某個條目時，會播放相應的視頻
效果圖：
1、導入界面圖片
將課程詳情界面所需圖片default_video_list_icon.png、video_list_intro_icon.png 導入 到drawable文件夾中
注意，第二張圖片是透明的矩形圖片：540 x 48
2、創建課程詳情界面佈局文件activity_video_list.xml
res/layout文件夾中新建activity_video_list.xml文件，代碼如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="200dp"
android:background="@drawable/default_video_list_icon" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:gravity="center"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="@drawable/video_list_intro_icon" >
<TextView
android:id="@+id/tv_intro"
android:layout_width="fill_parent"
android:layout_height="46dp"
android:layout_centerVertical="true"
android:background="#30B4FF"
android:gravity="center"
android:text="@string/tv_intro"
android:textColor="#FFFFFF"
android:textSize="20sp" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="48dp"
android:background="#C3C3C3" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="@drawable/video_list_intro_icon" >
<TextView
android:id="@+id/tv_video"
android:layout_width="fill_parent"
android:layout_height="46dp"
android:layout_centerVertical="true"
android:background="#FFFFFF"
android:gravity="center"
android:text="@string/tv_video"
android:textColor="#000000"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ListView
android:id="@+id/lv_video_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:divider="#E4E4E4"
android:dividerHeight="1dp"
android:scrollbars="none"
android:visibility="gone" />
<ScrollView
android:id="@+id/sv_chapter_intro"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_chapter_intro"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:lineSpacingMultiplier="1.5"
android:padding="10dp"
android:text="@string/tv_chapter_intro"
android:textColor="@android:color/black"
android:textSize="14sp" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
</LinearLayout>
在values文件夾下的string.xml文件裏面輸入文本信息：
<string name="tv_intro">簡 介</string>
<string name="tv_video">視 頻</string>
<string name="tv_chapter_intro">安卓簡介</string>
3、課程詳情界而Item
由於課程詳情界面用到了ListView控件，因此需要爲該控件創建一個Item界面
（1）將視頻列表Item界面所需圖片course_bar_icon.png導入到drawable文件夾中
（2）在res/layout文件夾中，創建一個佈局文件video_list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="15dp"
android:paddingTop="15dp">
<ImageView
android:id="@+id/iv_left_icon"
android:layout_width="25dp"
android:layout_height="25dp"
android:src="@drawable/course_bar_icon" />
<TextView
android:id="@+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:text="[第一節]Android簡介"
android:textColor="#333333"
android:textSize="14sp" />
</LinearLayout>
4、創建VideoBean
由於每個章節的視頻詳細信息都會有章節id 、視頻id 、章節標題、視頻標題、視頻播放地址等屬性，因此需要創建一個VideoBean類來存放這些屬性。
在china.ynyx.heyunhui.bean 包中創建一個VideoBean類：
package china.ynyx.heyunhui.bean;
public class VideoBean {
public int chapterId;// 章節Id
public int videoId;// 視頻Id
public String title;// 章節標題
public String secondTitle;// 視頻標題
public String videoPath;// 視頻播放地址
}
5、課程洋情界面Adapter
由於課程詳情界面的視頻列表用的是ListView 控件，因此需要創建一個數據適配器 VideoListAdapter對ListView進行數據適配
在 china.ynyx.heyunhui.adapter 包中，創建一個VideoListAdapter 類繼承 BaseAdapter類
具體代碼如下：VideoListAdapter.java
package china.ynyx.heyunhui.adapter;
import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import china.ynyx.heyunhui.R;
import china.ynyx.heyunhui.bean.VideoBean;
import java.util.List;
public class VideoListAdapter extends BaseAdapter{
private Context mContext;
private List<VideoBean> vbl;//視頻列表數據
private int selectedPosition = -1;//點擊時選中的位置
private OnSelectListener onSelectListener;
public VideoListAdapter(Context context, OnSelectListener onSelectListener) {
this.mContext = context;
this.onSelectListener = onSelectListener;
}
public void setSelectedPosition(int position) {
selectedPosition = position;
}
/**
* 設置數據更新界面
*/
public void setData(List<VideoBean> vbl) {
this.vbl = vbl;
notifyDataSetChanged();
}
/**
* 獲取Item的總數
*/
@Override
public int getCount() {
return vbl == null ? 0 : vbl.size();
}
/**
* 根據position得到對應Item的對象
*/
@Override
public VideoBean getItem(int position) {
return vbl == null ? null : vbl.get(position);
}
/**
* 根據position得到對應Item的id
*/
@Override
public long getItemId(int position) {
return position;
}
/**
* 得到相應position對應的Item視圖，
* position是當前Item的位置，
* convertView參數就是滾出屏幕的Item的View
*/
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
final ViewHolder vh;
if (convertView == null) {
vh = new ViewHolder();
convertView = LayoutInflater.from(mContext).inflate(
R.layout.video_list_item, null);
vh.tv_title = (TextView) convertView
.findViewById(R.id.tv_video_title);
vh.iv_icon = (ImageView) convertView
.findViewById(R.id.iv_left_icon);
convertView.setTag(vh);
} else {
vh = (ViewHolder) convertView.getTag();
}
final VideoBean bean = getItem(position);
vh.iv_icon.setImageResource(R.drawable.course_bar_icon);
vh.tv_title.setTextColor(Color.parseColor("#333333"));
if (bean != null) {
vh.tv_title.setText(bean.secondTitle);
// 設置選中效果
if (selectedPosition == position) {
vh.iv_icon.setImageResource(R.drawable.course_intro_icon);
vh.tv_title.setTextColor(Color.parseColor("#009958"));
} else {
vh.iv_icon.setImageResource(R.drawable.course_bar_icon);
vh.tv_title.setTextColor(Color.parseColor("#333333"));
}
}
convertView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (bean == null)
return;
// 播放視頻
onSelectListener.onSelect(position, vh.iv_icon);
}
});
return convertView;
}
class ViewHolder {
public TextView tv_title;
public ImageView iv_icon;
}
/**
* 創建OnSelectListener接口把位置position和控件ImageView傳遞到Activity界面
*/
public interface OnSelectListener {
void onSelect(int position, ImageView iv);
}
}
6、視頻列表數據的存放
視頻列表部分需要展示相關的視頻信息，因此需要在assect文件夾中創建一個data，json文件保存視頻相關信息。data.json文件中包含有章節id、視頻id、章節名稱、視頻名稱和視頻地址。由於博學谷項目使用的是本地數據，因此需要在data.json文件中指定視頻所在位置。
選中assets文件夾，然後右擊並選擇File選項，創建一個data.json文件，把視頻列表的數據以JSON的格式存放在data.json文件中。
具體代碼如下：data.json
[
{
"chapterId": 1,
"videoId": "1",
"title": "第1章 Android 基礎入門",
"secondTitle": "Android系統簡介",
"videoPath": "video11.mp4"
},
{
"chapterId": 1,
"videoId": "2",
"title": "第1章 Android 基礎入門",
"secondTitle": "筆記軟件",
"videoPath": ""
},
{
"chapterId": 2,
"videoId": "1",
"title": "第2章 Android UI開發",
"secondTitle": "幀佈局",
"videoPath": ""
},
{
"chapterId": 2,
"videoId": "2",
"title": "第2章 Android UI開發",
"secondTitle": "表格佈局",
"videoPath": ""
},
{
"chapterId": 3,
"videoId": "1",
"title": "第3章 Activity",
"secondTitle": "Activity的啓動模式",
"videoPath": ""
},
{
"chapterId": 3,
"videoId": "2",
"title": "第3章 Activity",
"secondTitle": "Activity中的數據傳遞",
"videoPath": ""
},
{
"chapterId": 4,
"videoId": "1",
"title": "第4章 數據存儲",
"secondTitle": "文件存儲",
"videoPath": ""
},
{
"chapterId": 4,
"videoId": "2",
"title": "第4章 數據存儲",
"secondTitle": "XML序列化與SharedPreferences",
"videoPath": ""
},
{
"chapterId": 5,
"videoId": "1",
"title": "第5章 SQLite 數據庫",
"secondTitle": "SQLite數據庫的使用",
"videoPath": ""
},
{
"chapterId": 5,
"videoId": "2",
"title": "第5章 SQLite 數據庫",
"secondTitle": "ListView控件的使用",
"videoPath": ""
},
{
"chapterId": 6,
"videoId": "1",
"title": "第6章 廣播接收者",
"secondTitle": "內容提供者簡介",
"videoPath": ""
},
{
"chapterId": 6,
"videoId": "2",
"title": "第6章 廣播接收者",
"secondTitle": "內容提供者的訪問",
"videoPath": ""
},
{
"chapterId": 7,
"videoId": "1",
"title": "第7章 服務",
"secondTitle": "廣播接收者與自定義廣播",
"videoPath": ""
},
{
"chapterId": 7,
"videoId": "2",
"title": "第7章 服務",
"secondTitle": "廣播類型與常用的廣播接收者",
"videoPath": ""
},
{
"chapterId": 8,
"videoId": "1",
"title": "第8章 內容提供者",
"secondTitle": "服務的創建與生命週期",
"videoPath": ""
},
{
"chapterId": 8,
"videoId": "2",
"title": "第8章 內容提供者",
"secondTitle": "服務的啓動方式",
"videoPath": ""
},
{
"chapterId": 9,
"videoId": "1",
"title": "第9章 網絡編程",
"secondTitle": "訪問網絡",
"videoPath": ""
},
{
"chapterId": 9,
"videoId": "2",
"title": "第9章 網絡編程",
"secondTitle": "數據的提交方式",
"videoPath": ""
},
{
"chapterId": 10,
"videoId": "1",
"title": "第10章 高級編程",
"secondTitle": "圖形圖像處理與動畫",
"videoPath": ""
},
{
"chapterId": 10,
"videoId": "2",
"title": "第10章 高級編程",
"secondTitle": "多媒體、與Fragment",
"videoPath": ""
}
]
注意：如果運行的時候有亂碼，那就在電腦桌面上新建一個txt文件，添加內容後保存爲UTF-8編碼格式，然後將文件名及後綴改爲data.json
7、創建U_VIDEO_PLAY_LIST表
由於播放視頻後會有一個視頻播放記錄，因此需要在數據庫中創建一個視頻播放的表
找到.sqlite包中的SQLiteHelper.java類中，找到public static final String U_USERINFO = "userinfo";語句，在該語句下方添加如下代碼：
public static final String U_VIDEO_PLAY_LIST = "videoplaylist";//視頻播放列表
找到SQLiteHelper類中的onCreate()方法，在該方法中添加如下代碼：
// 創建視頻播放記錄表
db.execSQL("CREATE TABLE IF NOT EXISTS " + U_VIDEO_PLAY_LIST + "( "
+ "_id INTEGER PRIMARY KEY AUTOINCREMENT, "
+" userName VARCHAR,"//用戶名
+ "chapterId INT, "//章節ID號
+ "videoId INT, "// 小節ID號
+ "videoPath VARCHAR, "// 視頻地址
+ "title VARCHAR,"// 視頻章節名稱
+ "secondTitle VARCHAR"// 視頻名稱
+ ")");
8、創建保存視頻信息到數據庫方法
用戶播放過的視頻會有一個視頻記錄，因此需要創建一個saveVideoPlayList()方法將播放過的視頻信息保存到數據庫中。同一用戶在第二 次點擊同一個視頻時，會判斷此視頻是否已經存在於數據庫，若存在，則刪除此視頻並 重新保存最新的視頻信息。
在.utils包中的DBUtils.java文件中添加如下代碼：
/**
* 保存視頻播放記錄
*/
public void saveVideoPlayList(VideoBean bean,String userName) {
// 判斷如果裏面有此播放記錄則需刪除重新存放
if (hasVideoPlay(bean.chapterId, bean.videoId,userName)) {
// 刪除之前存入的播放記錄
boolean isDelete=delVideoPlay(bean.chapterId, bean.videoId,userName);
if(!isDelete){
//沒有刪除成功時，則需跳出此方法不再執行下面的語句
return;
}
}
ContentValues cv = new ContentValues();
cv.put("userName", userName);
cv.put("chapterId", bean.chapterId);
cv.put("videoId", bean.videoId);
cv.put("videoPath", bean.videoPath);
cv.put("title", bean.title);
cv.put("secondTitle", bean.secondTitle);
db.insert(SQLiteHelper.U_VIDEO_PLAY_LIST, null, cv);
}
/**
* 判斷視頻記錄是否存在
*/
public boolean hasVideoPlay(int chapterId, int videoId,String userName) {
boolean hasVideo = false;
String sql = "SELECT * FROM " + SQLiteHelper.U_VIDEO_PLAY_LIST
+ " WHERE chapterId=? AND videoId=? AND userName=?";
Cursor cursor = db.rawQuery(sql, new String[] { chapterId + "",
videoId + "" ,userName});
if (cursor.moveToFirst()) {
hasVideo = true;
}
cursor.close();
return hasVideo;
}
/**
* 刪除已經存在的視頻記錄
*/
public boolean delVideoPlay(int chapterId, int videoId,String userName) {
boolean delSuccess=false;
int row = db.delete(SQLiteHelper.U_VIDEO_PLAY_LIST,
" chapterId=? AND videoId=? AND userName=?", new String[] { chapterId + "",
videoId + "" ,userName});
if (row > 0) {
delSuccess=true;
}
return delSuccess;
}
9、課程詳情界面邏輯代碼
課程詳情界面主要展示課程簡介和視頻列表，當點擊“課程簡介”按鈕時，展示課程簡介的佈局；當點擊“視頻列表”按鈕時，展示視頻列表佈局。在視頻列表中，視頻列表數據是根據課程界面傳遞過來的章節id獲取的，當用戶是登錄狀態並點擊了視頻列表時，會把點擊過的視頻信息保存到數據庫中，然後在播放記錄界面顯示出來
在.activity包中新建VideoListActivity.java文件
package china.ynyx.heyunhui.activity;
import android.content.Context;
import android.content.SharedPreferences;
import android.content.pm.ActivityInfo;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.ScrollView;
import android.widget.TextView;
import android.widget.Toast;
import china.ynyx.heyunhui.R;
import china.ynyx.heyunhui.adapter.VideoListAdapter;
import china.ynyx.heyunhui.bean.VideoBean;
import china.ynyx.heyunhui.utils.AnalysisUtils;
import china.ynyx.heyunhui.utils.DBUtils;
import org.json.JSONArray;
import org.json.JSONObject;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.List;
public class VideoListActivity extends AppCompatActivity implements View.OnClickListener{
private TextView tv_intro, tv_video, tv_chapter_intro;
private ListView lv_video_list;
private ScrollView sv_chapter_intro;
private VideoListAdapter adapter;
private List<VideoBean> videoList;
private int chapterId;
private String intro;
private DBUtils db;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_video_list);
// 設置此界面爲豎屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
// 從課程界面傳遞過來的章節id
chapterId = getIntent().getIntExtra("id", 0);
// 從課程界面傳遞過來的章節簡介
intro = getIntent().getStringExtra("intro");
// 創建數據庫工具類的對象
db = DBUtils.getInstance(VideoListActivity.this);
initData();
init();
}
/**
* 初始化界面UI控件
*/
private void init() {
tv_intro = (TextView) findViewById(R.id.tv_intro);
tv_video = (TextView) findViewById(R.id.tv_video);
lv_video_list = (ListView) findViewById(R.id.lv_video_list);
tv_chapter_intro = (TextView) findViewById(R.id.tv_chapter_intro);
sv_chapter_intro= (ScrollView) findViewById(R.id.sv_chapter_intro);
adapter = new VideoListAdapter(this, new VideoListAdapter.OnSelectListener() {
@Override
public void onSelect(int position, ImageView iv) {
adapter.setSelectedPosition(position); // 設置適配器的選中項
VideoBean bean = videoList.get(position);
String videoPath = bean.videoPath;
adapter.notifyDataSetChanged();// 更新列表框
if (TextUtils.isEmpty(videoPath)) {
Toast.makeText(VideoListActivity.this,
"本地沒有此視頻，暫無法播放", Toast.LENGTH_SHORT).show();
return;
}else{
// 判斷用戶是否登錄，若登錄則把此視頻添加到數據庫
if(readLoginStatus()){
String userName= AnalysisUtils.readLoginUserName(VideoListActivity.this);
db.saveVideoPlayList(videoList.get(position),userName);
}
// 跳轉到視頻播放界面
}
}
});
lv_video_list.setAdapter(adapter);
tv_intro.setOnClickListener(this);
tv_video.setOnClickListener(this);
adapter.setData(videoList);
tv_chapter_intro.setText(intro);
tv_intro.setBackgroundColor(Color.parseColor("#30B4FF"));
tv_video.setBackgroundColor(Color.parseColor("#FFFFFF"));
tv_intro.setTextColor(Color.parseColor("#FFFFFF"));
tv_video.setTextColor(Color.parseColor("#000000"));
}
/**
* 控件的點擊事件
*/
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tv_intro:// 簡介
lv_video_list.setVisibility(View.GONE);
sv_chapter_intro.setVisibility(View.VISIBLE);
tv_intro.setBackgroundColor(Color.parseColor("#30B4FF"));
tv_video.setBackgroundColor(Color.parseColor("#FFFFFF"));
tv_intro.setTextColor(Color.parseColor("#FFFFFF"));
tv_video.setTextColor(Color.parseColor("#000000"));
break;
case R.id.tv_video:// 視頻
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.parseColor("#000000"));
tv_video.setTextColor(Color.parseColor("#FFFFFF"));
break;
default:
break;
}
}
/**
* 設置視頻列表本地數據
*/
private void initData() {
JSONArray jsonArray;
InputStream is = null;
try {
is = getResources().getAssets().open("data.json");
jsonArray = new JSONArray(read(is));
videoList = new ArrayList<VideoBean>();
for (int i = 0; i < jsonArray.length(); i++) {
VideoBean bean = new VideoBean();
JSONObject jsonObj = jsonArray.getJSONObject(i);
if (jsonObj.getInt("chapterId") == chapterId) {
bean.chapterId=jsonObj.getInt("chapterId");
bean.videoId=Integer.parseInt(jsonObj
.getString("videoId"));
bean.title=jsonObj.getString("title");
bean.secondTitle=jsonObj.getString("secondTitle");
bean.videoPath=jsonObj.getString("videoPath");
videoList.add(bean);
}
bean = null;
}
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 讀取數據流,參數in是數據流
*/
private String read(InputStream in) {
BufferedReader reader = null;
StringBuilder sb = null;
String line=null;
try {
sb = new StringBuilder();//實例化一個StringBuilder對象
//用InputStreamReader把in這個字節流轉換成字符流BufferedReader
reader = new BufferedReader(new InputStreamReader(in));
while ((line = reader.readLine())!=null){//從reader中讀取一行的內容判斷是否爲空
sb.append(line);
sb.append("\n");
}
} catch (IOException e) {
e.printStackTrace();
return "";
} finally {
try {
if (in != null)
in.close();
if (reader != null)
reader.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return sb.toString();
}
/**
* 從SharedPreferences中讀取登錄狀態
*/
private boolean readLoginStatus() {
SharedPreferences sp = getSharedPreferences("loginInfo",
Context.MODE_PRIVATE);
boolean isLogin = sp.getBoolean("isLogin", false);
return isLogin;
}
}
10、修改課程界面數據適配器
由於課程詳情界面是通過課程界面數據適配器跳轉的，因此需要找CourseAdapter.java文件中的getView()方法，在該方法中的兩個註釋“//跳轉到課程詳情界面”下方分別添加如下代碼，並導入對應的包：
Intent intent = new Intent(mContext,VideoListActivity.class);
intent.putExtra("id", bean.id);
intent.putExtra("intro", bean.intro);
mContext.startActivity(intent);
11、修改AndroidManifest.xml文件
在AndroidManifest.xml文件中添加如下代碼：
<activity android:name="china.ynyx.heyunhui.activity.VideoListActivity"></activity>
參考資料：《android項目實戰——博學谷》（黑馬程序員著）