2. 程式人生 > >關於圖片輪播廣告窗體的Banner那些事。。。。

關於圖片輪播廣告窗體的Banner那些事。。。。

阿新 • • 發佈：2019-02-16

簡介

現在的絕大數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

方法

方法名 描述 版本限制
setBannerStyle(int bannerStyle) 設定輪播樣式（預設為CIRCLE_INDICATOR） 無
setIndicatorGravity(int type) 設定指示器位置（沒有標題預設為右邊,有標題時預設左邊） 無
isAutoPlay(boolean isAutoPlay) 設定是否自動輪播（預設自動）  無
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開始 無
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作用一樣

使用步驟

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

--------------------------簡單使用-------------------------------@Overrideprotected 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();}--------------------------詳細使用-------------------------------@Overrideprotected 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();}-----------------當然如果你想偷下懶也可以這麼用--------------------@Overrideprotected 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.** {    *;

}

原始碼地址：https://github.com/youth5201314

相關推薦

關於圖片輪播廣告窗體的Banner那些事。。。。

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

Android之——史上最簡單圖片輪播廣告效果實現

如今的Android開發需求越來越來多，實現效果越來越酷炫，很多Android APP都要實現PC網站上那樣的圖片輪播效果，那麼，這些圖片的輪播效果是如何實現的呢？下面，我就跟大家一起來實現這些酷炫的功能。 一、原理 首先，將這些要輪播的圖片和一些文字分別放置在不同的資料集合中，程式啟動的時候預設

Android 廣告（banner）圖片輪播、圖片瀏覽、仿微信大圖檢視控制元件（支援視訊和gif圖片）、支援動態新增資料

    之前專案需要做個仿微信檢視大圖，需要新增圓形下載進度，支援視訊和圖片切換等一系列功能控制元件，自己抽空把開發的自定義控制元件的成果重新構造、整理處理封裝成庫（aar），提供出來，有需要朋友，歡迎使用，如果有什麼建議歡迎留言或者GitHub上提issues

實現廣告圖片輪播效果-AndroidImageSild

left anim wpa img listener pri des indicator ext 在AS中的使用： 1.在build文件中進行配置 compile ‘com.squareup.picasso:picasso:2.3.2‘ comp

bootstrap-輪播廣告頁(帶圖片和文字)

技術 name query bootstra graph 處理器 icon utf cap <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8">

Android-----------廣告圖片輪播控件

enter 位置 模式 bubuko -keep find 直接 implement ray Banner廣告圖片輪播控件，支持無限循環和多種主題，可以靈活設置輪播樣式、動畫、輪播和切換時間、位置、圖片加載框架等！ 很多Android APP中都有廣告欄，我也用過很多

50行代碼圖片輪播加定時廣告

tis play function ont G1 type isp pla nbsp 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf

android 使用圖片輪播圖---banner 使用

轉自：https://github.com/youth5201314/banner 使用步驟 Step 1.依賴banner Gradle dependencies{ compile 'com.youth.banner:banner:1.4.10' //最新版本2018-10-

分別使用js和JQuery實現html首頁圖片輪播以及廣告圖片定時彈出

主要使用setInterval方法設定更新週期，clearInterval清除週期。（如果不清除會一直週期迴圈執行下去，而setTimeout只是在指定時間後執行一次，這裡完全可以替換為setTimeout方法）   一、js首頁輪播 第一步：確定事件(onload)併為

C# winform窗體實現圖片輪播

1、定義一個方法設定控制元件 和執行緒時間 /// <summary> /// 改變圖片 /// </summary> /// <param name="img">圖片</param>

圖片輪播圖之電商大廣告

就按鈕，還有自動播放。有幾個難點，就是最後一張到第一張，和第一張到最後一張的效果無縫切換需要注意一下。然後就是右下角的li根據圖片的索引進行繫結。 程式碼如下 <!DOCTYPE html> <html lang="en"> <head>

使用jQuery快速高效製作網頁互動特效 第五章 上機練習四 製作廣告圖片輪播切換效果

輪播應有的功能大致都有，分享給一些在學的朋友參考學習。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 廣告圖片輪播切

【DEDE】後臺上傳banner圖控制圖片輪播

將圖片輪播做到後臺控制，無論是dedecms還是其他的程式都是一樣的重要，方便客戶自己除錯，不然動不動就拿FTP開刷，一個是操作不方便，增加了使用上的難度，另外也有一定的風險，很可能由於操作生疏，誤操作而導致網站無法正常執行。 本示例講解在後臺控制dedecms首頁輪播圖片

Android--圖片輪播（banner）

使用步驟 Step 1.依賴banner Gradle dependencies{ compile 'com.youth.banner:banner:1.4.10' //最新版本 } 或者引用本地lib compile project(':bann

WebApp圖片輪播banner

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebApp圖片輪播</title>

Jquery 廣告圖片輪播切換

 要點：    1、滑鼠移至圖片上出現左右箭頭，滑鼠移出圖片時，左右箭頭消失    2、單擊左右箭頭時，顯示上一個/下一個圖片，當前數字背景為橙色，其他數字背景為#333333，第一個/最後一個圖片顯示時，單擊箭頭時繼續顯示輪播圖片

安卓首頁圖片輪播效果(淘寶、京東首頁廣告效果)

直奔主題： 1、主要原理就是利用定時任務器定時切換ViewPager的頁面。 2、裡面用了一個讀取網路圖片的外掛，做客戶端使用本地圖片輪播的也很少。 先上個效果圖： 專案程式碼結構截圖： 自定義View 的佈局檔案layout_slideshow.xml： &l

Android banner+glide實現圖片輪播

參考文章：https://blog.csdn.net/lixiang_y/article/details/64920133使用Glide+Banner實現圖片簡單輪播效果。1. 新增依賴    Glide ：implementation 'com.github.bumptec

Banner圖片輪播

依賴：compile 'com.youth.banner:banner:1.4.10' //最新版本佈局：<com.youth.banner.Banner android:id="@+id/banner" android:layout_width="match_par

自定義Banner輪播廣告（真*無限迴圈無卡頓&設定切換速度）

前言 Github上有很多輪播廣告的原始碼，比如帶著很酷炫動畫的flashView框架。 不過就學習而已，我建議每個人都應該自己多嘗試著寫一些控制元件。 以下，是我為小白們分享的簡單經驗。 自定義控制元件 先