視頻列表頁面實現
效果圖
相關佈局
視頻VideoFragment頁面放一個ListView存放視頻列表
每條列表佈局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.volokh.danylo.video_player_manager.ui.VideoPlayerView
android:id="@+id/video_view"
android:layout_height="match_parent"
android:layout_width="match_parent"
/>
<ImageView
android:background="#C00FFF"
android:id="@+id/cover_image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:text="我是標題"
android:textSize="25sp"
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
功能實現
引入第三方視頻庫插件
引入三個依賴,分別是視頻管理器,視頻列表,因爲依賴用到了recyclerview,所以雖然用不到,但是也要導入,否則會報錯。
從服務端獲取數據
根據服務端的數據進行解析json,用Gson插件直接快速創建存放視頻bean文件VideoData。
在MyApi中添加獲取視頻數據地址的方法getVideoData()。
請求數據
//2:獲取服務端數據
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
System.out.println("VideoFragment onActivityCreated");
//retrofit ->MyApi
retrofit.create(MyApi.class).getVideoData().enqueue(new Callback<VideoData>() {
@Override
public void onResponse(Call<VideoData> call, Response<VideoData> response) {
try {
System.out.println("VideoFragment onResponse");
System.out.println(response.body().data);//json
setDataToListView(response.body().data);
//# 1:滾動播放列表中心的視頻
initCalculator();
//# 6:添加滾動監聽器
onListViewScroll();
initIndex();
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
public void onFailure(Call<VideoData> call, Throwable t) {
Toast.makeText(getContext(), "網絡異常", Toast.LENGTH_SHORT).show();
}
});
}
顯示
編寫setDataToListView方法顯示視頻列表
//3:顯示
private void setDataToListView(VideoData.VideoBean data) {
if(listView!=null){
//做一個數據的轉換 VlistBean->MyVideoItem
for(VideoData.VideoBean.VlistBean video: data.vlist){
list.add(new MyVideoItem(getContext(),getVideoManager(),video));
}
//創建適配器
//#視頻列表:1:添加適配器
//參1:播放管理者 參2:上下文
VideoListViewAdapter adapter=new VideoListViewAdapter(getVideoManager(),getContext(),list);
//設置適配器
listView.setAdapter(adapter);
}
}
這時顯示的還只是文字和覆蓋的圖片,還沒有播放功能,下面是滾動播放功能。
滾動播放功能實現
初始化列表索引
@Override
public void onResume() {
super.onResume();
System.out.println("VideoFragment onResume");
initIndex();
}
private void initIndex() {
if(!list.isEmpty()){
listView.post(new Runnable() {
@Override
public void run() {
//由座標得到item的位置position
mListItemVisibilityCalculator.onScrollStateIdle(
mItemsPositionGetter,
listView.getFirstVisiblePosition(),
listView.getLastVisiblePosition());
}
});
}
}
計算處於列表中間的條目是哪個
private ListItemsVisibilityCalculator mListItemVisibilityCalculator;
//# 2:Getter可以獲取視頻的position
private ItemsPositionGetter mItemsPositionGetter;
/*
# 3:將座標轉成position
記錄列表滾動的狀態
SCROLL_STATE_IDLE:列表停住
*/
private int mScrollState = AbsListView.OnScrollListener.SCROLL_STATE_IDLE;
private void initCalculator() {
/**
* 5:用於計算處於列表中間的條目是哪個。
* 暫停其他視頻,播放當前視頻
*/
mListItemVisibilityCalculator =
new SingleListViewItemActiveCalculator(new DefaultSingleItemCalculatorCallback(), list);
mItemsPositionGetter = new ListViewItemPositionGetter(listView);
}
滾動播放
private void onListViewScroll() {
listView.setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
// # 6 :記錄狀態
mScrollState = scrollState;
if (scrollState == SCROLL_STATE_IDLE && !list.isEmpty()) { //停止
mListItemVisibilityCalculator.onScrollStateIdle(mItemsPositionGetter, view.getFirstVisiblePosition(), view.getLastVisiblePosition());
}
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
if (!list.isEmpty()) {
//計算可見item的座標
System.out.println("mListItemVisibilityCalculator="+mListItemVisibilityCalculator);
System.out.println("mItemsPositionGetter="+mItemsPositionGetter);
mListItemVisibilityCalculator.onScroll(mItemsPositionGetter, firstVisibleItem, visibleItemCount, mScrollState);
}
}
});
}
當頁面處於後臺時,那麼停止播放
@Override
public void onStop() {
super.onStop();
// 如果頁面處於後臺,那麼停止播放
playerManager.resetMediaPlayer();
}