Giter Club home page Giter Club logo

banner's Introduction

Android图片轮播控件 如果对你有帮助请star哦!

Apache 2.0 License


现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能。因为ViewPager并不支持循环翻页, 所以要实现循环还得需要自己去动手,我就把项目中的控件剔了出来,希望大家觉得有用。目前框架可以进行不同样式、不同动画设置, 以及完善的api方法能满足大部分的需求了。 ## 效果图 |模式|图片 |---|---| |指示器模式|![效果示例](https://raw.githubusercontent.com/youth5201314/banner/master/image/1.png) |数字模式|![效果示例](https://raw.githubusercontent.com/youth5201314/banner/master/image/2.png) |数字加标题模式|![效果示例](https://raw.githubusercontent.com/youth5201314/banner/master/image/3.png) |指示器加标题模式
垂直显示|![效果示例](https://raw.githubusercontent.com/youth5201314/banner/master/image/4.png) |指示器加标题模式
水平显示|![效果示例](https://raw.githubusercontent.com/youth5201314/banner/master/image/5.png)

联系方式

效果示例

  • 如果遇到问题和建议欢迎在给我发送邮件或者加入qq群,希望让这个工程越来越完善。

##Gradle

dependencies{
    compile 'com.youth.banner:banner:1.3.3'  //指定版本
    compile 'com.youth.banner:banner:+' //最新版本
}

或者引用本地lib

compile project(':banner')

常量

常量名称 描述
BannerConfig.NOT_INDICATOR 不显示指示器和标题
BannerConfig.CIRCLE_INDICATOR 显示圆形指示器
BannerConfig.NUM_INDICATOR 显示数字指示器
BannerConfig.NUM_INDICATOR_TITLE 显示数字指示器和标题
BannerConfig.CIRCLE_INDICATOR_TITLE 显示圆形指示器和标题(垂直显示)
BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE 显示圆形指示器和标题(水平显示)
BannerConfig.LEFT 指示器居左
BannerConfig.CENTER 指示器居中
BannerConfig.RIGHT 指示器居右

动画常量类

常量类名
Transformer.Default
Transformer.Accordion
Transformer.BackgroundToForeground
Transformer.ForegroundToBackground
Transformer.CubeIn
Transformer.CubeOut
Transformer.DepthPage
Transformer.FlipHorizontal
Transformer.FlipVertical
Transformer.RotateDown
Transformer.RotateUp
Transformer.ScaleInOut
Transformer.Stack
Transformer.Tablet
Transformer.ZoomIn
Transformer.ZoomOut
Transformer.ZoomOutSlide

##方法

方法名 描述
setBannerStyle(int bannerStyle) 设置轮播样式(默认为Banner.NOT_INDICATOR)
setIndicatorGravity(int type) 设置指示器位置(没有标题默认为右边,有标题时默认左边)
isAutoPlay(boolean isAutoPlay) 设置是否自动轮播(默认自动)
setBannerTitle(String[] titles) 设置轮播要显示的标题和图片对应(如果不传默认不显示标题)
setBannerTitleList(List titles) 设置轮播要显示的标题和图片对应(如果不传默认不显示标题)
setDelayTime(int time) 设置轮播图片间隔时间(单位毫秒,默认为2000)
setImages(Object[]/List<?> imagesUrl) 设置轮播图片(所有设置参数方法都放在此方法之前执行)
setImages(Object[]/List<?> imagesUrl,OnLoadImageListener listener) 设置轮播图片,并且自定义图片加载方式
setOnBannerClickListener(this) 设置点击事件,下标是从1开始
setOnBannerImageListener(this) 设置图片加载事件,可以自定义图片加载方式
setOnPageChangeListener(this) 设置viewpager的滑动监听
setBannerAnimation(Class<? extends PageTransformer> transformer) 设置viewpager的默认动画,传值见动画表
setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) 设置viewpager的自定义动画

##使用步骤 * 更多用法请下载demo

1.在布局文件中添加Banner,可以设置自定义属性

  • 简单使用
<com.youth.banner.Banner
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="高度自己设置" />
  • 深度自定义,xml扩展属性
  • !!!! 有些属性和方法有重复的地方,完全是为了考虑不同人的习惯
<com.youth.banner.Banner
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="高度自己设置"
    app:default_image="默认加载图片"
    app:delay_time="轮播间隔时间"
    app:is_auto_play="是否自动轮播"
    app:image_scale_type="fit_xy,和imageview的ScaleType作用一样,不过只提供了两个常用的"
    app:indicator_margin="指示器之间的间距"
    app:indicator_drawable_selected="指示器选中效果"
    app:indicator_drawable_unselected="指示器未选中效果"
    app:indicator_height="指示器圆形按钮的高度"
    app:indicator_width="指示器圆形按钮的宽度"
    app:title_background="标题栏的背景色"
    app:title_height="标题栏高度"
    app:title_textcolor="标题字体颜色"
    app:title_textsize="标题字体大小"/>

2.在Activity或者Fragment中配置Banner

private Banner banner;
String[] images= new String[] {"url"};
String[] titles=new String[]{"标题"};
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    banner = (Banner) findViewById(R.id.banner);
    //一步搞定,设置图片就行了
    banner.setImages(images);
 
}

