美文网首页
Android轮播图Banner的使用及详解

Android轮播图Banner的使用及详解

作者: xiesen | 来源:发表于2019-07-13 22:54 被阅读0次

1、导入依赖

//banner
implementation 'com.youth.banner:banner:1.4.9'
//glide图片加载器
implementation 'com.github.bumptech.glide:glide:4.9.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

2、添加权限

<uses-permission android:name="android.permission.INTERNET" />//联网
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />//读取外置存储卡

3、添加布局

<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="150dp" />

4、在Activity 中编写代码,相关代码含义已经全部添加注释

public class MyBanner extends AppCompatActivity implements OnBannerListener {
    private Banner banner;
    private ArrayList<String> list_path;
    private ArrayList<String> list_title;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_banner);
        initView();
    }
    private void initView() {
        banner = (Banner) findViewById(R.id.banner);
        //放图片地址的集合
        list_path = new ArrayList<>();
        //放标题的集合
        list_title = new ArrayList<>();

        list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic21363tj30ci08ct96.jpg");
        list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic259ohaj30ci08c74r.jpg");
        list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic2b16zuj30ci08cwf4.jpg");
        list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic2e7vsaj30ci08cglz.jpg");
        list_title.add("好好学习");
        list_title.add("天天向上");
        list_title.add("热爱劳动");
        list_title.add("不搞对象");
        //设置内置样式,共有六种可以点入方法内逐一体验使用。
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
        //设置图片加载器,图片加载器在下方
        banner.setImageLoader(new MyLoader());
        //设置图片网址或地址的集合
        banner.setImages(list_path);
        //设置轮播的动画效果,内含多种特效,可点入方法内查找后内逐一体验
        banner.setBannerAnimation(Transformer.Default);
        //设置轮播图的标题集合
        banner.setBannerTitles(list_title);
        //设置轮播间隔时间
        banner.setDelayTime(3000);
        //设置是否为自动轮播,默认是“是”。
        banner.isAutoPlay(true);
        //设置指示器的位置,小点点,左中右。
        banner.setIndicatorGravity(BannerConfig.CENTER)
        //以上内容都可写成链式布局,这是轮播图的监听。比较重要。方法在下面。
              .setOnBannerListener(this)
        //必须最后调用的方法,启动轮播图。
              .start();


    }
    //轮播图的监听方法
    @Override
    public void OnBannerClick(int position) {
        Log.i("tag", "你点了第"+position+"张轮播图");
    }
//自定义的图片加载器
    private class MyLoader extends ImageLoader {
        @Override
        public void displayImage(Context context, Object path, ImageView imageView) {
            Glide.with(context).load((String) path).into(imageView);
        }
    }
}

5、加代码混淆

还有要记得加代码混淆,不然在release(正式环境下会报错)

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

6、设置内置样式(6种)

BannerConfig.NOT_INDICATOR  不显示指示器和标题   
BannerConfig.CIRCLE_INDICATOR   显示圆形指示器 
BannerConfig.NUM_INDICATOR  显示数字指示器 
BannerConfig.NUM_INDICATOR_TITLE    显示数字指示器和标题  
BannerConfig.CIRCLE_INDICATOR_TITLE 显示圆形指示器和标题(垂直显示)    
BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE  显示圆形指示器和标题(水平显示)
  
banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);

7、方法

