ViewPager實現圖片的輪播

　　在app中圖片的輪播顯示能夠說是很是常見的實現效果了，其實現原理不過是利用ViewPager，而後利用handler每隔必定的時間將ViewPager的currentItem設置爲當前item的position+1便可。先來看看效果圖吧：

　　就是實現這樣的一個輪播廣告的效果。

　　由於這個是本身爲了練習仿照某旅遊類App作的，因此這裏的數據是使用抓包工具抓取的，準備數據等工做就不在這裏贅述了，反正數據的添加大致都是相同的。個人思路是這樣的，從網絡上實時的獲取數據(固然你也能夠將數據寫死)，而後經過網絡工具類和json解析類完成對數據的解析與封裝從List集合。根據集合的長度來決定ViewPager有多少page頁面，下面的小圓點有多少。在函數中首先要設置一個boolean類型的標誌位，用來判斷是否中止輪播的（咱們要在此頁面不可見（onStop()方法內）的時候結束輪播），定義一個全局變量來記錄當前的小圓點的位置。

1 private boolean isStop = false;  //標誌位，判斷是否中止輪播
2 private int previousPointEnale = 0;  //標記上一個小圓點的位置

而後咱們就要爲ViewPager的輪播作準備了，好比說動態的根據數據條目來生成小圓點，定義適配器等，代碼以下：

 1 /**
 2      * banner的圖片輪播事件初始化
 3      */
 4     private void initCycleEvent() {
 5         //根據解析到的圖片的個數，初始化小圓點
 6         LinearLayout.LayoutParams params;
 7         for (int i = 0; i < imageViewList.size(); i++) {
 8             View dot = new View(getActivity());
 9             dot.setBackgroundResource(R.drawable.point_background);  
10             params = new LinearLayout.LayoutParams(15, 15);
11             params.leftMargin = 10;
12             dot.setLayoutParams(params);
13             dot.setEnabled(false);
14             ll_dot_group.addView(dot);
15         }
16 
17         //定義匿名適配器
18         adapter = new PagerAdapter() {
19             @Override
20             public int getCount() {
21                 //由於要實現輪播，因此將數值設置的大一些
22                 return Integer.MAX_VALUE;
23             }
24 
25             @Override
26             public boolean isViewFromObject(View view, Object object) {
27                 return view == object;
28             }
29 
30             @Override
31             public Object instantiateItem(ViewGroup container, final int position) {
32                 imageViewList.get(position % imageViewList.size()).setOnClickListener(new View.OnClickListener() {
33                     @Override
34                     public void onClick(View v) {
35                         Intent intent = new Intent(getActivity(), WebViewActivity.class);
36                         intent.putExtra("url", bannerList.get(position % imageViewList.size()).getUrl());
37                         startActivity(intent);
38                     }
39                 });
40                 container.addView(imageViewList.get(position % imageViewList.size()));
41                 return imageViewList.get(position % imageViewList.size());
42             }
43 
44             @Override
45             public void destroyItem(ViewGroup container, int position, Object object) {
46                 container.removeView(imageViewList.get(position % imageViewList.size()));
47             }
48         };
49         vp_banner.setAdapter(adapter);
50         //初始化第一個page頁和第一個小圓點
51         vp_banner.setCurrentItem(0);
52         ll_dot_group.getChildAt(0).setEnabled(true);
53         //爲viewPager設置監聽
54         vp_banner.addOnPageChangeListener(new MyPageChangeListener());
55     }

這裏小圓點咱們沒有用圖片，而是用自定義的<selector>和<shape>結合來展現出來的。

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

小圓點獲取焦點的時候顯示的是這個<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="3dp" />
6 
7     <solid android:color="#AAFFFFFF" />
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="3dp" />
6 
7     <solid android:color="#55000000" />
8 
9 </shape>

適配器PagerAdapter中的getCount()方法，這個方法是返回要展現生成的ViewPager的page頁的個數的，instantiateItem()方法(加載page頁)的執行次數是根據getCount()的返回值來決定的，因此咱們這裏由於要"無限"循環，因此將其設置的大一些，使用INTEGER.MAX整數的最大值來表示。imageViewList是存儲咱們要展現的imageView的集合，正常狀況下不須要輪播的時候，咱們直接根據position來addView()便可，可是由於要實現輪播，因此咱們利用position和imageViewList集合的長度使用求餘的方法來肯定圖片的下標

1 position % imageViewList.size()

