前言
大家好右蹦,這是這個系列的第四篇,在閱讀這篇文章之前歼捐,建議可以先看下之前系列的文章何陆,為了節(jié)省篇幅,之前詳細說過的地方豹储,這里就不再詳細描述了:
- 【Android 進階】仿抖音系列之翻頁上下滑切換視頻(一)
- 【Android 進階】仿抖音系列之列表播放視頻(二)
- 【Android 進階】仿抖音系列之列表播放視頻(三)
- 【Android 進階】仿抖音系列之翻頁上下滑切換視頻(四)
- 【Android 進階】仿抖音系列之視頻預(yù)覽和錄制(五)
這一篇贷盲,要說實現(xiàn)的是第一篇中的翻頁切換視頻。
思路
在第一篇中剥扣,我們用的是垂直滑動的ViewPager
加Fragment
實現(xiàn)巩剖,詳細過程可以看看第一篇文章。這里钠怯,我們用RecyclerView
加SnapHelper
來實現(xiàn)佳魔。
問題
什么是 SnapHelper
?
SnapHelper
是一個抽象類晦炊,官方提供了一個LinearSnapHelper
的子類鞠鲜,可以讓RecyclerView
滾動停止時相應(yīng)的Item停留中間位置。在25.1.0版本中刽锤,官方又提供了一個PagerSnapHelper
的子類镊尺,可以使RecyclerView
像ViewPager
一樣的效果,一次只能滑一頁并思,而且居中顯示庐氮。詳細源碼解讀可以看這里讓你明明白白的使用RecyclerView——SnapHelper詳解,這里我們用到的就是PagerSnapHelper
如何使用
使用非常簡單宋彼,只需要創(chuàng)建對象之后調(diào)用attachToRecyclerView()
附著到對應(yīng)的RecyclerView
對象上就可以了弄砍。
snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(rvPage2);
下來是組裝數(shù)據(jù)仙畦,這里還是用之前的視頻
urlList = new ArrayList<>();
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201805/100651/201805181532123423.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803151735198462.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803150923220770.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803150922255785.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803150920130302.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803141625005241.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803141624378522.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803131546119319.mp4");
設(shè)置Adapter
videoAdapter = new ListVideoAdapter(urlList);
layoutManager = new LinearLayoutManager(Page2Activity.this, LinearLayoutManager.VERTICAL, false);
rvPage2.setLayoutManager(layoutManager);
rvPage2.setAdapter(videoAdapter);
Adapter
代碼如下,這里和第二篇中使用的Adapter
一致音婶,其中的MyVideoPlayer
是基于 JiaoZiVideoPlayer的自定義的播放慨畸,在第二篇【Android 進階】仿抖音系列之列表播放視頻(二)和第三篇【Android 進階】仿抖音系列之列表播放視頻(三) 中已經(jīng)有詳細的描述,這里不再贅述了衣式。
class ListVideoAdapter extends BaseRecAdapter<String, VideoViewHolder> {
public ListVideoAdapter(List<String> list) {
super(list);
}
@Override
public void onHolder(VideoViewHolder holder, String bean, int position) {
holder.mp_video.setUp(bean, JZVideoPlayerStandard.CURRENT_STATE_NORMAL);
if (position == 0) {
holder.mp_video.startVideo();
}
Glide.with(context).load(bean).into(holder.mp_video.thumbImageView);
holder.tv_title.setText("第" + position + "個視頻");
}
@Override
public VideoViewHolder onCreateHolder() {
return new VideoViewHolder(getViewByRes(R.layout.item_page2));
}
}
public class VideoViewHolder extends BaseRecViewHolder {
public View rootView;
public MyVideoPlayer mp_video;
public TextView tv_title;
public VideoViewHolder(View rootView) {
super(rootView);
this.rootView = rootView;
this.mp_video = rootView.findViewById(R.id.mp_video);
this.tv_title = rootView.findViewById(R.id.tv_title);
}
}
item_page2.xml
布局如下
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:textSize="18sp" />
<com.ch.doudemo.widget.MyVideoPlayer
android:id="@+id/mp_video"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
需要注意的是寸士,RecyclerView
的默認布局父布局不是充滿全屏的,就算我們在布局中設(shè)置match_parent
也是沒用碴卧,需要在onHolder
中添加如下代碼铝量,重新設(shè)置
ViewGroup.LayoutParams layoutParams = holder.itemView.getLayoutParams();
layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT;
到這里债蜜,基本功能已經(jīng)實現(xiàn),我們需要做的就是當(dāng)RecyclerView
滑動時,播放當(dāng)前可見的視頻践瓷,暫停不可見的視頻驹闰。這里我們用的還是第二篇提到的onScrollStateChanged
監(jiān)聽烙无。
相比之前滓玖,這里的邏輯簡單的多了,由于每次只有1個item
處于可見狀態(tài)叹阔,我們就只需要在停止滑動時挠轴,播放當(dāng)前可見的視頻,暫停其余不可見的視頻条获。需要注意輕微滑動的情況
rvPage2.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
}
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
switch (newState) {
case RecyclerView.SCROLL_STATE_IDLE://停止?jié)L動
View view = snapHelper.findSnapView(layoutManager);
//當(dāng)前固定后的item position
int position = recyclerView.getChildAdapterPosition(view);
if (currentPosition != position) {
//如果當(dāng)前position 和 上一次固定后的position 相同, 說明是同一個, 只不過滑動了一點點, 然后又釋放了
MyVideoPlayer.releaseAllVideos();
RecyclerView.ViewHolder viewHolder = recyclerView.getChildViewHolder(view);
if (viewHolder != null && viewHolder instanceof VideoViewHolder) {
((VideoViewHolder) viewHolder).mp_video.startVideo();
}
}
currentPosition = position;
break;
case RecyclerView.SCROLL_STATE_DRAGGING://拖動
break;
case RecyclerView.SCROLL_STATE_SETTLING://慣性滑動
break;
}
}
});
這樣就差不多大功告成了忠荞,最后別忘記在Activity
不可見時,暫停所有視頻
@Override
public void onPause() {
super.onPause();
JZVideoPlayer.releaseAllVideos();
}