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);}@Overrideprotected 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;}@Overridepublic int getItemType() {return flag;}
}
其中banner_video 和banner_image 的布局也贴出来
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><cn.jzvd.JzvdStdandroid:id="@+id/player"android:layout_width="match_parent"android:layout_height="match_parent"/><TextViewandroid: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=""android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="fitXY"android:id="@+id/image"/><TextViewandroid: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() {@Overridepublic 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;}}@Overridepublic 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
后续加上了再修改
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);}@Overrideprotected 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;}@Overridepublic int getItemType() {return flag;}
}
其中banner_video 和banner_image 的布局也贴出来
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><cn.jzvd.JzvdStdandroid:id="@+id/player"android:layout_width="match_parent"android:layout_height="match_parent"/><TextViewandroid: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=""android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="fitXY"android:id="@+id/image"/><TextViewandroid: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() {@Overridepublic 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;}}@Overridepublic 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
后续加上了再修改
发布评论