關于廣告輪播，大家肯定不會陌生，它在現手機市場各大APP出現的頻率極高，它的優點在于"不占屏"，可以僅用小小的固定空位來展示幾個甚至幾十個廣告條，而且動態效果很好，具有很好的用戶"友好性"，下面來看幾個示例圖：

再來看下我仿寫的效果：

關于廣告輪播Banner這個東西，GitHub上面應該有現成的開源組件，不過我沒去找過，覺得實現起來不會太難，就自己去仿寫了，下面我說下實現的思路：

1、首先看到這個可以滑動切換圖片的界面，我們很自然就會想到ViewPager控件。

2、需要去考慮它的偽循環（其實只是滑到末尾圖片再切換到開始圖片，給人一種"無限循環"的錯覺），做過GalleyView畫廊效果的朋友應該很熟悉，當我們滑到畫廊到底端，如果想看第一張圖片需要再重新滑回去，那么這樣給用戶的體驗就不好，所以我們會在適配器Adapter的getCount()方法里，返回一個很大的數值，讓它能夠"無限循環"。不清楚的朋友也沒關系，下面代碼會詳細提到。

3、就是考慮它的自動滑動效果，那么很簡單的就會去想到定時器，每隔幾秒讓它自動滑動一次，再通過配合ViewPager的設置當前頁面setCurrentItem就可以達到我們想要的效果。

4、最后就是需要考慮到細節方面的東西了，如何讓畫面滑動配合底部的小圓圈點，我們在做定時器操作的時候，無限循環肯定是一個while永true的狀態，當我們切換退出當前界面的時候，這個定時器循環要怎么處理。

好了，考慮好實現原理和流程，我們就可以上手寫代碼了。

1、首先先來分析下布局：

上面截圖說的很詳細了，這里直接上代碼：

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2     xmlns:tools="http://schemas.android.com/tools" 3     android:layout_width="match_parent" 4     android:layout_height="match_parent" > 5  6     <android.support.v4.view.ViewPager 7         android:id="@+id/viewpager" 8         android:layout_width="match_parent" 9         android:layout_height="150dp" />10 11     <LinearLayout12         android:layout_width="match_parent"13         android:layout_height="wrap_content"14         android:layout_alignBottom="@id/viewpager"15         android:background="#33000000"16         android:orientation="vertical"17         android:padding="5dp" >18 19         <TextView20             android:id="@+id/tv_bannertext"21             android:layout_width="wrap_content"22             android:layout_height="wrap_content"23             android:layout_gravity="center_horizontal"24             android:padding="5dp"25             android:text="我是第一個廣告語"26             android:textColor="@android:color/white" />27 28         <LinearLayout29             android:id="@+id/points"30             android:layout_width="match_parent"31             android:layout_height="wrap_content"32             android:gravity="center_horizontal"33             android:orientation="horizontal" >34         </LinearLayout>35     </LinearLayout>36 37 </RelativeLayout>

然后是小圓圈的樣式，這里有2個xml，一個是選擇狀態，一個是空白狀態

1 <?xml version="1.0" encoding="utf-8"?>2 <shape xmlns:android="http://schemas.android.com/apk/res/android"3     android:shape="oval" >4 5     <corners android:radius="0.5dp" />6 7     <solid android:color="#55000000" />8 9 </shape>

1 <?xml version="1.0" encoding="utf-8"?>2 <shape xmlns:android="http://schemas.android.com/apk/res/android"3     android:shape="oval" >4 5     <corners android:radius="0.5dp" />6 7     <solid android:color="#AAFFFFFF" />8 9 </shape>

1 <?xml version="1.0" encoding="utf-8"?>2 <selector xmlns:android="http://schemas.android.com/apk/res/android">3 4     <item android:drawable="@drawable/point_bg_enable" android:state_enabled="true"></item>5     <item android:drawable="@drawable/point_bg_normal" android:state_enabled="false"></item>6 7 </selector>

2、ViewPager適配器

