ViewPager實現左右循環滑動及輪播效果（廣告欄效果）

時間 2020-01-01

標籤 viewpager 實現左右循環滑動效果廣告欄欄目 Android 简体版

原文原文鏈接

ViewPager是一個經常使用的android組件，不過一般咱們使用ViewPager的時候不能實現左右無限循環滑動，在滑到邊界的時候會看到一個不能翻頁的動畫，可能影響用戶體驗。此外，某些區域性的ViewPager（例如展現廣告或者公告之類的ViewPager），可能須要自動輪播的效果，即用戶在不用滑動的狀況下就可以看到其餘頁面的信息。android

1、PagerAdapter：數組

咱們知道ViewPager自帶的滑動效果很是出色，所以咱們基本不須要處理這個滑動，只處理內容的顯示。而內容的顯示是由Adapter控制的，所以這裏重點就是這個Adapter了。爲簡單起見，本例的每一個View直接是一張圖片。下面是Adapter的代碼：ide

（佈局

自定義PagerAdapter類 : 咱們須要自定義一個類, 去繼承PageAdapter, 至少實現下面四個方法 :動畫

destroyItem(View container, int position, Object object) :
做用 :刪除container中指定位置position的頁面;
參數 : container 就是容器, 這裏指的是ViewPager對象, position就是刪除的頁面索引;ui

int getCount() :
做用 :獲取ViewPager頁面的個數;
返回值 : ViewPager頁面個數;this

Object instantiateItem(View container, int position) :
做用 :在給定的位置建立頁面, PageAdapter負責向指定的position位置添加View頁面;
參數 : container容器就是ViewPager, position指的是ViewPager的索引;
返回值 : 返回表明新的一頁的對象;atom

boolean isViewFromObject(View view, Object object) :
做用 :決定instantiateItem()方法返回的Object對象是否是須要顯示的頁面關聯, 這個方法必需要有;
參數 : view 要關聯的頁面, object instantiateItem()方法返回的對象;
返回值 : 是否要關聯顯示頁面與 instantiateItem()返回值;.net

）xml

private class ImageAdapter extends PagerAdapter{

private ArrayList<ImageView> viewlist;

public ImageAdapter(ArrayList<ImageView> viewlist) {
this.viewlist = viewlist;
}

@Override
public int getCount() {
//設置成最大，使用戶看不到邊界
return Integer.MAX_VALUE;
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
//Warning：不要在這裏調用removeView
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//對ViewPager頁號求模取出View列表中要顯示的項
position %= viewlist.size();
if (position<0){
position = viewlist.size()+position;
}
ImageView view = viewlist.get(position);
//若是View已經在以前添加到了一個父組件，則必須先remove，不然會拋出IllegalStateException。
ViewParent vp =view.getParent();
if (vp!=null){
ViewGroup parent = (ViewGroup)vp;
parent.removeView(view);
}
container.addView(view);
//add listeners here if necessary
return view;
}
}
這裏有幾個地方須要注意：
1.
getCount() 方法的返回值：這個值直接關係到ViewPager的「邊界」，所以當咱們把它設置爲Integer.MAX_VALUE以後，用戶基本就看不到這個邊界了（估計滑到這裏的時候電池已經掛了吧o_O）。固然，一般狀況下設置爲100倍實際內容個數也是能夠的，以前看的某個實現就是這麼幹的。

2.
instantiateItem() 方法position的處理：因爲咱們設置了count爲 Integer.MAX_VALUE，所以這個position的取值範圍很大很大，但咱們實際要顯示的內容確定沒這麼多（每每只有幾項），因此這裏確定會有求模操做。可是，簡單的求模會出現問題：考慮用戶向左滑的情形，則position可能會出現負值。因此咱們須要對負值再處理一次，使其落在正確的區間內。

3.
instantiateItem() 方法父組件的處理：一般咱們會直接addView，但這裏若是直接這樣寫，則會拋出IllegalStateException。假設一共有三個view，則當用戶滑到第四個的時候就會觸發這個異常，緣由是咱們試圖把一個有父組件的View添加到另外一個組件。可是，若是直接寫成下面這樣：
(ViewGroup)view.getParent().removeView(view);
則又會由於一開始的時候組件並無父組件而拋出NullPointerException。所以，須要進行一次判斷。也就是上面的代碼。

4.
destroyItem() 方法：因爲咱們在instantiateItem()方法中已經處理了remove的邏輯，所以這裏並不須要處理。實際上，實驗代表這裏若是加上了remove的調用，則會出現ViewPager的內容爲空的狀況。

