android 图片/视频混合轮播控件banner

github传送门https://github.com/lakehubo/HBanner 如果对你有用,star一个,非常感谢!
如果你无法正常访问github,可通过csdn下载源码:https://download.csdn.net/download/lakebobo/19563192

HBanner(1.1.1-alpha)

全新自制改良版视频/图片混播控件。这次版本已经完全更换了实现方式。所以剔除了原来所参考的项目代码,旧版本与所参考的banner控件存在冲突的问题应该不再存在。

新版本目前所支持的功能:图片指定轮播时间,视频无需指定时间,播放结束后会自动切换,视频全屏/居中(原版本存在的视频有声音无显示问题可能是CustomVideoView全屏实现的方式所导致,具体问题可能是由于layout坐标错乱导致)

使用方式

目前库已迁移至mavenCentral,所以在根目录下的buidl.gradle配置文件下需要添加mavenCentral仓库源,jecnter仓库源目前已无法更新库以及上传库,且在后面会停止服务,需要注意!

buildscript {
    repositories {
        google()
        mavenCentral()
    }
    ...
}

allprojects {
    repositories {
        google()
        mavenCentral()
    }
		...
}
权限说明

在线视频的播放以及缓存需要相应的网络权限和存储器的读写权限,请在相应应用里添加以下权限,并动态申请

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Gradle 依赖添加方式

dependencies {
  	implementation 'io.github.lakehubo:com.lakehubo.hbanner:1.1.1-alpha'
}

Maven 依赖添加方式

<dependency>
  <groupId>io.github.lakehubo</groupId>
  <artifactId>com.lakehubo.hbanner</artifactId>
  <version>1.1.1-alpha</version>
  <type>aar</type>
</dependency>
HBanner主要接口方法说明

该接口提供主要的操作方法,根据传入的viewpager并对其进行轮播的实现。

方法名(参数)返回值说明
sources(List<SubView> subViews)void轮播数据列表,在轮播状态下调用此方法会导致轮播暂停
remove(int position)void移除指定位置的subview,在轮播状态下调用此方法会导致轮播暂停
addSubView(SubView sub)void在结尾添加新的subview,在轮播状态下调用此方法会导致轮播暂停
addSubView(int position, SubView sub)void在指定位置添加subview,在轮播状态下调用此方法会导致轮播暂停
pause(long timeout)void暂停轮播,timeout时间后自动继续,timeout为0表示永久暂停
play(boolean auto)void开始轮播,若当前存在暂停则继续当前位置进行播放
showNext(boolean auto)void手动切换到下一张view,auto是否后面自动播放
setPosition(int position)void重置当前播放位置
getPosition()void获取当前播放位置
getCurrentSubView()SubView获取当前显示的子view
getSubView(int position)SubView获取指定位置的子view
getBannerStatus()PlayStatus获取banner当前的状态
setTimeOffset(long time)void设置每次的轮播时间偏移,设置该值后会给所有的view加上该值,time单位ms
setSyncMode(SyncMode mode)void设置多banner的同步模式,目前仅支持一种one by one模式
addSyncHBanner(HBanner hBanner)void同步另一banner,多banner协同,根据传入的item序号进行同步,协同支持一种模式,
需要两个banner的item数量保持一致,否则会导致其中一个banner的item无法显示完整。
addSyncHBanner(List<HBanner> hBanners)void参考以上,添加复数个banner
removeSyncHBanner(HBanner hBanner)void移除同步的banner
removeSyncHBanner(List<HBanner> hBanners)void参考以上,移除复数个banner
removeAllSyncHBanner()void移除所有同步的banner
create(ViewPager viewPager)HBanner利用viewPager创建HBanner接口。注:多次调用会创建多个HBanner实例。
release()void停止播放并释放轮播资源
isAuto()boolean当前是否为自动播放(pause方法会导致该值改变)
SubView接口说明

该接口为传入HBanner轮播对象,目前控件自带一个图片对象和视频对象,你也可以自己继承该接口实现自己自定义的轮播对象。

方法名(参数)返回值说明
onShowStart(final HBanner hBanner, int position)void轮播开始显示的回调,该方法会返回HBanner对象,此时你可以在这里接管轮播控制,
比如暂停,并自行计时播放下一张等操作。当view为视频时,推荐自行控制视频显示时间。
onShowFinish()boolean轮播对象结束显示的回调,返回是否为自动播放模式
duration()long指定当前轮播对象的显示的时间,单位:ms
getView()ViewHBanner获取轮播对象的接口。该返回值为控件轮播时所显示的View
getPreView()View当前view不为ImageView时候,比如为VideoView,则需要覆盖此方法,
返回一张图片替代VideoView的显示,该方法主要为了视频未加载完全时
候的显示以及循环播放的首尾画面的过度。
getTag()String同步所用的tag 标记,该接口只有在多banner协同下才有用。目前版本无任何作用。

目前控件内实现了默认的图片轮播对象:ImageSubView

以及默认的视频轮播对象:VideoSubView

ImageSubView简单说明
  • 通过其内部Builder类进行参数初始化和构造。

  • ImageSubView imge = new ImageSubView.Builder(getBaseContext())
                    		.resId(R.mipmap.b2)
                    		.duration(5000)
                    		.build();
    
  • Builder构造类方法参数说明

