快捷導(dǎo)航

Android ViewPager實(shí)現(xiàn)無(wú)限循環(huán)輪播廣告位Banner效果

更新時(shí)間：2017年07月12日 14:04:45 作者：zhangphil

這篇文章主要為大家詳細(xì)介紹了Android ViewPager實(shí)現(xiàn)無(wú)限循環(huán)輪播廣告位Banner效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

現(xiàn)在一些app通常會(huì)在頭部放一個(gè)廣告位，底部放置一行小圓圈指示器，指示廣告位當(dāng)前的頁(yè)碼，輪播展示一些圖片，這些圖片來(lái)自于網(wǎng)絡(luò)。這個(gè)廣告位banner是典型的android ViewPager實(shí)現(xiàn)，但是如果自己實(shí)現(xiàn)這樣的ViewPager，要解決一系列瑣碎的問(wèn)題，比如：

（1）這個(gè)廣告位ViewPager要支持無(wú)限循環(huán)輪播，例如，有3張圖片，A,B,C，當(dāng)用戶滑到最后C時(shí)候再滑就要滑到A，反之亦然。
（2）ViewPager要實(shí)現(xiàn)自動(dòng)播放，比如每個(gè)若干秒如2秒，自動(dòng)切換播放到下一張圖片。
（3）通常這樣的ViewPager下面會(huì)放一排指示器小圓圈，用以形象指示當(dāng)前頁(yè)碼。

這樣的Android廣告位復(fù)用程度很高，通用長(zhǎng)度也很高。Github上有一個(gè)開(kāi)源項(xiàng)目：https://github.com/youth5201314/banner
實(shí)現(xiàn)了上述的全部功能，并提供多種樣式選擇。使用也簡(jiǎn)單，比如寫一個(gè)簡(jiǎn)單的例子，xml代碼（片段）：

<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="140dp"
      app:image_scale_type="center_crop"
      app:default_image="@drawable/home"
      app:indicator_drawable_selected="@drawable/selected_radius"
      app:indicator_drawable_unselected="@drawable/unselected_radius"
      app:indicator_height="8dp"
      app:indicator_width="8dp"
      app:indicator_margin="6dp"/>

引用的selected_radius.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <solid android:color="@color/color_e91e63" />
</shape>

unselected_radius.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <solid android:color="#80ffffff" />
</shape>

顏色值#80ffffff是白色半透明。

上層Java代碼：

 Banner banner= (Banner) view.findViewById(R.id.banner);
  String url1="http://xxx.xxx.xxx.jpg";
  String url2="http://xxx.xxx.xxx.jpg";
  String url3="http://xxx.xxx.xxx.jpg";
  String[] images= new String[] {url1,url2,url3};

  banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
  banner.setImages(images);
  banner.setDelayTime(2000);

代碼運(yùn)行結(jié)果：