2、輪播效果的實現：使用Handler進行更新

這裏我定義了一個Handler來處理ViewPager的輪播。所謂的「輪播」效果實現起來是這樣的：每隔必定時間（這裏是3秒）切換一次顯示的頁面。經過控制各頁面以必定順序循環播放，就達到了輪播的效果。爲此，咱們可使用Handler的sendEmptyMessageDelayed()方法來實現定時更新，並注意用戶也可能會對帶有輪播效果的ViewPager手動進行滑動操做，所以我認爲用戶這時候是但願查看指定頁面的，這時候應該取消輪播。下面是這個Handler的實現：

private static class ImageHandler extends Handler{

/**
* 請求更新顯示的View。
*/
protected static final int MSG_UPDATE_IMAGE = 1;
/**
* 請求暫停輪播。
*/
protected static final int MSG_KEEP_SILENT = 2;
/**
* 請求恢復輪播。
*/
protected static final int MSG_BREAK_SILENT = 3;
/**
* 記錄最新的頁號，當用戶手動滑動時須要記錄新頁號，不然會使輪播的頁面出錯。
* 例如當前若是在第一頁，原本準備播放的是第二頁，而這時候用戶滑動到了末頁，
* 則應該播放的是第一頁，若是繼續按照原來的第二頁播放，則邏輯上有問題。
*/
protected static final int MSG_PAGE_CHANGED = 4;

//輪播間隔時間
protected static final long MSG_DELAY = 3000;

//使用弱引用避免Handler泄露.這裏的泛型參數能夠不是Activity，也能夠是Fragment等
private WeakReference<MainActivity> weakReference;
private int currentItem = 0;

protected ImageHandler(WeakReference<MainActivity> wk){
weakReference = wk;
}

@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
Log.d(LOG_TAG, "receive message " + msg.what);
MainActivity activity = weakReference.get();
if (activity==null){
//Activity已經回收，無需再處理UI了
return ;
}
//檢查消息隊列並移除未發送的消息，這主要是避免在複雜環境下消息出現重複等問題。
if (activity.handler.hasMessages(MSG_UPDATE_IMAGE)){
activity.handler.removeMessages(MSG_UPDATE_IMAGE);
}
switch (msg.what) {
case MSG_UPDATE_IMAGE:
currentItem++;
activity.viewPager.setCurrentItem(currentItem);
//準備下次播放
activity.handler.sendEmptyMessageDelayed(MSG_UPDATE_IMAGE, MSG_DELAY);
break;
case MSG_KEEP_SILENT:
//只要不發送消息就暫停了
break;
case MSG_BREAK_SILENT:
activity.handler.sendEmptyMessageDelayed(MSG_UPDATE_IMAGE, MSG_DELAY);
break;
case MSG_PAGE_CHANGED:
//記錄當前的頁號，避免播放的時候頁面顯示不正確。
currentItem = msg.arg1;
break;
default:
break;
}
}
}

3、集成代碼：MainActivity
下面是MainActivity的代碼，主要是加載View和對ViewPager進行初始化設置。由於代碼量比較少，重要的部分已經加了註釋，就不贅述了。

public class MainActivity extends Activity {

private static final String LOG_TAG = "MainActivity";
private ImageHandler handler = new ImageHandler(new WeakReference<MainActivity>(this));
private ViewPager viewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化iewPager的內容
viewPager = (ViewPager) findViewById(R.id.main_viewpager);
LayoutInflater inflater = LayoutInflater.from(this);
ImageView view1 = (ImageView) inflater.inflate(R.layout.item, null);
ImageView view2 = (ImageView) inflater.inflate(R.layout.item, null);
ImageView view3 = (ImageView) inflater.inflate(R.layout.item, null);
view1.setImageResource(R.drawable.ics);
view2.setImageResource(R.drawable.jellybean);
view3.setImageResource(R.drawable.kitkat);
ArrayList<ImageView> views = new ArrayList<ImageView>();
views.add(view1);
views.add(view2);
views.add(view3);
viewPager.setAdapter(new ImageAdapter(views));
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

//配合Adapter的currentItem字段進行設置。
@Override
public void onPageSelected(int arg0) {
handler.sendMessage(Message.obtain(handler, ImageHandler.MSG_PAGE_CHANGED, arg0, 0));
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

//覆寫該方法實現輪播效果的暫停和恢復
@Override
public void onPageScrollStateChanged(int arg0) {
switch (arg0) {
case ViewPager.SCROLL_STATE_DRAGGING:
handler.sendEmptyMessage(ImageHandler.MSG_KEEP_SILENT);
break;
case ViewPager.SCROLL_STATE_IDLE:
handler.sendEmptyMessageDelayed(ImageHandler.MSG_UPDATE_IMAGE, ImageHandler.MSG_DELAY);
break;
default:
break;
}
}
});
viewPager.setCurrentItem(Integer.MAX_VALUE/2);//默認在中間，使用戶看不到邊界
//開始輪播效果
handler.sendEmptyMessageDelayed(ImageHandler.MSG_UPDATE_IMAGE, ImageHandler.MSG_DELAY);
}//end of onCreate
}//end of MainActivity

