Android图片轮播控件

项目基于banner升级改造，扩展了指示器的形状，可动态添加指示器等，sample基于Glide框架最新版本，后期会持续更新
2.0.0开始，放弃了support库，请使用AndroidX

使用步骤

Step 1.依赖banner

Gradle

dependencies{
    implementation 'com.easyandroid:banner:2.0.0'  //最新版本
}

Step 2.添加权限到你的 AndroidManifest.xml

<!-- if you want to load images from the internet -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- if you want use storage permission -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

注意，Android9.0以后，如果使用http协议，需要在<application>节点下添加android:usesCleartextTraffic="true"属性，或配置xml文件，并在<application>节点引用

Step 3.在布局文件中添加Banner，可以设置自定义属性

注意，此步骤可以省略，直接在Activity或者Fragment中new Banner();

<com.easyandroid.banner.Banner
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="高度" />

Step 4.重写图片加载器

public class GlideImageLoader extends ImageLoader {

  private RequestOptions options = new RequestOptions()
            .placeholder(R.drawable.shape_loading)
            .error(R.drawable.shape_loading)
            .centerCrop();

    @Override
    public void displayImage(Context context, Object url, ImageView imageView) {
        /**
          注意：
          1.图片加载器由自己选择，这里不限制，只是提供几种使用方法
          2.返回的图片路径为Object类型，由于不能确定你到底使用的那种图片加载器，
          传输的到的是什么格式，那么这种就使用Object接收和返回，你只需要强转成你传输的类型就行，
          切记不要胡乱强转！
         */
        eg：

        //Glide 加载图片简单用法
        Glide.with(context).load(url)
                .apply(options)
                .into(imageView);

        //Picasso 加载图片简单用法
        Picasso.with(context).load(path).into(imageView);

        //用fresco加载图片简单用法，记得要写下面的createImageView方法
        Uri uri = Uri.parse((String) url);
        imageView.setImageURI(uri);
    }

    //提供createImageView 方法，如果不用可以不重写这个方法，主要是方便自定义ImageView的创建
    @Override
    public ImageView createImageView(Context context) {
        //使用fresco，需要创建它提供的ImageView，当然你也可以用自己自定义的具有图片加载功能的ImageView
        SimpleDraweeView simpleDraweeView=new SimpleDraweeView(context);
        return simpleDraweeView;
    }
}

Step 5.在Activity或者Fragment中配置Banner

注意：start()方法必须放到最后执行，点击事件请放到start()前

--------------------------简单使用-------------------------------
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Banner banner = findViewById(R.id.banner);
    //设置图片加载器
    banner.setImageLoader(new GlideImageLoader());
    //设置图片集合
    banner.setImages(images);
    //banner设置方法全部调用完毕时最后调用
    banner.start();
}
--------------------------详细使用-------------------------------
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Banner banner = findViewById(R.id.banner);
    //设置banner样式
    banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);
    //设置图片加载器
    banner.setImageLoader(new GlideImageLoader());
    //设置图片集合
    banner.setImages(images);
    //设置banner动画效果
    banner.setBannerAnimation(Transformer.DepthPage);
    //设置标题集合（当banner样式有显示title时）
    banner.setBannerTitles(titles);
    //设置自动轮播，默认为true
    banner.isAutoPlay(true);
    //设置轮播时间
    banner.setDelayTime(1500);
    //设置指示器位置（当banner模式中有指示器时）
    banner.setIndicatorGravity(BannerConfig.CENTER);
    //banner设置方法全部调用完毕时最后调用
    banner.start();
}
-----------------极简使用--------------------
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Banner banner = findViewById(R.id.banner);
    banner.setImages(images).setImageLoader(new GlideImageLoader()).start();
}

Step 6.（可选）增加体验

//如果你需要考虑更好的体验，可以这么操作
@Override
protected void onStart() {
    super.onStart();
    //开始轮播
    banner.startAutoPlay();
}

