Android 轮播图实现视频和图片混播

实现的思路是采用RecyclerView 的多布局,再配合PageSnapeHelper这个类实现类似ViewPager一样的效果,涉及到视频播放本次使用的是饺子播放器,也可以使用其他播放器,只要实现效果就可以 布局只有一个RecyclerView 就不贴代码了 在activity中初始化RecyclerView

layoutManager = new LinearLayoutManager(this); layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); bannerRv.setLayoutManager(layoutManager); if (multiAdapter == null) { multiAdapter = new JiFenGoodsDetailTypesAdapter(mList); } snapHelper = new PagerSnapHelper(); snapHelper.attachToRecyclerView(bannerRv); bannerRv.setAdapter(multiAdapter);

关于 Adapter使用的BaseRecyclerViewAdapterHelper开源封装库,如下

ublic class JiFenGoodsDetailTypesAdapter extends BaseMultiItemQuickAdapter<VideoMultyItem, BaseViewHolder>{ /** * Same as QuickAdapter#QuickAdapter(Context,int) but with * some initialization data. * * @param data A new list is created out of this one to avoid mutable list */ public JiFenGoodsDetailTypesAdapter(List<VideoMultyItem> data) { super(data); addItemType(1, R.layout.banner_video); addItemType(2, R.layout.banner_image); } @Override protected void convert(BaseViewHolder helper, VideoMultyItem item) { helper.setText(R.id.item_number_tv,helper.getLayoutPosition()+1+"/"+getItemCount()); switch (item.getItemType()){ case 1: //视频 JzvdStd jzvdStd = helper.getView(R.id.player); //去掉 jzvdStd.setUp(item.getUrl()+"", ""); Glide.with(mContext).load(item.getCoverUrl()).into(jzvdStd.thumbImageView); jzvdStd.startVideo(); break; case 2: ImageView imageView = helper.getView(R.id.image); Glide.with(mContext).load(item.getUrl()).into(imageView); break; default: break; } } }

其中实体类VideoMultyItem 要实现MultiItemEntity 来返回对应的type,用于实现多布局,代码如下

public class VideoMultyItem implements MultiItemEntity { private String url; //1 是视频 2 是商品 private int flag; private String coverUrl; public String getCoverUrl() { return coverUrl; } public void setCoverUrl(String coverUrl) { this.coverUrl = coverUrl; } public VideoMultyItem(String url, int flag) { this.url = url; this.flag = flag; } public String getUrl() { return url; } public int getFlag() { return flag; } @Override public int getItemType() { return flag; } }

其中banner_video 和banner_image 的布局也贴出来

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <cn.jzvd.JzvdStd android:id="@+id/player" android:layout_width="match_parent" android:layout_height="match_parent" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1/2" android:textColor="@color/white" android:background="@drawable/red_corner_dp10_bg" android:paddingLeft="@dimen/dp_10" android:paddingRight="@dimen/dp_10" android:paddingTop="@dimen/dp_1" android:paddingBottom="@dimen/dp_1" android:id="@+id/item_number_tv" android:textSize="@dimen/sp_12" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginRight="@dimen/dp_12" android:layout_marginBottom="@dimen/dp_12" /> </RelativeLayout> </FrameLayout> <?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" > <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" android:id="@+id/image"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1/2" android:textColor="@color/white" android:background="@drawable/red_corner_dp10_bg" android:paddingLeft="@dimen/dp_8" android:paddingRight="@dimen/dp_8" android:paddingTop="@dimen/dp_2" android:paddingBottom="@dimen/dp_2" android:id="@+id/item_number_tv" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginRight="@dimen/dp_12" android:layout_marginBottom="@dimen/dp_12" /> </RelativeLayout>

由于在滑动的时候要求自动播放所以还需要对Recyclerview的滑动监听做一下处理,在滑动到视频页的时候自动播放,滑出的时候停止播放,代码如下

bannerRv.setOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) { switch (newState) { case RecyclerView.SCROLL_STATE_IDLE: //停止滚动 autoPlay(recyclerView); break; case RecyclerView.SCROLL_STATE_DRAGGING: //拖动 break; case RecyclerView.SCROLL_STATE_SETTLING: //惯性滑动 Jzvd.releaseAllVideos(); break; default: break; } } @Override public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); } });

autoplay的代码

private void autoPlay(RecyclerView recyclerView) { View view = snapHelper.findSnapView(layoutManager); if (view != null) { if (view instanceof RelativeLayout) { Jzvd.releaseAllVideos(); } else { BaseViewHolder viewHolder = (BaseViewHolder) recyclerView.getChildViewHolder(view); if (viewHolder != null) { JzvdStd myVideoPlayer = viewHolder.getView(R.id.player); myVideoPlayer.startVideo(); } } } }

图片要求点击的时候全屏放大,使用的是XPopup

multiAdapter.setOnItemClickListener((adapter, view, position) -> { VideoMultyItem o = (VideoMultyItem) adapter.getData().get(position); if (o.getFlag() == 2) { //图片点击则放大 ImageView imageView = (ImageView) adapter.getViewByPosition(bannerRv, position, R.id.image); //bannner 点击 new XPopup.Builder(JieFenGoodsDetailActivity.this) .asImageViewer(imageView, o.getUrl(), new XpopImageLoader()).show(); } });

这样就基本实现了视频图片混播,还有视频缓存的功能的还没加上,视频缓存可以使用videocache 后续加上了再修改