Android短视频滑动播放一

本文主要介绍采用RecyclerView配合PagerSnapHelper实现短视频滑动播放内容。

短视频.gif

1. 主页内容构建

主页布局文件定义RecyclerView,为RecyclerView建立对应适配器。

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rv_little_video"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

适配器条目中添加视频播放容器FrameLayout及封面ImageVIew.

<FrameLayout
    android:id="@+id/fl_content_item"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

<ImageView
    android:id="@+id/iv_thumb_item"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop" />

</FrameLayout>

2.定义RecyclerView滑动管理

PagerSnapHelper 结合 linearlayoutmanager 实现滑动管理，实现监听任务。

PagerSnapHelper介绍

PagerSnapHelper can help achieve a similar behavior to
ViewPager. Set both RecyclerView and the items of the RecyclerView.Adapter to have android.view.ViewGroup.LayoutParams#MATCH_PARENT height and width and then attach PagerSnapHelper to the RecyclerView using #attachToRecyclerView(RecyclerView)}.

翻译：PagerSnapHelper可以帮助实现与以下类似的行为
ViewPager。将RecyclerView和RecyclerView.Adapter的项目都设置为具有android.view.ViewGroup.LayoutParams＃MATCH_PARENT的高度和宽度，然后使用#attachToRecyclerView（RecyclerView）}将PagerSnapHelper附加到RecyclerView。

自定义RecyclerView管理器

RecyclerView管理器为linearlayoutmanager 时，默认为纵向滑动，如果想采用横向滑动，就设置其滑动方向为RecyclerView.HORIZONTAL。同理，我们也可以这样采用setorientation(RecyclerView.HORIZONTAL) 方法去改变滑动方向。

public class PagerLayoutManager extends linearlayoutmanager implements RecyclerView.OnChildAttachStatechangelistener {

    private OnPageChangedListener mOnPageChangedListener;
    
    private PagerSnapHelper mSnapHelper;
    
    /**
     * 移动方向标记
     */
    private int direction;
    
    public PagerLayoutManager(Context context) {
        super(context);
        mSnapHelper = new PagerSnapHelper();
    }
    
    /**
     * PagerSnapHelper绑定RecyclerView，同时为监听RecyclerView子布局附着，脱离，进行滑动页面内容控制
     *
     * @param view RecyclerView
     */
    @Override
    public void onAttachedToWindow(RecyclerView view) {
        super.onAttachedToWindow(view);
        mSnapHelper.attachToRecyclerView(view);
        view.addOnChildAttachStatechangelistener(this);
    }
    
    /**
     * 滑动状态改变监听，滑动完毕后进行播放控制
     *
     * @param state 滑动状态
     */
    @Override
    public void onScrollStateChanged(int state) {
    super.onScrollStateChanged(state);
    
        if (state == RecyclerView.SCROLL_STATE_IDLE) {
            View view = mSnapHelper.findSnapView(this);
            if (view == null) {
                return;
            }
            int position = getPosition(view);
            if (mOnPageChangedListener != null && getChildCount() == 1) {
                mOnPageChangedListener.onPageSelected(position, position == getItemCount() - 1);
            }
        }
    
    }
    
    @Override
    public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State state) {
        direction = dx;
        return super.scrollHorizontallyBy(dx, recycler, state);
    }
    
    @Override
    public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
        direction = dy;
        return super.scrollVerticallyBy(dy, recycler, state);
    }
    
    @Override
    public void onChildViewAttachedToWindow(@NonNull View view) {
        if (mOnPageChangedListener != null && getChildCount() == 1) {
            mOnPageChangedListener.onPageInitComplete();
        }
    }
    
    @Override
    public void onChildViewDetachedFromWindow(@NonNull View view) {
        if (mOnPageChangedListener != null) {
            mOnPageChangedListener.onPageRelease(getPosition(view), direction >= 0);
        }
    }
    
    public void setonPageChangedListener(OnPageChangedListener mOnPageChangedListener) {
        this.mOnPageChangedListener = mOnPageChangedListener;
    }
    
    public interface OnPageChangedListener {
    
        /**
         * 初始化子布局加载完成
         */
        void onPageInitComplete();
        
        /**
         * 子布局脱离
         *
         * @param position 子布局在RecyclerView位置
         * @param isNext   是否有下一个
         */
        void onPageRelease(int position, boolean isNext);
        
        /**
         * 子布局附着
         *
         * @param position 子布局在RecyclerView位置
         * @param isLast   是否最后一个
         */
        void onPageSelected(int position, boolean isLast);
    }

}

3. 视频滑动实现

为RecyclerView 设置管理器PagerLayoutManager，设置其Adapter数据内容，进行封面展示，且此时会回调onPageInitComplete()方法，进行首个视频播放。对RecyclerView进行滑动，当页面滑动结束后，会先回调管理器中onPageRelease()方法，此时可对进行中播放器进行停止释放；然后，回调onPageSelected()方法，对选中页面内容进行展示播放。

