Android廣告圖片輪播控件,支持無限循環(huán)和5種主題,可以靈活設(shè)置輪播樣式、時(shí)間、位置、圖片加載框架等!


傳送門(最新文檔信息請(qǐng)?zhí)D(zhuǎn)到github查看)

https://github.com/youth5201314/banner



現(xiàn)在的絕大數(shù)app都有banner界面,實(shí)現(xiàn)循環(huán)播放多個(gè)廣告圖片和手動(dòng)滑動(dòng)循環(huán)等功能。因?yàn)閂iewPager并不支持循環(huán)翻頁,
所以要實(shí)現(xiàn)循環(huán)還得需要自己去動(dòng)手,我就把項(xiàng)目中的控件剔了出來,希望大家覺得有用。目前框架可以進(jìn)行不同樣式、不同動(dòng)畫設(shè)置,
以及完善的api方法能滿足大部分的需求了。

效果圖

模式 圖片
指示器模式
效果示例
效果示例
數(shù)字模式
效果示例
效果示例
數(shù)字加標(biāo)題模式
效果示例
效果示例
指示器加標(biāo)題模式
垂直顯示
效果示例
效果示例
指示器加標(biāo)題模式
水平顯示
效果示例
效果示例

聯(lián)系方式

效果示例
  • 如果遇到問題和建議歡迎在給我發(fā)送郵件或者加入qq群,希望讓這個(gè)工程越來越完善。

常量

常量名稱 描述 所屬方法
BannerConfig.NOT_INDICATOR 不顯示指示器和標(biāo)題 setBannerStyle
BannerConfig.CIRCLE_INDICATOR 顯示圓形指示器 setBannerStyle
BannerConfig.NUM_INDICATOR 顯示數(shù)字指示器 setBannerStyle
BannerConfig.NUM_INDICATOR_TITLE 顯示數(shù)字指示器和標(biāo)題 setBannerStyle
BannerConfig.CIRCLE_INDICATOR_TITLE 顯示圓形指示器和標(biāo)題(垂直顯示) setBannerStyle
BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE 顯示圓形指示器和標(biāo)題(水平顯示) setBannerStyle
BannerConfig.LEFT 指示器居左 setIndicatorGravity
BannerConfig.CENTER 指示器居中 setIndicatorGravity
BannerConfig.RIGHT 指示器居右 setIndicatorGravity

動(dòng)畫常量類(setBannerAnimation方法調(diào)用)

常量類名
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) 設(shè)置輪播樣式(默認(rèn)為CIRCLE_INDICATOR)
setIndicatorGravity(int type) 設(shè)置指示器位置(沒有標(biāo)題默認(rèn)為右邊,有標(biāo)題時(shí)默認(rèn)左邊)
isAutoPlay(boolean isAutoPlay) 設(shè)置是否自動(dòng)輪播(默認(rèn)自動(dòng)) 1.3.3結(jié)束
startAutoPlay() 開始輪播 1.4開始,此方法只作用于banner加載完畢-->需要在start()后執(zhí)行
stopAutoPlay() 結(jié)束輪播 1.4開始,此方法只作用于banner加載完畢-->需要在start()后執(zhí)行
start() 開始進(jìn)行banner渲染 1.4開始
setOffscreenPageLimit(int limit) 同viewpager的方法作用一樣 1.4.2開始
setBannerTitle(String[] titles) 設(shè)置輪播要顯示的標(biāo)題和圖片對(duì)應(yīng)(如果不傳默認(rèn)不顯示標(biāo)題) 1.3.3結(jié)束
setBannerTitleList(List<String> titles) 設(shè)置輪播要顯示的標(biāo)題和圖片對(duì)應(yīng)(如果不傳默認(rèn)不顯示標(biāo)題) 1.3.3結(jié)束
setBannerTitles(List<String> titles) 設(shè)置輪播要顯示的標(biāo)題和圖片對(duì)應(yīng)(如果不傳默認(rèn)不顯示標(biāo)題) 1.4開始
setDelayTime(int time) 設(shè)置輪播圖片間隔時(shí)間(單位毫秒,默認(rèn)為2000)
setImages(Object[]/List<?> imagesUrl) 設(shè)置輪播圖片(所有設(shè)置參數(shù)方法都放在此方法之前執(zhí)行) 1.4后去掉數(shù)組傳參
setImages(Object[]/List<?> imagesUrl,OnLoadImageListener listener) 設(shè)置輪播圖片,并且自定義圖片加載方式 1.3.3結(jié)束
setOnBannerClickListener(this) 設(shè)置點(diǎn)擊事件,下標(biāo)是從1開始
setOnLoadImageListener(this) 設(shè)置圖片加載事件,可以自定義圖片加載方式 1.3.3結(jié)束
setImageLoader(Object implements ImageLoader) 設(shè)置圖片加載器 1.4開始
setOnPageChangeListener(this) 設(shè)置viewpager的滑動(dòng)監(jiān)聽
setBannerAnimation(Class<? extends PageTransformer> transformer) 設(shè)置viewpager的默認(rèn)動(dòng)畫,傳值見動(dòng)畫表
setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) 設(shè)置viewpager的自定義動(dòng)畫

Attributes屬性(banner布局文件中調(diào)用)

