美文网首页程序员Android 技术开发Android开发
【Android 进阶】仿抖音系列之翻页上下滑切换视频(四)

【Android 进阶】仿抖音系列之翻页上下滑切换视频(四)

作者: 欢子3824 | 来源:发表于2018-10-29 18:01 被阅读158次

    大家好,我们又见面了。这是这个系列的第四篇,在这篇文章之前,建议可以先看下之前系列的文章,为了节省篇幅,之前详细说过的地方,这里就不再详细描述了,下面是目录:

    这一篇,要说实现的是第一篇中的翻页切换视频。

    在第一篇中,我们用的是垂直滑动的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();
        }
    

    最后,献上完整代码。Github

    你的认可,是我坚持更新博客的动力,如果觉得有用,就请点个赞,谢谢

    相关文章

      网友评论

      • yemoumou:夕阳依傍着西山慢慢地沉没-简书朋友你好,我是币圈一老友,我的写作方向是区块链和数字货币,初到简书,望多多关照。互粉互赞,已赞,期待您的回赞哦。-ؾڀ块链婁

      本文标题:【Android 进阶】仿抖音系列之翻页上下滑切换视频(四)

      本文链接:https://www.haomeiwen.com/subject/nxfitqtx.html