4、小圓點導航策略：（代碼放入Activity中）

圓點存放策略 : 全部的小圓點都放在一個ViewGroup中, 有兩種圓點, 一種是當前顯示的, 一種是沒激活的, 這裏咱們將一組圓點分別放入ImageView中, 而且將這些ImageView組裝起來放到ViewGroup中便可;
圓點導航初始化 : 最初默認顯示第一個頁面, 第一個圓點激活, 根據ViewPager個數初始化圓點的個數, 組裝圓點的時候, 第一個圓點狀態激活代碼以下 :

   private void initCirclePoint(){
       ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup);
imageViews = new ImageView[pageViews.size()];
//廣告欄的小圓點圖標
for (int i = 0; i < pageViews.size(); i++) {
   //建立一個ImageView, 並設置寬高. 將該對象放入到數組中
   imageView = new ImageView(this);
imageView.setLayoutParams(new LayoutParams(20,20));
imageViews[i] = imageView;

//初始值, 默認第0個選中
if (i == 0) {
imageViews[i]
.setBackgroundResource(R.drawable.point_focused);
} else {
imageViews[i]
.setBackgroundResource(R.drawable.point_unfocused);
}
//將小圓點放入到佈局中
group.addView(imageViews[i]);
}
   }

ViewPager頁面改變時圓點導航隨之改變 : 獲取ViewPager當前顯示頁面索引,從新組裝ViewGroup中的圓點排列順序, 這個方法在ViewPager頁面改變監聽器中實現:

// ViewPager 頁面改變監聽器
private final class AdPageChangeListener implements OnPageChangeListener {

    //頁面滾動狀態發生改變的時候觸發
@Override
public void onPageScrollStateChanged(int arg0) {
}

//頁面滾動的時候觸發
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

//頁面選中的時候觸發
@Override
public void onPageSelected(int arg0) {
   //獲取當前顯示的頁面是哪一個頁面
atomicInteger.getAndSet(arg0);
//從新設置原點佈局集合
for (int i = 0; i < imageViews.length; i++) {
imageViews[arg0]
.setBackgroundResource(R.drawable.point_focused);
if (arg0 != i) {
imageViews[i]
.setBackgroundResource(R.drawable.point_unfocused);
}
}
}
}

5、XML:

主佈局文件activity_main.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"
android:orientation="vertical" >

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<LinearLayout
android:id="@+id/ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24.0dp"
android:orientation="horizontal" >

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/dot" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/dot" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/dot" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/dot" />
</LinearLayout>

</RelativeLayout>

splash.xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/splash"
android:orientation="vertical" >
</LinearLayout>

view1.xml view2.xml view3.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" >

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide1" />
</RelativeLayout>

view4.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" >

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:adjustViewBounds="false"
android:background="@drawable/guide4"
android:focusable="true"
android:scaleType="centerCrop" />

<ImageView
android:id="@+id/iv_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="108dp"
android:background="@drawable/button"
android:focusable="true" />

</RelativeLayout>

drawable文件夾下新建dot.xml：
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/page_indicator_unfocused" android:state_enabled="true"/>
<item android:drawable="@drawable/page_indicator_focused" android:state_enabled="false"/>
</selector>
https://img-blog.csdn.net/20130522225518853

最後發一個ViewPager的使用文章：
Android ViewPager使用詳解 - 極致的專一無限的熱情 - 博客頻道 - CSDN.NET
http://blog.csdn.net/wangjinyu501/article/details/8169924
————————————————
版權聲明：本文爲CSDN博主「孵化恐龍蛋」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。
原文連接：https://blog.csdn.net/boyupeng/article/details/48157681

https://blog.csdn.net/boyupeng/article/details/48157681

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。