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


傳送門(最新文檔信息請跳轉到github查看)

https://github.com/youth5201314/banner



現在的絕大數app都有banner界面,實現循環播放多個廣告圖片和手動滑動循環等功能。因為ViewPager并不支持循環翻頁,
所以要實現循環還得需要自己去動手,我就把項目中的控件剔了出來,希望大家覺得有用。目前框架可以進行不同樣式、不同動畫設置,
以及完善的api方法能滿足大部分的需求了。

效果圖

模式 圖片
指示器模式
效果示例
效果示例
數字模式
效果示例
效果示例
數字加標題模式
效果示例
效果示例
指示器加標題模式
垂直顯示
效果示例
效果示例
指示器加標題模式
水平顯示
效果示例
效果示例

聯系方式

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

常量

常量名稱 描述 所屬方法
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

動畫常量類(setBannerAnimation方法調用)

常量類名
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) 設置輪播樣式(默認為CIRCLE_INDICATOR)
setIndicatorGravity(int type) 設置指示器位置(沒有標題默認為右邊,有標題時默認左邊)
isAutoPlay(boolean isAutoPlay) 設置是否自動輪播(默認自動) 1.3.3結束
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<String> titles) 設置輪播要顯示的標題和圖片對應(如果不傳默認不顯示標題) 1.3.3結束
setBannerTitles(List<String> 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開始
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的自定義動畫

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

Attributes forma describe
delay_time integer 輪播執行時間,默認2000
is_auto_play boolean 是否自動輪播,默認true
title_background color reference 標題欄的背景色
title_textcolor color 標題字體顏色
title_textsize dimension 標題字體大小
title_height dimension 標題欄高度
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 > [ 點擊查看 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' //舊版本,舊版本用法下面有跳轉鏈接
}

或者引用本地lib

compile project(':banner')

Step 2.添加權限到你的 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,可以設置自定義屬性

!!!此步驟可以省略,直接在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="高度自己設置" />

Step 4.重寫圖片加載器

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

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

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

--------------------------簡單使用-------------------------------
@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(Arrays.asList(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();
}

混淆代碼

# 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包提取最新資源/也可以自己把工程轉成eclipse的

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

    • 答:

      1、沒有添加網絡權限就抱怨有問題,然后就拒絕使用,我能說什么?

      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};
      //文件對象
      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);//這里接收數組和集合都行
      
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容