Git Product home page Git Product logo

banner's Introduction

Android图片轮播控件

banner Platform SDK

  • 项目基于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

更新说明

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_widthindicator_unselected_width属性,使得指示器宽度可单独设置
  • 添加方法setSelectedDrawablesetUnSelectedDrawable,配合ShapeUtil工具类,动态添加指示器shape

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.