用viewpager實現圖片輪播

應用中經常遇到圖片輪播的需求，這時候就須要用到viewpager這個組件。viewpager是android support v4 中提供的一個組件。viewpager使用須要如下幾步驟：

1.在佈局文件中添加viewpager組件

1 <android.support.v4.view.ViewPager
2         android:id="@+id/vp_adv"
3         android:layout_width="match_parent"
4         android:layout_height="match_parent">
5     </android.support.v4.view.ViewPager>

ViewPager路徑要寫完整，不然會出現問題；

2.建立PagerAdapter,PagerAdapter是viewPager的內容提供者，這裏咱們的圖片就是由PagerAdapter提供給viewpager展現的。一樣PagerAdapter也在support v4包中。具體以下所示：

 1 public class AdvertisingAdapter extends PagerAdapter {
 2 
 3     private List<View> mList;
 4 
 5     public AdvertisingAdapter() {
 6         mList = new ArrayList<View>();
 7     }
 8 
 9     public void setData(List<View> list) {
10         if (list != null) {
11             mList.clear();
12             mList.addAll(list);
13             notifyDataSetChanged();
14         }
15     }
16 
17     @Override
18     public int getCount() {
19         return mList.size();
20     }
21 
22     @Override
23     public boolean isViewFromObject(View view, Object object) {
24         return object == view;
25     }
26 
27     @Override
28     public void destroyItem(ViewGroup container, int position, Object object) {
29         container.removeView(mList.get(position));
30     }
31 
32     @Override
33     public Object instantiateItem(ViewGroup container, int position) {
34         container.addView(mList.get(position), 0);
35         return mList.get(position);
36     }
37 }

3.初始化ViewPager,PagerAdapter

1     protected void setupView() {
2         mPagerAdapter = new AdvertisingAdapter();
3         mViewPager = (ViewPager) findViewById(R.id.vp_adv);
4         mViewPager .setAdapter(mPagerAdapter );
5         mAdvertising.addOnPageChangeListener(this);
6     }    

待PagerAdapter填充圖片數據後，ViewPager即可以將圖片展現出來。

4.添加「.」。基本全部應用使用到ViewPager都會使用「.」標識當前座標，即展現到哪一頁。以下代碼添加點號：

添加布局文件

1 <LinearLayout
2         android:id="@+id/viewGroup"
3         android:layout_width="wrap_content"
4         android:layout_height="wrap_content"
5         android:layout_alignParentBottom="true"
6         android:layout_alignParentRight="true"
7         android:layout_marginBottom="20dp"
8         android:layout_marginRight="20dp"
9         android:orientation="horizontal"></LinearLayout>

在佈局裏面動態添加「點」的view

 1         imageViews = new ImageView[advPics.size()];
 2         ImageView imageView;
 3         for (int i = 0; i < advPics.size(); i++) {
 4             imageView = new ImageView(this);
 5             imageView.setLayoutParams(new LinearLayout.LayoutParams(50, 50));
 6             imageView.setPadding(15, 15, 15, 15);
 7             imageViews[i] = imageView;
 8             if (i == 0) {
 9                 imageViews[i].setImageResource(R.drawable.dot_focus);
10             } else {
11                 imageViews[i].setImageResource(R.drawable.dot_blur);
12             }
13             llDot.addView(imageViews[i]);
14         }

拖動ViewPager時，座標點動態改變

 1 　　@Override
 2     public void onPageSelected(int position) {
 3         LogUtils.d("enter onPageSelected method");
 4         
 5         for (int i = 0; i < advPics.size(); i++) {
 6             imageViews[position].setImageResource(R.drawable.dot_focus);
 7             if (position != i) {
 8                 imageViews[i].setImageResource(R.drawable.dot_blur);
 9             }
10         }
11     }

5.自動輪播。大多數時候，咱們展現圖片時須要其自動輪播的。

啓動線程，控制輪播時間，及發出輪播請求給UI線程

 1 private void initAutoThread() {
 2         Runnable runnable = new Runnable() {
 3             @Override
 4             public void run() {
 5                 while (true) {
 6                     if (!isPlayPaused.get()) {
 7                         sendUiMessage(MSG_UI_CHANGE_ADV_PIC, what.get(), 0, null);
 8                         what.incrementAndGet();
 9                         if (what.get() > advPics.size() - 1) {
10                             what.getAndAdd(-advPics.size());
11                         }
12                     }
13                     if (needExit.get()) {
14                         break;
15                     }
16                     try {
17                         Thread.sleep(8000);
18                     } catch (InterruptedException e) {
19                         e.printStackTrace();
20                     }
21                 }
22             }
23         };
24         Thread thread = new Thread(runnable);
25         thread.setName("Carousel");
26         thread.start();
27     }

UI 線程收到請求後，對顯示的圖片進行更改

1  mViewPager.setCurrentItem(msg.arg1);