安卓開發筆記——自定義廣告輪播Banner（實現無限循環）

　　關於廣告輪播，你們確定不會陌生，它在現手機市場各大APP出現的頻率極高，它的優勢在於"不佔屏"，能夠僅用小小的固定空位來展現幾個甚至幾十個廣告條，並且動態效果很好，具備很好的用戶"友好性"，下面來看幾個示例圖：

 　　　　 

再來看下我仿寫的效果：

 

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

一、首先看到這個能夠滑動切換圖片的界面，咱們很天然就會想到ViewPager控件。

二、須要去考慮它的僞循環（其實只是滑到末尾圖片再切換到開始圖片，給人一種"無限循環"的錯覺），作過GalleyView畫廊效果的朋友應該很熟悉，當咱們滑到畫廊到底端，若是想看第一張圖片須要再從新滑回去，那麼這樣給用戶的體驗就很差，因此咱們會在適配器Adapter的getCount()方法裏，返回一個很大的數值，讓它可以"無限循環"。不清楚的朋友也不要緊，下面代碼會詳細提到。

三、就是考慮它的自動滑動效果，那麼很簡單的就會去想到定時器，每隔幾秒讓它自動滑動一次，再經過配合ViewPager的設置當前頁面setCurrentItem就能夠達到咱們想要的效果。

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

 

好了，考慮好實現原理和流程，咱們就能夠上手寫代碼了。

 

一、首先先來分析下佈局：

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

 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     <LinearLayout
12         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         <TextView
20             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         <LinearLayout
29             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>

小圓圈背景效果

 

二、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_Lee
12  *
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     @Override
24     public int getCount() {
25         //取超大的數，實現無線循環效果
26         return Integer.MAX_VALUE;
27     }
28 
29     @Override
30     public boolean isViewFromObject(View arg0, Object arg1) {
31         return arg0 == arg1;
32     }
33 
34     @Override
35     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     @Override
41     public void destroyItem(ViewGroup container, int position, Object object) {
42         container.removeView(mList.get(position%mList.size()));
43     }
44 
45 }

 

三、主代碼

　　首先先說下小圓圈點的實現，這裏有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         @Override
119         public void onPageScrollStateChanged(int arg0) {
120         }
121 
122         @Override
123         public void onPageScrolled(int arg0, float arg1, int arg2) {
124         }
125 
126         @Override
127         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     @Override
140     protected void onDestroy() {
141         // 關閉定時器
142         isStop = true;
143         super.onDestroy();
144     }
145 
146 }

 　

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

若是你們有更好的實現方法或者有什麼疑問的地方，能夠在文章評論給我留言。

 

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