android带视频和图片的轮播（banner）解决方案

方案只包含一个视频和多张图片，如果又多个视频的，可以修改适配器中的的播放器为一个list，并且在滑动中做相应的释放操作
一：实现一个视频和多张图片的轮播banner,使用到第三方框架有
1.轮播的基础框架youth.banner Github地址：https://github.com/youth5201314/banner
2.视频播放器gsyvideoplayer Github地址：https://github.com/CarGuo/GSYVideoPlayer
3.图片点击放大框架(非必要)image-viewer ：github地址：https://github.com/SusionSuc/DraggableImageViewer
二、第三方框架引入地址

implementation 'com.youth.banner:banner:2.1.0'
implementation 'com.shuyu:GSYVideoPlayer:7.1.8'
//非必要
implementation 'com.susion:image-viewer:1.0.2'

三、解决方案组成
解决方案用到了databind去解决频繁的绑定控件ID，这里不写出来，自行了解下
1.bean类
2.banner适配器（BannerAdapter）
3.布局文件
4.主要代码

四、bean类

public class BannerBean {private boolean isVideo;private String url;public boolean isVideo() {return isVideo;}public void setVideo(boolean video) {isVideo = video;}public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}
}

五、banner适配器（BannerAdapter）

public class MyBannerAdapter  extends BannerAdapter<MyBannerAdapter  .BannerListBean,RecyclerView.ViewHolder> {protected Context mContext;protected LayoutInflater mInflater;protected List<BannerListBean> mDataList = new ArrayList<>();private StandardGSYVideoPlayer myvideo=null;//视频public static final int VEDIO = 1;//图片public static final int  IMAGE= 2;private BannerOnclickListen listen;public MyBannerAdapter  (Context context,List<BannerListBean> dataList) {super(dataList);mContext = context;mDataList=dataList;mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);}//通过isVedio获取返回不同的布局@Overridepublic int getItemViewType(int position) {if (mDataList.get(position).isVedio()){return VEDIO;}else {return IMAGE;}}@Overridepublic RecyclerView.ViewHolder onCreateHolder(ViewGroup parent, int viewType) {View view;RecyclerView.ViewHolder holder;LayoutInflater from = LayoutInflater.from(mContext);if (viewType==VEDIO){view=from.inflate(R.layout.item_gsyvideopay,parent,false);holder=new VideoHolder(view);}else {view=from.inflate(R.layout.item_banner_image,parent,false);holder=new ImageHolder(view);}return holder;}@Overridepublic void onBindView(RecyclerView.ViewHolder holder, BannerListBean data, int position, int size) {if (holder instanceof VideoHolder){setVideo( holder, data,position,size);}else {setImage(holder,data,position,size);}}private void setImage(RecyclerView.ViewHolder holder, BannerListBean data,int position, int size ) {ImageView image=((ImageHolder)holder).image;Glide.with(mContext).load(data.getUrl()).placeholder(R.mipmap.iv_zhan_banner).transform(new CenterCrop(),new GranularRoundedCorners(8,8,8,8)).into(image);//图片点击放大image.setOnClickListener(v ->{ImageViewerHelper.INSTANCE.showSimpleImage(mContext,data.getUrl(),"",image,false);} );}private void setVideo(RecyclerView.ViewHolder holder, BannerListBean data,int position, int size) {myvideo=((VideoHolder)holder).video;myvideo.setUpLazy(data.getUrl(),true,mContext.getCacheDir(),null,"");myvideo.getTitleTextView().setVisibility(View.GONE);myvideo.getBackButton().setVisibility(View.GONE);myvideo.getFullscreenButton().setVisibility(View.GONE);//音频焦点冲突时是否释放myvideo.setReleaseWhenLossAudio(true);//禁止全屏myvideo.setAutoFullWithSize(false);//禁止滑动myvideo.setIsTouchWiget(false);}@Overridepublic int getItemCount() {return mDataList.size();}public static class BannerListBean  {public boolean isVedio() {return Vedio;}public void setVedio(boolean vedio) {Vedio = vedio;}public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}private boolean Vedio=false;private String url;}//释放视频播放器public void setVideoStop(){if (myvideo!=null){myvideo.release();}}class VideoHolder extends RecyclerView.ViewHolder {private StandardGSYVideoPlayer video;public VideoHolder(View itemView) {super(itemView);video = itemView.findViewById(R.id.banner_vp);}}class ImageHolder extends RecyclerView.ViewHolder {private ImageView image;public ImageHolder(View itemView) {super(itemView);image = itemView.findViewById(R.id.banner_iv);}}public StandardGSYVideoPlayer getMyvideo(){return this.myvideo;}}

五、布局文件
R.layout.item_gsyvideopay

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"><data></data><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><com.shuyu.gsyvideoplayer.video.StandardGSYVideoPlayerandroid:id="@+id/banner_vp"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout>
</layout>

R.layout.item_banner_image

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"><data></data><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:id="@+id/banner_iv"android:layout_width="match_parent"android:layout_height="match_parent"android:src="@mipmap/iv_zhan_ban_comdetail"android:scaleType="centerCrop" /></LinearLayout>
</layout>

六、主要代码
在Activity实现
在onCreate添加banner的初始化

private void initBanner(){adapter=new MyBannerAdapter(this,urlList);binding.Banner.addBannerLifecycleObserver(this).setStartPosition(0).setAdapter(adapter,false).isAutoLoop(false).setIndicator(new CircleIndicator(this));binding.Banner.addOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {Log.e("TGA", ""+position);//这里是只又一个视频的情况，如果滑动后不是第一个，释放掉视频if (position!=0){adapter.setVideoStop();}//如果滑动还有页数角标的需求，还可以在这边更新角标}@Overridepublic void onPageScrollStateChanged(int state) {}});
}

除此之外，还要再页面被覆盖的时候释放掉视频

@Overrideprotected void onPause() {super.onPause();if (adapter!=null){adapter.setVideoStop();}}

android带视频和图片的轮播（banner）解决方案相关推荐

vue项目里面视频与图片的轮播
需求仿照天猫等实现视频与图片的轮播效果运用的控件有: 1.视频播放器:腾讯云点播超级播放器官方文档地址(一定要看) 2.轮播插件:iSlider----这是一个表现出众,轻量且高性能,无任何库依赖 ...
Android实现广告页图片无限轮播
一.概述对于一个联网的Android应用, 首页广告无限轮播基本已经成为标配了. 那么它是怎么实现的呢? 有几种实现方式呢? 二.无限轮播的实现 1.最常规的手段是用 ViewPager来实现 2. ...
使用swiper实现视频和图片混合轮播
完成需求:轮播页面自动滚动循环播放素材,在视频页面自动播放视频至视频结束后继续轮播下一个素材,手动切换时视频页暂停播放,切换回来后恢复播放. 1.安装swiper相关插件 2.在轮播页面引入 impo ...
html轮播视频插件上加文字,可加入视频、图片的轮播swiper插件（可以拖动、视频存在加载条）...
使用方法 css引用: html: 这是一个视频自动播放存在进度条这是图片图片放data-image 6秒滑动 js引用: js: $('#pbSlider0').pbTouchSlider( ...
仿京东淘宝商品详情页中视频和图片的轮播功能
还没有学会如何上传视频到博客上,先上传图片吧案例下载地址: https://download.csdn.net/download/dawnzeng/10430298 视频播放借用了饺子播放器,最主要 ...
仿淘宝商品详情页[带有视频和图片的轮播功能]
因为工作需求的原因,自己写了一个demo,既实现了功能,又能与大家分享,很高兴!Demo已上传GitHub,https://github.com/xinniangdeweidao/CloneTaoba ...
Android 视频图片轮播,详解android 视频图片混合轮播实现
循环添加视频view 图片view for (int i = 0 ;i if (beansarraylist.get(i).gettype()==1){ videoplayer = new nice ...
android 轮换实现动画,怎么在Android中实现一个首页无限轮播功能
怎么在Android中实现一个首页无限轮播功能发布时间:2021-04-12 16:22:49 来源:亿速云阅读:74 作者:Leah 这期内容当中小编将会给大家带来有关怎么在Android中实现 ...
仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图（二）之SuperIndicator源码分析
转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52510431 背景:仿爱奇艺视频,腾讯视频 ...

android带视频和图片的轮播（banner）解决方案

android带视频和图片的轮播（banner）解决方案相关推荐

最新文章

热门文章