当滑动后取消时，要进行判断当前位置，避免当前页视频停止或重复播放。

mPagerLayoutManager = new PagerLayoutManager(this);
mPagerLayoutManager.setonPageChangedListener(new PagerLayoutManager.OnPageChangedListener() {
@Override
public void onPageInitComplete() {
    int position = mPagerLayoutManager.findFirstVisibleItemPosition();
    if (position != -1) {
        mCurrentPosition = position;
    }
    startPlay(mCurrentPosition);
}

@Override
public void onPageRelease(int position, boolean isNext) {
    if (mCurrentPosition == position) {
        stopPlay();
    BaseViewHolder viewHolder = (BaseViewHolder) mRvLittleVideo.findViewHolderForLayoutPosition(mCurrentPosition);
    if (viewHolder != null) {
        ImageView mVideoThumb = viewHolder.getView(R.id.iv_thumb_item);
    if (mVideoThumb != null) {
        mVideoThumb.setVisibility(View.VISIBLE);
    }
    }
    }
}

@Override
public void onPageSelected(int position, boolean isLast) {
    if (mCurrentPosition == position) {
        return;
    }
    startPlay(position);
    mCurrentPosition = position;
    }
});

mRvLittleVideo.setLayoutManager(mPagerLayoutManager);

mLittleVideoAdapter = new LittleVideoAdapter();
mRvLittleVideo.setAdapter(mLittleVideoAdapter);

3. 播放器初始化及停止、播放

初始化播放器内容

private void initVideo() {

    mVideoView = new LittleVideoView(this);
    GSYVideoType.setShowType(GSYVideoType.SCREEN_TYPE_FULL);
    mGsySmallVideoHelperBuilder = new GSYVideoOptionBuilder();
    mGsySmallVideoHelperBuilder
            .setLooping(true)
            .setCacheWithPlay(true)
            .setIsTouchWiget(false)
            .setVideoAllCallBack(new GSYSampleCallBack() {
                @Override
                public void onPrepared(String url, Object... objects) {
                    super.onPrepared(url, objects);

                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            BaseViewHolder viewHolder = (BaseViewHolder) mRvLittleVideo.findViewHolderForLayoutPosition(mCurrentPosition);
                            if (viewHolder != null) {
                                ImageView mVideoThumb = viewHolder.getView(R.id.iv_thumb_item);
                                if (mVideoThumb != null) {
                                    mVideoThumb.setVisibility(View.INVISIBLE);
                                }
                            }
                        }
                    }, 100);
                }
            });
}

开始播放视频内容，进行播放器视图加载

private void startPlay(int position) {
    if (position < 0 || position >= mLittleVideoAdapter.getData().size()) {
        return;
    }
    BaseViewHolder holder = (BaseViewHolder) mRvLittleVideo.findViewHolderForLayoutPosition(position);
    ViewParent parent = mVideoView.getParent();
    if (parent instanceof FrameLayout) {
        ((ViewGroup) parent).removeView(mVideoView);
    }
    if (holder != null) {
        FrameLayout mVideoContent = holder.getView(R.id.fl_content_item);
        mVideoContent.addView(mVideoView, 0);
        mGsySmallVideoHelperBuilder.setUrl(mLittleVideoAdapter.getData().get(position).getUrl());
        mGsySmallVideoHelperBuilder.build(mVideoView);
        mVideoView.startPlayLogic();
    }
}

停止播放，移除视图

private void stopPlay() {
    mVideoView.release();
    ViewParent parent = mVideoView.getParent();
    if (parent instanceof FrameLayout) {
        ((FrameLayout) parent).removeView(mVideoView);
    }
}

3. 播放器内容

例子中采用了自定义空布局的播放器继承自GSY开源播放器，单纯进行视频播放，当然也可以采用其它的播放器饺子或者IjkPlayer等。

public class LittleVideoView extends StandardGSYVideoPlayer {

    public LittleVideoView(Context context, Boolean fullFlag) {
        super(context, fullFlag);
    }

    public LittleVideoView(Context context) {
        super(context);
    }

    public LittleVideoView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public int getLayoutId() {
        return R.layout.empty_control_video;
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <FrameLayout
    android:id="@+id/surface_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    
    </FrameLayout>

</RelativeLayout>

简单的滑动播放这些就完成了，例子也只是仅仅提供了实现的方法和思路，供大家进行学习参考，实际使用中可以对其进一步地进行封装及处理，接下来也会补充一些滑动播放适配器的数据加载处理以及多布局内容展示等内容。

Android短视频滑动播放（二）

关注公众号：几圈年轮，查看更多有趣的技术、工具、闲言、资源。

公众号.jpg