@Override
protected void onStop() {
    super.onStop();
    //结束轮播
    banner.stopAutoPlay();
}

混淆代码

# 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.easyandroid.banner.** {
    *;
 }

TODO LIST

Indicator移动动画
Indicator移动动画模式：
- INSIDE：movingItem在Indicator阵列之内；
- OUTSIDE：movingItem在Indicator阵列之外；
- DEFAULT：默认没有动画;

效果图

模式	图片
无指示器模式
指示器模式
数字模式
数字加标题模式
指示器加标题模式垂直显示
指示器加标题模式水平显示
自定义指示器样式

常量

常量名称	描述	所属方法
BannerConfig.NOT_INDICATOR	不显示指示器和标题	setBannerStyle
BannerConfig.CIRCLE_INDICATOR	显示圆形指示器	setBannerStyle
BannerConfig.NUM_INDICATOR	显示数字指示器	setBannerStyle
BannerConfig.NUM_INDICATOR_TITLE	显示数字指示器和标题	setBannerStyle
BannerConfig.CIRCLE_INDICATOR_TITLE	显示圆形指示器和标题（垂直显示）	setBannerStyle
BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE	显示圆形指示器和标题（水平显示）	setBannerStyle
BannerConfig.LEFT	指示器居左	setIndicatorGravity
BannerConfig.CENTER	指示器居中	setIndicatorGravity
BannerConfig.RIGHT	指示器居右	setIndicatorGravity
BannerConfig.PADDING_LEFT	banner左边距	setBannerPaddingLeft
BannerConfig.PADDING_RIGHT	banner右边距	setBannerPaddingRight
BannerConfig.BANNER_CORNER	banner圆角（需要在ImageLoader里面同时设置图片相同的圆角）	setBannerCorner

方法

方法名	描述	版本限制
setBannerStyle(int bannerStyle)	设置轮播样式（默认为CIRCLE_INDICATOR）	无
setIndicatorGravity(int type)	设置指示器位置（没有标题默认为右边,有标题时默认左边）	无
setBannerPaddingLeft(int type)	设置banner左边距	1.0.2
setBannerPaddingRight(int type)	设置banner右边距	1.0.2
setSelectedDrawable(GradientDrawable selectedDrawable)	设置指示器选中drawable，可配合ShapeUtil使用，设置后xml指定的indicator_drawable_selected无效	无
setUnSelectedDrawable(GradientDrawable unSelectedDrawable)	设置指示器未选中drawable，可配合ShapeUtil使用，设置后xml指定的indicator_drawable_unselected无效	无
isAutoPlay(boolean isAutoPlay)	设置是否自动轮播（默认自动）	无
setViewPagerIsScroll(boolean isScroll)	设置是否允许手动滑动轮播图（默认true）无
update(List<?> imageUrls,List titles)	更新图片和标题	无
update(List<?> imageUrls)	更新图片	无
startAutoPlay()	开始轮播	无，此方法只作用于banner加载完毕-->需要在start()后执行
stopAutoPlay()	结束轮播	无，此方法只作用于banner加载完毕-->需要在start()后执行
start()	开始进行banner渲染（必须放到最后执行）	无
setOffscreenPageLimit(int limit)	同viewpager的方法作用一样	无
setBannerTitles(List titles)	设置轮播要显示的标题和图片对应（如果不传默认不显示标题）	无
setDelayTime(int time)	设置轮播图片间隔时间（单位毫秒，默认为2000）	无
setImages(Object[]/List<?> imagesUrl)	设置轮播图片(所有设置参数方法都放在此方法之前执行)	无
setOnBannerListener(this)	设置点击事件，下标是从0开始	无
setImageLoader(Object implements ImageLoader)	设置图片加载器	无
setOnPageChangeListener(this)	设置viewpager的滑动监听	无
setBannerAnimation(Class<? extends PageTransformer> transformer)	设置viewpager的默认动画,传值见动画表	无
setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer)	设置viewpager的自定义动画	无