Attributes forma describe
delay_time integer 輪播執(zhí)行時(shí)間,默認(rèn)2000
is_auto_play boolean 是否自動(dòng)輪播,默認(rèn)true
title_background color reference 標(biāo)題欄的背景色
title_textcolor color 標(biāo)題字體顏色
title_textsize dimension 標(biāo)題字體大小
title_height dimension 標(biāo)題欄高度
indicator_width dimension 指示器圓形按鈕的寬度
indicator_height dimension 指示器圓形按鈕的高度
indicator_margin dimension 指示器之間的間距
indicator_drawable_selected reference 指示器選中效果
indicator_drawable_unselected reference 指示器未選中效果
image_scale_type enum(fit_xy/center_crop) 和imageview的ScaleType作用一樣

<a > [ 點(diǎn)擊查看 ViewPager的PageTransformer用法 ]</a>

使用步驟

Step 1.依賴banner

Gradle

dependencies{
    compile 'com.youth.banner:banner:1.4.8'  //最新版本
    or
    compile 'com.youth.banner:banner:1.3.3' //舊版本,舊版本用法下面有跳轉(zhuǎn)鏈接
}

或者引用本地lib

compile project(':banner')

Step 2.添加權(quán)限到你的 AndroidManifest.xml

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

<!-- if you want to load images from a file OR from the internet -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Step 3.在布局文件中添加Banner,可以設(shè)置自定義屬性

?。?!此步驟可以省略,直接在Activity或者Fragment中new 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="高度自己設(shè)置" />

Step 4.重寫圖片加載器

public class GlideImageLoader extends ImageLoader {
    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
        /**
          常用的圖片加載庫(kù):
          Universal Image Loader:一個(gè)強(qiáng)大的圖片加載庫(kù),包含各種各樣的配置,最老牌,使用也最廣泛。      
          Picasso: Square出品,必屬精品。和OkHttp搭配起來更配呦!          
          Volley ImageLoader:Google官方出品,可惜不能加載本地圖片~          
          Fresco:Facebook出的,天生驕傲!不是一般的強(qiáng)大。         
          Glide:Google推薦的圖片加載庫(kù),專注于流暢的滾動(dòng)。
         */
         
        //Glide 加載圖片簡(jiǎn)單用法
        Glide.with(context).load(path).into(imageView);

        //Picasso 加載圖片簡(jiǎn)單用法
        Picasso.with(context).load(path).into(imageView)
        
        //用fresco加載圖片簡(jiǎn)單用法
        Uri uri = Uri.parse((String) path);
        imageView.setImageURI(uri);
    }
    //提供createImageView 方法,如果不用可以不重寫這個(gè)方法,方便fresco自定義ImageView
    @Override
    public ImageView createImageView(Context context) {
        SimpleDraweeView simpleDraweeView=new SimpleDraweeView(context);
        return simpleDraweeView;
    }
}

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

--------------------------簡(jiǎn)單使用-------------------------------
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Banner banner = (Banner) findViewById(R.id.banner);
    //設(shè)置圖片加載器
    banner.setImageLoader(new GlideImageLoader());
    //設(shè)置圖片集合
    banner.setImages(images);
    //banner設(shè)置方法全部調(diào)用完畢時(shí)最后調(diào)用
    banner.start();
}
--------------------------詳細(xì)使用-------------------------------
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Banner banner = (Banner) findViewById(R.id.banner);
    //設(shè)置banner樣式
    banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);
    //設(shè)置圖片加載器
    banner.setImageLoader(new GlideImageLoader());
    //設(shè)置圖片集合
    banner.setImages(images);
    //設(shè)置banner動(dòng)畫效果
    banner.setBannerAnimation(Transformer.DepthPage);
    //設(shè)置標(biāo)題集合(當(dāng)banner樣式有顯示title時(shí))
    banner.setBannerTitles(Arrays.asList(titles));
    //設(shè)置自動(dòng)輪播,默認(rèn)為true
    banner.isAutoPlay(true);
    //設(shè)置輪播時(shí)間
    banner.setDelayTime(1500);
    //設(shè)置指示器位置(當(dāng)banner模式中有指示器時(shí))
    banner.setIndicatorGravity(BannerConfig.CENTER);
    //banner設(shè)置方法全部調(diào)用完畢時(shí)最后調(diào)用
    banner.start();
}
-----------------當(dāng)然如果你想偷下懶也可以這么用--------------------
@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();
}

混淆代碼

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

<a > [歷史版本資源地址]</a>

<a > [1.3.3以前舊版本文檔地址]</a>

常見問題

  • 問:eclipse怎么使用banner?

    • 答:在歷史版本列表中下載你想要版本的aar包提取最新資源/也可以自己把工程轉(zhuǎn)成eclipse的

      eclipse的集成demo群文件里有共享!
  • 問:怎么顯示的一片空白?

    • 答:

      1、沒有添加網(wǎng)絡(luò)權(quán)限就抱怨有問題,然后就拒絕使用,我能說什么?

      2、檢查圖片鏈接是否能打開。
  • 問:怎么加載其他圖片資源(資源文件、文件、Uri、assets、raw、ContentProvider、sd卡資源)?

    • 答:列如!如果你使用的是glide,那么可以如下操作,其他圖片圖片加載框架可能有不同
      //資源文件
      Integer[] images={R.mipmap.a,R.mipmap.b,R.mipmap.c};
      //Uri
      Uri uri = resourceIdToUri(context, R.mipmap.ic_launcher);
      Uri[] images={uri};
      //文件對(duì)象
      File[] images={"文件對(duì)象","文件對(duì)象"};
      //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);//這里接收數(shù)組和集合都行
      
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容