混淆代码

# glide 的混淆代码
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public enum com.bumptech.glide.load.resource.bitmap.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}
# banner 的混淆代码
-keep class com.youth.banner.** {
    *;
 }

[历史版本资源地址]

常见问题

  • 问:eclipse怎么使用banner?

    • 答:在历史版本列表中下载你想要版本的aar包提取最新资源/也可以自己吧工程转成eclipse的
      eclipse的集成demo群文件里有共享
  • 问:怎么显示的一片空白?

    • 答:
      1、没有添加网络权限就抱怨有问题,然后就拒绝使用,我能说什么?
      2、检查图片链接是否能打开。
  • 问:怎么加载其他图片资源(资源文件、文件、Uri、assets、raw、ContentProvider、sd卡资源)?

    • 答:
      //资源文件
      Integer[] images={R.mipmap.a,R.mipmap.b,R.mipmap.c};
      //Uri
      Uri uri = resourceIdToUri(context, R.mipmap.ic_launcher);
      Uri[] images={uri};
      //文件对象
      File[] images={"文件对象","文件对象"};
      //raw 两种方式
      String[] images={"Android.resource://com.frank.glide/raw/raw_1"};
      String[] images={"android.resource://com.frank.glide/raw/"+R.raw.raw_1"};
      //ContentProvider
      String[] images={"content://media/external/images/media/139469"};
      //assets
      String[] images={"file:///android_asset/f003.gif"};
      //sd卡资源
      String[] images={"file://"+ Environment.getExternalStorageDirectory().getPath()+"/test.jpg"};
      
      banner.setImages(images);//这里接收的图片类型只要是glide支持的都行,数组和集合都行

Thanks

更新说明

v1.3.3

优化轮播首尾过渡时间
  • 再实现轮播从最后一张到第一张时,在第一张前面加了一张图片用于过渡,保证轮播不太生硬。这样也就造成了第一张时间有点长, 开始没有发现,感谢大家的反馈,现在简单优化了下依然保留第一张500毫秒的时间用于过渡,让轮播保证流畅性。相信500毫秒的时间 对于效果没有什么影响,这段时间很忙后面会对算法进行修改,目前先这样用着吧。

v1.3.2

修复bug
  • 解决在自动轮播中,轮播中途触摸图片/左右移动时停止轮播,抬起不自动轮播问题

v1.3.1

修复bug
  • app:delay_time="轮播间隔时间" 参数无用问题
  • 在暂停轮播时,当你手动滑动时会重新开始轮播问题
  • 在轮播中,当你按住轮播时暂停,松开后不会轮播问题

v1.2.9

修复bug以及更新功能
  • app:image_scale_type="fit_xy,和imageview的ScaleType作用一样,不过只提供了两个常用的"
  • 修复设置动画后点击事件失效的问题。
  • 取消setScrollerTime设置方法

v1.2.8

增加ViewPager的切换速度设置方法,以及动画的重新封装
  • 整理了17种viewpager过渡动画,并整理为常量方便调用,改变了传参格式,如果不够用可以自行自定义动画
  • 增加setScrollerTime(int duration)设置viewpager的切换速度,(单位毫秒,默认800)

v1.2.7

增加viewpager的切换默认几种动画,和自定义动画方法
  • setBannerAnimation(int type)设置viewpager的默认动画
  • setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer)设置viewpager的自定义动画