Attributes属性（banner布局文件中调用）

Attributes	forma	describe
delay_time	integer	轮播间隔时间，默认2000
scroll_time	integer	轮播滑动执行时间，默认800
is_auto_play	boolean	是否自动轮播，默认true
title_background	color	reference
title_textcolor	color	标题字体颜色
title_textsize	dimension	标题字体大小
title_height	dimension	标题栏高度
indicator_selected_width	dimension	指示器选中的宽度
indicator_unselected_width	dimension	指示器未选中的宽度（如果和选中一样则是圆形，默认是一样的）
indicator_height	dimension	指示器的高度
indicator_margin	dimension	指示器之间的间距
indicator_drawable_selected	reference	指示器选中效果（需注意，受指示器宽度和高度的限制）
indicator_drawable_unselected	reference	指示器未选中效果（需注意，受指示器宽度和高度的限制）
image_scale_type	enum	和imageview的ScaleType作用一样
banner_default_image	reference	当banner数据为空是显示的默认图片
banner_layout	reference	自定义banner布局文件，但是必须保证id的名称一样（你可以将banner的布局文件复制出来进行修改）
banner_padding_left	dimension	banner左边距
banner_padding_right	dimension	banner右边距
banner_corner	dimension	banner圆角
banner_background_resource	color/reference	整个banner布局背景，可以配合mLayoutResId实现自定义背景，注意使用引用资源，不可直接使用"#ffffff"这种形式

动画常量类（setBannerAnimation方法调用）

ViewPagerTransforms 可参考动画时集成的第三方库，大致原理是集成ViewPager.PageTransformer，在onTransform()方法内部实现具体动画逻辑

常量类名	动画效果
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

Thanks

ViewPagerTransforms

更新说明

v1.1.0

抛弃support库，使用AndroidX
添加banner_corner属性，使得banner可设置圆角，注意，如果使用此属性，需要继承ImageLoader，并给图片设置同样的圆角。

v1.0.2

添加banner_padding_left属性，使得banner可单独设置左边距
添加banner_padding_right属性，使得banner可单独设置右边距
添加banner_background_resource属性，使得banner可设置背景资源（color或图片）

v1.0.1

去掉indicator_width属性，添加indicator_selected_width和indicator_unselected_width属性，使得指示器宽度可单独设置
添加方法setSelectedDrawable、setUnSelectedDrawable，配合ShapeUtil工具类，动态添加指示器shape

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
banner		banner
samples		samples
.gitignore		.gitignore
README.md		README.md
build.gradle		build.gradle
config.gradle		config.gradle
gradle.properties		gradle.properties
settings.gradle		settings.gradle

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Android图片轮播控件

使用步骤

Step 1.依赖banner

Step 2.添加权限到你的 AndroidManifest.xml

Step 3.在布局文件中添加Banner，可以设置自定义属性

Step 4.重写图片加载器

Step 5.在Activity或者Fragment中配置Banner

Step 6.（可选）增加体验

混淆代码

TODO LIST

效果图

常量

方法

Attributes属性（banner布局文件中调用）

动画常量类（setBannerAnimation方法调用）

Thanks

更新说明

v1.1.0

v1.0.2

v1.0.1

About

Releases

Packages

Languages

gycold/banner

Folders and files

Latest commit

History

Repository files navigation

Android图片轮播控件

使用步骤

Step 1.依赖banner

Step 2.添加权限到你的 AndroidManifest.xml

Step 3.在布局文件中添加Banner，可以设置自定义属性

Step 4.重写图片加载器

Step 5.在Activity或者Fragment中配置Banner

Step 6.（可选）增加体验

混淆代码

TODO LIST

效果图

常量

方法

Attributes属性（banner布局文件中调用）

动画常量类（setBannerAnimation方法调用）

Thanks

更新说明

v1.1.0

v1.0.2

v1.0.1

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages