封裝一個ViewPager真正的實現圖片無限循環滾動帶導航點

效果圖：

大家在寫項目的過程中常常會碰到須要實現Viewpager里面載入幾張圖片來循環自己主動輪播的效果，假設不封裝一下的話代碼分散在activity里面會顯得非常亂。并且也不利于我們下次復用，所以這里我把viewpager的相關代碼抽取出來放在了一個類里面，使用的時候僅僅須要new 這個對象就可以。

直接看代碼：

MyViewPager.java類：在activity中僅僅須要在初始化數據的時候增加MyViewPager myViewPager=new MyViewPager(this)這段代碼就ok。

package com.duora.bobge.duoradeliverly_version2.custom_view;import android.app.Activity;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;import com.duora.bobge.duoradeliverly_version2.R;
import com.duora.bobge.duoradeliverly_version2.adapter.EventPageAdapter;
import com.duora.bobge.duoradeliverly_version2.base.BaseConfig;
import com.duora.bobge.duoradeliverly_version2.listener.NavigationPageChangeListener;import java.util.ArrayList;/*** Created by bobge on 15/8/10.*/
public class MyViewPager {private Activity activity;private ViewPager viewPager;private LinearLayout mViewPoints;private ArrayList<View> pageViews;private ImageView imageView;/** 將小圓點的圖片用數組表示 */private ImageView[] imageViews;private Handler mHandler = new Handler() {@Overridepublic void dispatchMessage(Message msg) {switch (msg.what) {case BaseConfig.MSG_CHANGE_PHOTO:int index = viewPager.getCurrentItem();viewPager.setCurrentItem(index + 1);mHandler.sendEmptyMessageDelayed(BaseConfig.MSG_CHANGE_PHOTO,BaseConfig.PHOTO_CHANGE_TIME);break;}super.dispatchMessage(msg);}};public MyViewPager(Activity activity) {this.activity = activity;findViewById(activity);addData();initPoint();}private void addData() {pageViews = new ArrayList<View>();for (int i = 0; i < 5; i++) {ImageView imageView = new ImageView(activity);imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);//picasso載入圖片switch (i){case 0:imageView.setBackgroundResource(R.mipmap.a);break;case 1:imageView.setBackgroundResource(R.mipmap.b);break;case 2:imageView.setBackgroundResource(R.mipmap.c);break;case 3:imageView.setBackgroundResource(R.mipmap.e);break;case 4:imageView.setBackgroundResource(R.mipmap.f);break;}pageViews.add(imageView);}}private void findViewById(Activity activity) {this.viewPager= (ViewPager)activity.findViewById(R.id.viewPager_main);this.mViewPoints= (LinearLayout)activity.findViewById(R.id.viewGroup);}//創建viewpager的那幾個滑動的點private void initPoint() {// 創建imageviews數組，大小是要顯示的圖片的數量imageViews = new ImageView[pageViews.size()];// 加入小圓點的圖片for (int i = 0; i < pageViews.size(); i++) {imageView = new ImageView(activity);// 設置小圓點imageview的參數LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(20, 20);layoutParams.setMargins(5, 0, 5, 0);imageView.setLayoutParams(layoutParams);// 創建一個寬高均為20 的布局// 將小圓點layout加入到數組中imageViews[i] = imageView;// 默認選中的是第一張圖片，此時第一個小圓點是選中狀態，其它不是if (i == 0) {imageViews[i].setBackgroundResource(R.mipmap.face_float_icon_on);} else {imageViews[i].setBackgroundResource(R.mipmap.face_float_icon);}// 將imageviews加入到小圓點視圖組mViewPoints.addView(imageViews[i]);}// 設置viewpager的適配器和監聽事件Log.i("test", pageViews.size() + "====");viewPager.setAdapter(new EventPageAdapter(pageViews));viewPager.setOnPageChangeListener(new NavigationPageChangeListener(pageViews, imageViews));viewPager.setCurrentItem((pageViews.size()) * 50);if(pageViews.size()>1){mHandler.sendEmptyMessageDelayed(BaseConfig.MSG_CHANGE_PHOTO, BaseConfig.PHOTO_CHANGE_TIME);}}
}

它的滑動監聽和適配器：

NavigationPageChangeListener.java看命名應該就能知道這個類的作用了，不多說。

package com.duora.bobge.duoradeliverly_version2.listener;import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.ImageView;import com.duora.bobge.duoradeliverly_version2.R;import java.util.ArrayList;/*** Created by bobge on 15/8/5.*/
//viewpager滑動監聽
public class NavigationPageChangeListener implements ViewPager.OnPageChangeListener {private ArrayList<View> pageViews;/** 將小圓點的圖片用數組表示 */private ImageView[] imageViews;public NavigationPageChangeListener(ArrayList<View> pageViews, ImageView[] imageViews) {this.pageViews=pageViews;this.imageViews=imageViews;}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int position) {//當頁面切換時設置導航點的狀態setPointStatus(position);}//設置導航點的狀態private void setPointStatus(int position) {position=position%pageViews.size();for (int i = 0; i < imageViews.length; i++) {imageViews[position].setBackgroundResource(R.mipmap.face_float_icon_on);// 不是當前選中的page。其小圓點設置為未選中的狀態if (position != i) {imageViews[i].setBackgroundResource(R.mipmap.face_float_icon);}}}}

EventPagerAdapter.java類是viewpager的適配器。instantiateItem方法做了一些處理。使事實上現無限循環。

package com.duora.bobge.duoradeliverly_version2.adapter;import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;import java.util.ArrayList;/*** Created by bobge on 15/7/30.*/
public class EventPageAdapter extends PagerAdapter {private ArrayList<View> pageViews;public EventPageAdapter(ArrayList<View> pageViews) {this.pageViews=pageViews;}// 銷毀position位置的界面@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager) container).removeView(pageViews.get(position%pageViews.size()));}// 獲取當前窗口界面數@Overridepublic int getCount() {return Integer.MAX_VALUE;}// 初始化position位置的界面@Overridepublic Object instantiateItem(View v, int position) {try{//((ViewPager) arg0).addView(list.get(arg1),0);((ViewPager) v).addView((View)pageViews.get(position%pageViews.size()),0);}catch (Exception e) {// TODO: handle exception}return pageViews.get(position%pageViews.size());}@Overridepublic boolean isViewFromObject(View v, Object arg1) {return v == arg1;}@Overridepublic void startUpdate(View arg0) {}@Overridepublic int getItemPosition(Object object) {return super.getItemPosition(object);}}

布局：custom_viewpager.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><!--帶導航點的viewpager布局--><android.support.v4.view.ViewPagerandroid:id="@+id/viewPager_main"android:layout_width="match_parent"android:layout_height="match_parent"/><LinearLayoutandroid:id="@+id/viewGroup"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="20dp"android:gravity="center_horizontal"android:orientation="horizontal" ></LinearLayout>
</RelativeLayout>

在activity的布局中僅僅須要導入上面那個布局就可以：

<include
    layout="@layout/custom_viewpager"
    android:id="@+id/myViewPager"
    android:layout_width="match_parent"
    android:layout_height="@dimen/viewpager_height"
    />