下面是定義適配器和動態生成標識圖片位置的小圓點的代碼：

 1   /**
 2      * banner的圖片輪播事件初始化
 3      */
 4     private void initCycleEvent() {
 5         //根據解析到的圖片的個數，初始化小圓點
 6         LinearLayout.LayoutParams params;
 7         for (int i = 0; i < imageViewList.size(); i++) {
 8             View dot = new View(getActivity());
 9             dot.setBackgroundResource(R.drawable.point_background);
10             params = new LinearLayout.LayoutParams(15, 15);
11             params.leftMargin = 10;
12             dot.setLayoutParams(params);
13             dot.setEnabled(false);
14             ll_dot_group.addView(dot);
15         }
16 
17         //定義匿名適配器
18         adapter = new PagerAdapter() {
19             @Override
20             public int getCount() {
21                 //由於要實現輪播，因此將數值設置的大一些
22                 return Integer.MAX_VALUE;
23             }
24 
25             @Override
26             public boolean isViewFromObject(View view, Object object) {
27                 return view == object;
28             }
29 
30             @Override
31             public Object instantiateItem(ViewGroup container, final int position) {
32                 imageViewList.get(position % imageViewList.size()).setOnClickListener(new View.OnClickListener() {
33                     @Override
34                     public void onClick(View v) {
35                         Intent intent = new Intent(getActivity(), WebViewActivity.class);
36                         intent.putExtra("url", bannerList.get(position % imageViewList.size()).getUrl());
37                         startActivity(intent);
38                     }
39                 });
40                 container.addView(imageViewList.get(position % imageViewList.size()));
41                 return imageViewList.get(position % imageViewList.size());
42             }
43 
44             @Override
45             public void destroyItem(ViewGroup container, int position, Object object) {
46                 container.removeView(imageViewList.get(position % imageViewList.size()));
47             }
48         };
49         vp_banner.setAdapter(adapter);
50         //初始化第一個page頁和第一個小圓點
51         vp_banner.setCurrentItem(0);
52         ll_dot_group.getChildAt(0).setEnabled(true);
53         //爲viewPager設置監聽
54         vp_banner.addOnPageChangeListener(new MyPageChangeListener());
55     }

記住在addView()和removeView()的時候都是要根據求餘的值來找到對應位置的應該展現的imageView。初始化工做完成，下面應該是完成對輪播的操做了，這裏咱們開啓一個線程來每相隔必定的時間，獲取當前ViewPager的page頁的position，而後+1，再設置當前page頁下標爲這個新的值便可：

 1 /**
 2      * 開啓輪播線程的方法
 3      */
 4     private void startBannerScrollThread() {
 5         new Thread(new Runnable() {
 6             @Override
 7             public void run() {
 8                 //先判斷是否中止輪播
 9                 while (!isStop) {
10                     SystemClock.sleep(2000);
11                     handler.post(new Runnable() {
12                         @Override
13                         public void run() {
14                             int newindex = vp_banner.getCurrentItem() + 1;
15                             vp_banner.setCurrentItem(newindex);
16                         }
17                     });
18                 }
19             }
20         }).start();
21     }

固然，由於每一個圖片展現給咱們的時候，在圖片下方的指示性小圓點要有相應的變化，因此在ViewPager中咱們還要處理它的滑動事件，因此咱們自定義了一個類，實現了ViewPager.OnPageChangeListener接口，在onPageSelected()方法中處理相應的事件：

 1  /**
 2      * viewPager滑動監聽事件
 3      */
 4     class MyPageChangeListener implements ViewPager.OnPageChangeListener {
 5 
 6         @Override
 7         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 8 
 9         }
10 
11         @Override
12         public void onPageSelected(int position) {
13             //獲取新的一頁的位置
14             int newPosition = position % imageViewList.size();
15             //將上一個小圓點的背景設爲默認那個
16             ll_dot_group.getChildAt(previousPointEnale).setEnabled(false);
17             //設置當前page頁的小圓點樣式
18             ll_dot_group.getChildAt(newPosition).setEnabled(true);
19             //把新的位置賦值給previousPointEnale
20             previousPointEnale = newPosition;
21         }
22 
23         @Override
24         public void onPageScrollStateChanged(int state) {
25 
26         }
27     }

關鍵的代碼和思路就是這樣的，這裏還有一篇我參照的文章，寫的不錯，下面把連接放在這裏：

ViewPager實現Banner循環播放