方法参数类型说明
gravity(ScaleType scaleType)ScaleType图片布局方式(ImageView.ScaleType)
url(String url)String图片来源的网络地址
file(File file)File图片来源的文件
resId(@DrawableRes int id)int图片来源的资源id(R.mipmap/R.drawable)
duration(long show)long图片显示时间(单位ms,默认值5000)

注:file/url/resId其中必须有一个为有效值,否则会抛出参数错误异常

VideoSubView简单说明
  • 通过其内部Builder类进行参数初始化和构造。

  • VideoSubView view = new VideoSubView.Builder(getBaseContext())
                    		.url("https://v-cdn.zjol.com.cn/123468.mp4")
                    		.gravity(VideoViewType.FULL)
                    		.isSub(false)
      					    .playOffset(600)
                    		.build();
    
  • Builder构造类方法参数说明

方法参数类型说明
gravity(VideoViewType type)VideoViewType视频布局方式,目前支持两种FULL和CENTER
isSub(boolean sub)boolean是否属于被同步banner中的视频控件,默认值为false
file(File file)File视频来源的文件
url(String url)String视频来源的网络地址
playOffset(long offset)long缓存的首帧图片显示时常(可解决videoview启动闪烁问题)
单位ms

注:file和url必须有其中一个有效值,否则会抛出参数错误异常

自带换场方式的对象函数
函数名说明
DefaultTransformer横向切换
VerticalPageTransformer纵向切换

ViewPager函数设置轮播换场方式

//自行通过设置ViewPager的换场动画方法即可,无需通过控件。
//设置viewpager切换方式
viewPager.setPageTransformer(true, new VerticalPageTransformer());

对应生命周期回调中的控件推荐设置

@Override
protected void onResume() {
    if (hBanner != null)
        hBanner.play(true);
    super.onResume();
}

@Override
protected void onPause() {
    if (hBanner != null)
        hBanner.pause(0);
    super.onPause();
}

@Override
protected void onStop() {
    if (hBanner != null)
        hBanner = null;
    super.onStop();
}

新版banner,目前去掉了指示器标题栏,推荐自行实现需要的指示器和标题等。

使用示例代码(项目demo):
/**
* 在create banner前需要确保viewpager控件已经被创建
* 这里是双viewpager,为了方便所以直接对根布局进行视图创建
* 进行回调
*/
HBanner hBanner = HBanner.create(viewPager);

List<SubView> data = new ArrayList<>();
data.add(new ImageSubView.Builder(getBaseContext())
        .url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4148675854,1608370142&fm=26&gp=0.jpg")
        .duration(6000)
        .build());
data.add(new ImageSubView.Builder(getBaseContext())
        .resId(R.mipmap.b2)
        .duration(5000)
        .build());
data.add(new ImageSubView.Builder(getBaseContext())
        .resId(R.mipmap.b3)
        .duration(5000)
        .build());
data.add(new VideoSubView.Builder(getBaseContext())
        .url("https://v-cdn.zjol.com.cn/123468.mp4")
        .gravity(VideoViewType.FULL)
        .isSub(false)
        .build());

hBanner.sources(data);
//设置viewpager切换方式
viewPager.setPageTransformer(true, new VerticalPageTransformer());
     
//开始显示或者自动播放
hBanner.play(true);
如果需要多banner同步轮播

需要保证所有banner都使用包内所提供的BannerViewPager(如果是单一banner,使用ViewPager即可)。

HBanner hBanner = HBanner.create(viewPager);

List<SubView> data = new ArrayList<>();
data.add(new ImageSubView.Builder(getBaseContext())
         .url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4148675854,1608370142&fm=26&gp=0.jpg")
         .duration(6000)
         .build());
data.add(new ImageSubView.Builder(getBaseContext())
         .resId(R.mipmap.b2)
         .duration(5000)
         .build());
data.add(new ImageSubView.Builder(getBaseContext())
         .resId(R.mipmap.b3)
         .duration(5000)
         .build());
data.add(new VideoSubView.Builder(getBaseContext())
         .url("https://v-cdn.zjol.com.cn/123468.mp4")
         .gravity(VideoViewType.FULL)
         .isSub(false)
         .build());

hBanner.sources(data);

HBanner hBanner2 = HBanner.create(viewPager2);

List<SubView> data2 = new ArrayList<>();
//被同步banner无需设置时间
data2.add(new ImageSubView.Builder(getBaseContext())
          .url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607078748657&di=32e2fa257aa53426f8ab1fbcb43e1325&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180629%2Fd444958986894a6994533eda59edb460.jpeg")
          .build());
data2.add(new ImageSubView.Builder(getBaseContext())
          .resId(R.mipmap.b2)
          .build());
data2.add(new ImageSubView.Builder(getBaseContext())
          .resId(R.mipmap.b3)
          .build());
data2.add(new VideoSubView.Builder(getBaseContext())
          .file(new File(Environment.getExternalStorageDirectory() + "/default1.mp4"))
          .isSub(true)
          .build());

hBanner2.sources(data2);

hBanner.addSyncHBanner(hBanner2);
//多协同,只需主banner播放即可,其他banner会跟随切换。
hBanner.play(true);
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