Android短视频app开发中如何实现上下滑动切换效果

在大部分短视频app开发中,都会在app内增加上下滑动切换视频的功能,即下滑切换到下一条短视频,上滑切回到上一条。这种机制可以给用户带来良好的视觉体验,云豹作为优秀的app源码供应商,在该效果的实现上当有独到之处,我们可以在其源码中一探究竟。
我们通过Http请求从后端获取到视频数据后,把数据保存为一个List列表,在Activity中用一个RecyclerView展示。我们让RecyclerView的item的大小等于屏幕的尺寸,使屏幕上只展示一个item。给RecyclerView设置SnapHelper为PagerSnapHelper,这样RecyclerView就能模拟出ViewPager的滑动效果。代码如下:

PagerSnapHelper pagerSnapHelper = new PagerSnapHelper();
pagerSnapHelper.attachToRecyclerView(recyclerView);

然后,我们设计item的布局,item中放一个ImageView用来展示视频封面图片,在图片下面放一个空的容器,用来存放视频播放器。布局如下:

<RelativeLayout
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"
   >

<FrameLayout
   android:id="@+id/video_container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>


<ImageView
   android:id="@+id/cover"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_centerInParent="true"
   android:scaleType="centerCrop"
   />
</RelativeLayout>

然后,在短视频app开发的编写视频播放器阶段。我们使用腾讯的TxCloundVideoView来作为视频播放器,对其进行封装,添加开始播放,暂停播放,恢复播放,结束播放,释放资源等操作。

@Override
public void init() {
   mTXCloudVideoView = (TXCloudVideoView) findViewById(R.id.video_view);
   mTXCloudVideoView.setRenderMode(TXLiveConstants.RENDER_MODE_FULL_FILL_SCREEN);
   mPlayer = new TXVodPlayer(mContext);
   TXVodPlayConfig config = new TXVodPlayConfig();
   config.setCacheFolderPath(mContext.getCacheDir().getAbsolutePath());
   config.setMaxCacheItems(15);
   mPlayer.setConfig(config);
   mPlayer.setAutoPlay(true);
   mPlayer.setVodListener(this);
   mPlayer.setPlayerView(mTXCloudVideoView);
   findViewById(R.id.root).setOnClickListener(this);
   mVideoCover = findViewById(R.id.video_cover);
 }

布局文件如下:

<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/root"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   >

   <com.tencent.rtmp.ui.TXCloudVideoView
       android:id="@+id/video_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_centerInParent="true"
       />

   <View
       android:id="@+id/video_cover"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="#000"
       />

   <ImageView
       android:id="@+id/btn_play"
       android:layout_width="80dp"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       android:adjustViewBounds="true"
       android:src="@mipmap/icon_video_play"
       android:visibility="invisible"
       />

</RelativeLayout>

视频播放器使用的时候只需要在Activity中实例化一次即可。首次加载视频的时候, 我们把它放置在RecyclerView的第一个item的容器中。
最后,我们给RecyclerView添加滑动监听,每滑动一页,就把播放器从父容器中取出,添加到当前页面的item 的容器中。并播放绑定在该item上的视频数据。这样就实现了上下滑动切换视频的效果。代码如下:

@Override
public void onAttachedToRecyclerView(@NonNull final RecyclerView recyclerView) {
  mRecyclerView = recyclerView;
  mRecyclerView.addOnItemTouchListener(new ItemSlideHelper(mContext, this));
  mLayoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
  mLayoutManager.setInitialPrefetchItemCount(4);
  recyclerView.scrollToPosition(mCurPosition);
  PagerSnapHelper pagerSnapHelper = new PagerSnapHelper();
  pagerSnapHelper.attachToRecyclerView(recyclerView);
  recyclerView.setOnScrollListener(new RecyclerView.OnScrollListener() {
      @Override
      public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
      }

      @Override
      public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
          findCurVideo();
      }
  });
}

private void findCurVideo() {
  int position = mLayoutManager.findFirstCompletelyVisibleItemPosition();
  if (position >= 0 && mCurPosition != position) {
      if (mHandler != null) {
          mHandler.removeCallbacksAndMessages(null);
      }
      VideoPlayWrapViewHolder vh = mMap.get(position);
      if (vh != null && mActionListener != null) {
          vh.onPageSelected();
          boolean needLoadMore = false;
          if (position == mList.size() - 1) {
              if (mList.size() < COUNT) {
                  ToastUtil.show(R.string.video_no_more_video);
              } else {
                  needLoadMore = true;
              }
          }
          mActionListener.onPageSelected(vh, needLoadMore);
      }
      mCurPosition = position;
      if (position == 0) {
          ToastUtil.show(R.string.video_scroll_top);
      }
  }
}

短视频app开发中实现上下滑动切换最终实现的效果如下图所示: 在这里插入图片描述
上下滑动切换效果可以给用户带来非常良好的体验。当前短视频市场竞争激烈,只有做好产品,才能立于不败之地,在之后,我们还将持续放出有关短视频app开发的源码类解决方案,请继续关注我们的公司号。
声明:本文声明原创,转载请注明出处及作者.

发布了149 篇原创文章 · 获赞 60 · 访问量 14万+
展开阅读全文

没有更多推荐了,返回首页

分享到微信朋友圈

×

扫一扫,手机浏览