【Android 進階】仿抖音系列之翻頁上下滑切換視訊（四）
阿新 • • 發佈：2018-11-17
大家好，我們又見面了。這是這個系列的第四篇，在這篇文章之前，建議可以先看下之前系列的文章，為了節省篇幅，之前詳細說過的地方，這裡就不再詳細描述了，下面是目錄：
- 【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一）
- 【Android 進階】仿抖音系列之列表播放視訊（二）
- 【Android 進階】仿抖音系列之列表播放視訊（三）
- 【Android 進階】仿抖音系列之翻頁上下滑切換視訊（四）
- 【Android 進階】仿抖音系列之視訊預覽和錄製（五）
這一篇，要說實現的是第一篇中的翻頁切換視訊。
在第一篇中，我們用的是垂直滑動的ViewPager 加Fragment 實現，詳細過程可以看看第一篇文章。這裡，我們用RecyclerView 加SnapHelper來實現。
什麼是SnapHelper？
SnapHelper是一個抽象類，官方提供了一個LinearSnapHelper的子類，可以讓RecyclerView滾動停止時相應的Item停留中間位置。在25.1.0版本中，官方又提供了一個PagerSnapHelper的子類，可以使RecyclerView像ViewPager一樣的效果，一次只能滑一頁，而且居中顯示。詳細原始碼解讀可以看這裡讓你明明白白的使用RecyclerView——SnapHelper詳解，這裡我們用到的就是PagerSnapHelper
PagerSnapHelper如何使用？
使用非常簡單，只需要建立物件之後呼叫attachToRecyclerView()附著到對應的RecyclerView物件上就可以了。
snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(rvPage2);
下來是組裝資料，這裡還是用之前的視訊
urlList = new ArrayList<>();
urlList.add("http://image.38.hn/public/attachment/201805/100651/201805181532123423.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803151735198462.mp4" 設定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 進階】仿抖音系列之列表播放視訊（三） 中已經有詳細的描述，這裡不再贅述了。
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);
}
}
佈局如下
<?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 的預設佈局父佈局不是充滿全屏的，就算我們在佈局中設定match_parent也是沒用，需要在onHolder 中新增如下程式碼，重新設定
ViewGroup.LayoutParams layoutParams = holder.itemView.getLayoutParams();
layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT;
到這裡，基本功能已經實現，我們需要做的就是當RecyclerView 滑動時，播放當前可見的視訊，暫停不可見的視訊。這裡我們用的還是第二篇提到的onScrollStateChanged 監聽。
相比之前，這裡的邏輯簡單的多了，由於每次只有1個item 處於可見狀態，我們就只需要在停止滑動時，播放當前可見的視訊，暫停其餘不可見的視訊。
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://停止滾動
View view = snapHelper.findSnapView(layoutManager);
JZVideoPlayer.releaseAllVideos();
RecyclerView.ViewHolder viewHolder = recyclerView.getChildViewHolder(view);
if (viewHolder != null && viewHolder instanceof VideoViewHolder) {
((VideoViewHolder) viewHolder).mp_video.startVideo();
}
break;
case RecyclerView.SCROLL_STATE_DRAGGING://拖動
break;
case RecyclerView.SCROLL_STATE_SETTLING://慣性滑動
break;
}
}
});
這樣就差不多大功告成了，最後別忘記在Activity 不可見時，暫停所有視訊
@Override
public void onPause() {
super.onPause();
JZVideoPlayer.releaseAllVideos();
}