【Android 進階】仿抖音系列之翻頁上下滑切換視頻(四)

前言

大家好右蹦,這是這個系列的第四篇,在閱讀這篇文章之前歼捐,建議可以先看下之前系列的文章何陆,為了節(jié)省篇幅,之前詳細說過的地方豹储,這里就不再詳細描述了:

這一篇贷盲,要說實現(xiàn)的是第一篇中的翻頁切換視頻。

思路

在第一篇中剥扣,我們用的是垂直滑動的ViewPagerFragment 實現(xiàn)巩剖,詳細過程可以看看第一篇文章。這里钠怯,我們用RecyclerViewSnapHelper來實現(xiàn)佳魔。

問題

什么是 SnapHelper

SnapHelper是一個抽象類晦炊,官方提供了一個LinearSnapHelper的子類鞠鲜,可以讓RecyclerView滾動停止時相應(yīng)的Item停留中間位置。在25.1.0版本中刽锤,官方又提供了一個PagerSnapHelper的子類镊尺,可以使RecyclerViewViewPager一樣的效果,一次只能滑一頁并思,而且居中顯示庐氮。詳細源碼解讀可以看這里讓你明明白白的使用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();
    }

最后帅掘,獻上完整代碼委煤。Github

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市修档,隨后出現(xiàn)的幾起案子碧绞,更是在濱河造成了極大的恐慌,老刑警劉巖吱窝,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件讥邻,死亡現(xiàn)場離奇詭異,居然都是意外死亡院峡,警方通過查閱死者的電腦和手機兴使,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來照激,“玉大人发魄,你說我怎么就攤上這事。” “怎么了励幼?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵汰寓,是天一觀的道長。 經(jīng)常有香客問我苹粟,道長有滑,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任嵌削,我火速辦了婚禮毛好,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘苛秕。我一直安慰自己睛榄,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布想帅。 她就那樣靜靜地躺著,像睡著了一般啡莉。 火紅的嫁衣襯著肌膚如雪港准。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天咧欣,我揣著相機與錄音浅缸,去河邊找鬼。 笑死魄咕,一個胖子當(dāng)著我的面吹牛衩椒,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播哮兰,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼毛萌,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了喝滞?” 一聲冷哼從身側(cè)響起阁将,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎右遭,沒想到半個月后做盅,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡窘哈,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年吹榴,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片滚婉。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡图筹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出满哪,到底是詐尸還是另有隱情婿斥,我是刑警寧澤劝篷,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站民宿,受9級特大地震影響娇妓,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜活鹰,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一哈恰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧志群,春花似錦着绷、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至桑涎,卻和暖如春彬向,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背攻冷。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工娃胆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人等曼。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓里烦,卻偏偏與公主長得像,于是被迫代替她去往敵國和親禁谦。 傳聞我的和親對象是個殘疾皇子胁黑,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容