v1.2.5

修改bug
  • app:title_height="标题栏高度",高度过小文字不显示问题

v1.2.4

优化更新
  • app:title_background="标题栏的背景色"
  • app:title_height="标题栏高度"
  • app:title_textcolor="标题字体颜色"
  • app:title_textsize="标题字体大小"

v1.2.3

优化更新
  • 修复刷新banner从多张到1张时,还出现滑动的问题
  • demo增加功能

v1.2.2

优化更新
  • 增加BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE显示圆形指示器和标题(水平显示)
  • 修改数字指示器时,变形问题。

v1.2.1

优化更新
  • 修复NUM_INDICATOR和NUM_INDICATOR_TITLE模式下,没有轮播初始化为“1/1”的情况
  • 将图片加载默认图片取消,开发者可根据需要设置

v1.2.0

优化更新
  • 修复小图片每次轮播被放大的问题
  • 开放了viewpager的滑动事件setOnPageChangeListener()
  • 增加触摸轮播图时暂停轮播,离开时继续轮播
  • 增加demo代码解释,关于刷新下标越界问题这个不存在,不懂的请看demo, 不要一出问题就认为是banner的错,看看自己的用法是不是出来问题。

v1.1.9

优化更新
  • 当图片为一张时,禁止轮播
  • 优化标题初始化速度

v1.1.8

bug修改
  • 可能的存在的图片拉伸问题,替换为glide的图片加载大小计算
  • 修改关于非arraylist集合的强转问题。

v1.1.7

应<wuzhaohui026>朋友的要求,做出更新
  • 为标题增加设置集合的方法:setBannerTitleList(List titles)

v1.1.6

综合大家的反馈,做出一些更新
  • 将代码的常量全部提出到BannerConfig类里了,以前的代码,大家需要修改下
  • 有人喜欢xml属性的方式来设置参数,那么增加了几个xml属性 app:default_image="默认加载图片" app:delay_time="轮播间隔时间" app:is_auto_play="是否自动轮播"
  • 增加了设置glide加载方式的默认加载图片方法 app:default_image="默认加载图片"
  • 重新写了一下demo,方便大家更加容易懂

v1.1.5

感谢<imexception>朋友的反馈
  • 创建指示器初始化时默认的背景的添加,减少延迟等待更新
  • 优化指示器背景更新操作

v1.1.4

更新内容
  • 增加setImages传参可以接收list集合
  • 优化在添加数据和创建指示器时的对象内存回收

v1.1.3

修复了 <[email protected]> 朋友反馈的bug:
  • bug① 有标题的时候,向左滑动 ,会数组越界崩溃
  • bug② 指示器为数字的时候,向左滑动时会有一次显示为0/5

v1.1.2

感谢 <[email protected]> 朋友提的意见,做出了如下更改:
  • 增加设置轮播图片,并且自定义图片加载方式:setImages(Object[] imagesUrl,OnLoadImageListener listener)
  • 增加设置图片加载事件,可以自定义图片加载方式:setOnBannerImageListener(this)

v1.1.1

感谢 <[email protected]> 朋友提的意见,做出了如下更改:
  • 增加圆形指示器的位置方法setIndicatorGravity(int type)
  • 增加设置是否自动轮播的方法isAutoPlay(boolean isAutoPlay)

v1.1.0

感谢 <[email protected]> 朋友提的意见,做出了如下更改:
  • 修改指示器样式
  • 增加5种轮播样式,更加灵活方便的运用轮播控件,满足项目需求

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.