　　既然我們使用到了VierPager，那么必須要給它設置一個適配器來裝載我們所要展示的廣告圖，這里需要注意的是getCount()這個方法，正常情況下，我們讓它返回的是數據源的長度大小，但這里我們需要實現"無限循環"的效果，這么我們可以返回一個比較大的是比如：Integer.MAX_VALUE，這個數值可是20億，用戶再怎么滑到也不會滑到上億次級別的吧。然后避免出現空指針異常，我們在下面addView和removeView的時候就不能再直接使用position去索引資源了，我們應該取余item的總數量，這樣索引位置就不會超過資源數據的數量，例如1%777=1,1%999=1。

對于ViewPager不熟悉的朋友可以看下我之前寫過的一篇文章《安卓開發筆記——ViewPager組件（仿微信引導界面）》

 1 package com.lcw.rabbit.banner; 2  3 import java.util.List; 4  5 import android.support.v4.view.PagerAdapter; 6 import android.view.View; 7 import android.view.ViewGroup; 8 import android.widget.ImageView; 9 /**10  * ViewPager適配器11  * @author Rabbit_Lee12  *13  */14 public class BannerAdapter extends PagerAdapter {15 16     //數據源17     PRivate List<ImageView> mList;18 19     public BannerAdapter(List<ImageView> list) {20         this.mList = list;21     }22 23     @Override24     public int getCount() {25         //取超大的數，實現無線循環效果26         return Integer.MAX_VALUE;27     }28 29     @Override30     public boolean isViewFromObject(View arg0, Object arg1) {31         return arg0 == arg1;32     }33 34     @Override35     public Object instantiateItem(ViewGroup container, int position) {36         container.addView(mList.get(position%mList.size()));37         return mList.get(position%mList.size());38     }39 40     @Override41     public void destroyItem(ViewGroup container, int position, Object object) {42         container.removeView(mList.get(position%mList.size()));43     }44 45 }

3、主代碼

　　首先先說下小圓圈點的實現，這里有2種方式，一種是直接在廣告圖上"畫死"，這種方法耗時耗力而且維護起來很不靈活，所以我們使用第二種方式動態生成，根據廣告圖的資源長度在給定的LinearLayout里去添加圓圈點View。然后我們需要給它一個pointIndex標志位，用它來記錄當前所在的頁面位置，初始為0，再每次滑動的時候根據這個標志位來切換小圓圈的狀態。

再來說下我們最開始的頁面位置，我們不可以設置為0（第一頁），如果我們設置為0，那么便不能向左滑動了。由于我們在適配器的getCount返回了Integer.MAX_VALUE ，我們可以取它的中間點來作為起始點，用setCurrentItem來出發VierPager的監聽器里的onPageSelected的方法，那么左右就都可以滑動了。

　　最后就是定時器SystemClock了，我們這里開辟了一條新的線程通過while永true來達到這個效果，讓其每隔2秒執行一次設置當前頁面的動作，每次只需要簡單設置頁面+1即可，最后要留意的是我們需要給這個定時器設定一個開關，在我們切換退出該頁面的時候要停止掉定時器的操作，也就是去重寫我們的onDestroy方法，這里把開關關掉即可。

  1 package com.lcw.rabbit.banner;  2   3 import java.util.ArrayList;  4 import java.util.List;  5   6 import android.app.Activity;  7 import android.os.Bundle;  8 import android.os.SystemClock;  9 import android.support.v4.view.ViewPager; 10 import android.support.v4.view.ViewPager.OnPageChangeListener; 11 import android.view.View; 12 import android.widget.ImageView; 13 import android.widget.LinearLayout; 14 import android.widget.LinearLayout.LayoutParams; 15 import android.widget.TextView; 16  17 public class MainActivity extends Activity { 18  19     // 聲明控件 20     private ViewPager mViewPager; 21     private List<ImageView> mlist; 22     private TextView mTextView; 23     private LinearLayout mLinearLayout; 24  25     // 廣告圖素材 26     private int[] bannerImages = { R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4 }; 27     // 廣告語 28     private String[] bannerTexts = { "因為專業 所以卓越", "堅持創新 行業領跑", "誠信 專業 雙贏", "精細 和諧 大氣 開放" }; 29  30     // ViewPager適配器與監聽器 31     private BannerAdapter mAdapter; 32     private BannerListener bannerListener; 33  34     // 圓圈標志位 35     private int pointIndex = 0; 36     // 線程標志 37     private boolean isStop = false; 38  39     @Override 40     protected void onCreate(Bundle savedInstanceState) { 41         super.onCreate(savedInstanceState); 42         setContentView(R.layout.activity_main); 43         initView(); 44         initData(); 45         initAction(); 46  47         // 開啟新線程，2秒一次更新Banner 48         new Thread(new Runnable() { 49  50             @Override 51             public void run() { 52                 while (!isStop) { 53                     SystemClock.sleep(2000); 54                     runOnUiThread(new Runnable() { 55  56                         @Override 57                         public void run() { 58                             mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1); 59                         } 60                     }); 61                 } 62             } 63         }).start(); 64     } 65  66     /** 67      * 初始化事件 68      */ 69     private void initAction() { 70         bannerListener = new BannerListener(); 71         mViewPager.setOnPageChangeListener(bannerListener); 72         //取中間數來作為起始位置 73         int index = (Integer.MAX_VALUE / 2) - (Integer.MAX_VALUE / 2 % mlist.size()); 74         //用來出發監聽器 75         mViewPager.setCurrentItem(index); 76         mLinearLayout.getChildAt(pointIndex).setEnabled(true); 77     } 78  79     /** 80      * 初始化數據 81      */ 82     private void initData() { 83         mlist = new ArrayList<ImageView>(); 84         View view; 85         LayoutParams params; 86         for (int i = 0; i < bannerImages.length; i++) { 87             // 設置廣告圖 88             ImageView imageView = new ImageView(MainActivity.this); 89             imageView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); 90             imageView.setBackgroundResource(bannerImages[i]); 91             mlist.add(imageView); 92             // 設置圓圈點 93             view = new View(MainActivity.this); 94             params = new LayoutParams(5, 5); 95             params.leftMargin = 10; 96             view.setBackgroundResource(R.drawable.point_background); 97             view.setLayoutParams(params); 98             view.setEnabled(false); 99 100             mLinearLayout.addView(view);101         }102         mAdapter = new BannerAdapter(mlist);103         mViewPager.setAdapter(mAdapter);104     }105 106     /**107      * 初始化View操作108      */109     private void initView() {110         mViewPager = (ViewPager) findViewById(R.id.viewpager);111         mTextView = (TextView) findViewById(R.id.tv_bannertext);112         mLinearLayout = (LinearLayout) findViewById(R.id.points);113     }114 115     //實現VierPager監聽器接口116     class BannerListener implements OnPageChangeListener {117 118         @Override119         public void onPageScrollStateChanged(int arg0) {120         }121 122         @Override123         public void onPageScrolled(int arg0, float arg1, int arg2) {124         }125 126         @Override127         public void onPageSelected(int position) {128             int newPosition = position % bannerImages.length;129             mTextView.setText(bannerTexts[newPosition]);130             mLinearLayout.getChildAt(newPosition).setEnabled(true);131             mLinearLayout.getChildAt(pointIndex).setEnabled(false);132             // 更新標志位133             pointIndex = newPosition;134 135         }136 137     }138 139     @Override140     protected void onDestroy() {141         // 關閉定時器142         isStop = true;143         super.onDestroy();144     }145 146 }

　好了，到這里代碼就結束了，很簡單的一個小Demo，這里只是起到拋磚引玉的作用，在我們真正的應用這種廣告圖不可能直接存放在我們的資源文件里面的，肯定是通過網絡去獲取的，然后這里就要涉及到了圖片的緩存等知識點，關于圖片的緩存策略可以看下我之前寫過的一篇博文：《安卓開發筆記——關于圖片的三級緩存策略（內存LruCache+磁盤DiskLruCache+網絡Volley）》。

如果大家有更好的實現方法或者有什么疑問的地方，可以在文章評論給我留言。

作者：李晨瑋出處：http://www.49028c.com/lichenwei/本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接。正在看本人博客的這位童鞋，我看你氣度不凡，談吐間隱隱有王者之氣，日后必有一番作為！旁邊有“推薦”二字，你就順手把它點了吧，相得準，我分文不收；相不準，你也好回來找我！