【Android 進階】仿抖音系列之翻頁上下滑切換視訊(四)
大家好,我們又見面了。這是這個系列的第四篇,在這篇文章之前,建議可以先看下之前系列的文章,為了節省篇幅,之前詳細說過的地方,這裡就不再詳細描述了,下面是目錄:
- ofollow,noindex">【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"); urlList.add("http://image.38.hn/public/attachment/201803/100651/201803150923220770.mp4"); urlList.add("http://image.38.hn/public/attachment/201803/100651/201803150922255785.mp4"); urlList.add("http://image.38.hn/public/attachment/201803/100651/201803150920130302.mp4"); urlList.add("http://image.38.hn/public/attachment/201803/100651/201803141625005241.mp4"); urlList.add("http://image.38.hn/public/attachment/201803/100651/201803141624378522.mp4"); urlList.add("http://image.38.hn/public/attachment/201803/100651/201803131546119319.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(); }