方法名 描述 版本限制
setBannerStyle(int bannerStyle) 设置轮播样式(默认为CIRCLE_INDICATOR)
setIndicatorGravity(int type) 设置指示器位置(没有标题默认为右边,有标题时默认左边)
isAutoPlay(boolean isAutoPlay) 设置是否自动轮播(默认自动)
setViewPagerIsScroll(boolean isScroll) 设置是否允许手动滑动轮播图(默认true) 1.4.5开始
update(List<?> imageUrls,List titles) 更新图片和标题 1.4.5开始
update(List<?> imageUrls) 更新图片 1.4.5开始
startAutoPlay() 开始轮播 1.4开始,此方法只作用于banner加载完毕-->需要在start()后执行
stopAutoPlay() 结束轮播 1.4开始,此方法只作用于banner加载完毕-->需要在start()后执行
start() 开始进行banner渲染(必须放到最后执行) 1.4开始
setOffscreenPageLimit(int limit) 同viewpager的方法作用一样 1.4.2开始
setBannerTitle(String[] titles) 设置轮播要显示的标题和图片对应(如果不传默认不显示标题) 1.3.3结束
setBannerTitleList(List titles) 设置轮播要显示的标题和图片对应(如果不传默认不显示标题) 1.3.3结束
setBannerTitles(List titles) 设置轮播要显示的标题和图片对应(如果不传默认不显示标题) 1.4开始
setDelayTime(int time) 设置轮播图片间隔时间(单位毫秒,默认为2000)
setImages(Object[]/List<?> imagesUrl) 设置轮播图片(所有设置参数方法都放在此方法之前执行) 1.4后去掉数组传参
setImages(Object[]/List<?> imagesUrl,OnLoadImageListener listener) 设置轮播图片,并且自定义图片加载方式 1.3.3结束
setOnBannerClickListener(this) 设置点击事件,下标是从1开始 无(1.4.9以后废弃了)
setOnBannerListener(this) 设置点击事件,下标是从0开始 1.4.9以后
setOnLoadImageListener(this) 设置图片加载事件,可以自定义图片加载方式 1.3.3结束
setImageLoader(Object implements ImageLoader) 设置图片加载器 1.4开始
setOnPageChangeListener(this) 设置viewpager的滑动监听
setBannerAnimation(Class<? extends PageTransformer> transformer) 设置viewpager的默认动画,传值见动画表
setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) 设置viewpager的自定义动画

8、使用

在Activity或者Fragment中配置Banner

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

--------------------------简单使用-------------------------------
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Banner 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 = (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 = (Banner) findViewById(R.id.banner);
    banner.setImages(images).setImageLoader(new GlideImageLoader()).start();
}

重写图片加载器

1、导入依赖

//glide图片加载器
implementation 'com.github.bumptech.glide:glide:4.9.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
//Fresco图片加载器
implementation 'com.facebook.fresco:fresco:1.13.0'
//picasso图片加载器
implementation 'com.squareup.picasso:picasso:2.71828'

2、代码实现

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

        //Picasso 加载图片简单用法
        Picasso.with(context).load(path).into(imageView);
        
        //用fresco加载图片简单用法,记得要写下面的createImageView方法
        Uri uri = Uri.parse((String) path);
        imageView.setImageURI(uri);
    }
    
    //提供createImageView 方法,如果不用可以不重写这个方法,主要是方便自定义ImageView的创建
    @Override
    public ImageView createImageView(Context context) {
        //使用fresco,需要创建它提供的ImageView,当然你也可以用自己自定义的具有图片加载功能的ImageView
        SimpleDraweeView simpleDraweeView=new SimpleDraweeView(context);
        return simpleDraweeView;
    }
}

glide图片加载器详解

1、导入依赖

 implementation 'com.github.bumptech.glide:glide:4.9.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

2、加代码混淆

码混淆添加.png

需要配置项目中 app 下的proguard-rules.pro 文件

-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

# for DexGuard only
-keepresourcexmlelements manifest/application/meta-data@value=GlideModule

3、使用

// 对于一个简单的ImageView:
@Override 
public void onCreate(Bundle savedInstanceState) {
  ...
  ImageView imageView = (ImageView) findViewById(R.id.my_image_view);

  Glide.with(this).load("http://goo.gl/gEgYUd").into(imageView);
}

// 对于一个简单的图像列表:
@Override 
public View getView(int position, View recycled, ViewGroup container) {
  final ImageView myImageView;
  if (recycled == null) {
    myImageView = (ImageView) inflater.inflate(R.layout.my_image_view, container, false);
  } else {
    myImageView = (ImageView) recycled;
  }

  String url = myUrls.get(position);

  Glide
    .with(myFragment)
    .load(url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .into(myImageView);

  return myImageView;
}

相关文章

网友评论

      本文标题:Android轮播图Banner的使用及详解

      本文链接:https://www.haomeiwen.com/subject/wrkvkctx.html