Banner 淺析

2019-11-10 20:22:00

字體：大中小

供稿：網(wǎng)友

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)手。

Banner框架可以進(jìn)行不同樣式、不同動(dòng)畫設(shè)置，以及完善的api方法能滿足大部分軟件首頁輪播圖效果的需求。

下載地址：https://github.com/youth5201314/banner

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

2. 簡(jiǎn)單使用

！！！此步驟可以省略，直接在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è)置" />

2.2 重寫布局加載器

public class GlideImageLoader extends ImageLoader { @Override public void displayImage(Context context, Object path, ImageView imageView) { /** 注意： 1.圖片加載器由自己選擇，這里不限制，只是提供幾種使用方法 2.返回的圖片路徑為Object類型，由于不能確定你到底使用的那種圖片加載器，傳輸?shù)牡降氖鞘裁锤袷剑敲催@種就使用Object接收和返回，你只需要強(qiáng)轉(zhuǎn)成你傳輸?shù)念愋途托校? 切記不要胡亂強(qiáng)轉(zhuǎn)！ */ eg： //Glide 加載圖片簡(jiǎn)單用法 Glide.with(context) .load(path)//圖片地址 .crossFade() .into(imageView); //Picasso 加載圖片簡(jiǎn)單用法 Picasso.with(context).load(path).into(imageView) //用fresco加載圖片簡(jiǎn)單用法，記得要寫下面的createImageView方法 Uri uri = Uri.parse((String) path); imageView.setImageURI(uri); } //提供createImageView 方法，如果不用可以不重寫這個(gè)方法，主要是方便自定義ImageView的創(chuàng)建 @Override public ImageView createImageView(Context context) { //使用fresco，需要?jiǎng)?chuàng)建它提供的ImageView，當(dāng)然你也可以用自己自定義的具有圖片加載功能的ImageView SimpleDraweeView simpleDraweeView=new SimpleDraweeView(context); return simpleDraweeView; }}--------------------------簡(jiǎn)單使用-------------------------------@OverridePRotected 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(); //或者鏈?zhǔn)秸{(diào)用 banner.setImages(Myapplication.images) .setImageLoader(new GlideImageLoader()) .start();}--------------------------詳細(xì)使用-------------------------------@Overrideprotected 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(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)然如果你想偷下懶也可以這么用--------------------@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()) .setBannerAnimation(Transformer.FlipHorizontal) .start();}

2.4 增加體驗(yàn)

//如果你需要考慮更好的體驗(yàn)，可以這么操作@Overrideprotected void onStart() { super.onStart(); //開始輪播 banner.startAutoPlay();}@Overrideprotected void onStop() { super.onStop(); //結(jié)束輪播 banner.stopAutoPlay();} //設(shè)置banner動(dòng)畫效果 banner.setBannerAnimation(Transformer.DepthPage);

這里寫圖片描述

六種格式

//默認(rèn)是CIRCLE_INDICATOR banner.setImages(MyApplication.images) .setBannerTitles(MyApplication.titles) .setBannerStyle(BannerConfig.NOT_INDICATOR) .setImageLoader(new GlideImageLoader()) .start();

這里寫圖片描述

就是小圓點(diǎn)的位置

banner.setIndicatorGravity(BannerConfig.LEFT);banner.setIndicatorGravity(BannerConfig.CENTER);banner.setIndicatorGravity(BannerConfig.RIGHT); <com.youth.banner.Banner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/banner1" android:layout_width="match_parent" android:layout_height="200dp" app:indicator_drawable_selected="@drawable/selected_radius" app:indicator_drawable_unselected="@drawable/unselected_radius" app:indicator_height="8dp" app:indicator_margin="4dp" app:indicator_width="8dp" /> <com.youth.banner.Banner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/banner2" android:layout_width="match_parent" android:layout_height="200dp" app:indicator_drawable_selected="@color/main_color" app:indicator_drawable_unselected="@android:color/white" app:indicator_height="4dp" app:indicator_margin="4dp" app:indicator_width="20dp" /> <com.youth.banner.Banner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/banner3" android:layout_width="match_parent" android:layout_height="200dp" app:title_background="#555CB85C" app:title_textsize="10sp" app:title_textcolor="@android:color/white" app:title_height="30dp"/>

這里寫圖片描述