1. 程式人生 > >Android banner,輪播圖自動滾動控制元件

Android banner,輪播圖自動滾動控制元件

簡介

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

常量

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

方法
這裡寫圖片描述
這裡寫圖片描述

Attributes屬性(banner佈局檔案中呼叫)

這裡寫圖片描述

使用步驟

Step 1.依賴banner

Gradle
dependencies{
   compile 'com.youth.banner:banner:1.4.2'  //最新版本
   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.** {    *;
}