Android使用ViewPager實現無限滑動效果

前言

其實仔細想一下原理還是挺簡單的。無非是當我們滑動到最後一頁，再向後滑動時定位到第一頁;當我們滑動到第一頁，再向前滑動時定位到最後一頁。

但是，相信很多朋友都遇到過這個問題：視圖的過度效果不自然。

小編也是通過百度和谷歌查找了很多解決方案，實驗了很多方法，總結了一個相對不錯的方法，接下來給各位分享下滑動效果、實現細節以及一些踩過的坑。

1.無限滑動效果（左右無限滑動）

事先准備好2張滑動圖片（有想試驗的小伙伴，自備圖片啊，小編就不提供了...）

運行效果圖（左右無限循環）：

為了顯示更加直觀，小編僅用了2張圖片。

2.代碼實現

（1） Activity的Xml布局文件(非常簡單的布局)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <android.support.v4.view.ViewPager
  android:id="@+id/view_pager"
  android:layout_width="match_parent"
  android:layout_height="200dp"/>
</RelativeLayout>

（2）Activity

public class MainActivity extends AppCompatActivity {

 private ViewPager mViewPager;
 private ViewPagerAdapter mAdapter;
 private int[] images; // 圖片資源數組

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  initView(); // 初始化視圖
  initData(); // 初始化數據
 }

 /**
  * 初始化視圖
  */
 private void initView() {
  mViewPager = (ViewPager) findViewById(R.id.view_pager);
 }

 /**
  * 初始化數據
  */
 private void initData() {
  images = new int[]{R.mipmap.image1, R.mipmap.image2};
  mAdapter = new ViewPagerAdapter(this, images);
  mViewPager.setAdapter(mAdapter);

  // 將ViewPager定位到中間頁（Short.MAX_VALUE/2附近的圖片資源數組第1個元素對應的頁面）
  // 目的：1.圖片個數 >1 才輪播 2.定位到中間頁，向左向右都可滑
  if(images.length > 1) {
   mViewPager.setCurrentItem(((Short.MAX_VALUE / 2) / images.length) * images.length, false);
  }
 }
}

（3）ViewPagerAdapter

/**
 * @ClassName: ViewPagerAdapter
 * @Description: ViewPager適配器
 * @Author Wangnan
 * @Date 2016/9/1
 */
public class ViewPagerAdapter extends PagerAdapter{

 private Context mContext;
 private int[] mImages; // 圖片資源ID數組
 private List<ImageView> mImageViews; // ImageView集合

 public ViewPagerAdapter(Context context, int[] images){
  mContext = context;
  mImages = images;
  mImageViews = new ArrayList<>();
  initImageViews(mImages);
 }

 /**
  * 初始化ImageViews集合
  * @param imageIds
  */
 private void initImageViews(int[] imageIds) {

  // 根據圖片資源數組填充ImageViews集合
  for(int i = 0 ; i < imageIds.length ; i++){
   ImageView mImageView = new ImageView(mContext);
   mImageView.setImageResource(imageIds[i]);
   mImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
   mImageViews.add(mImageView);
  }

  // ImageViews集合中的圖片個數在[2,3]時會存在問題，遞歸再次填充一遍
  if(mImageViews.size() > 1 && mImageViews.size() < 4){
   initImageViews(imageIds);
  }
 }

 @Override
 public int getCount() {
  return mImageViews.size() <=1 ? mImageViews.size() : Short.MAX_VALUE;
 }

 @Override
 public boolean isViewFromObject(View view, Object object) {
  return view == object;
 }

 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  ImageView mImageView = mImageViews.get(position % mImageViews.size());
  container.addView(mImageView);
  return mImageView;
 }

 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  container.removeView((View)object);
 }
}

具體需要解釋的地方，代碼中都做了相應的注釋，就不再多做解釋了，但後面小編還會解釋遇到的兩個坑點。

3.細節踩坑

相信在看小編的實現方式之前，有人在網上也找到了很多相似的實現。小編接下來要講的就是 —— 對“這些相似的實現”踩一下坑。

1. 出現異常：java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.

原因：圖片資源少於4個，對應生成的ImageView也少於4個。

眾所周知，ViewPager一般會維護2~3個頁，如果只有3個ImageView,很可能出現這種情況，在生成完3個Page頁後並准備生成第4個頁面時，本應該移除的最前面的頁面還未被移除，系統就會報異常並且給你這樣一個提示：You must call removeView() on the child's parent first（意思是讓你先將最前面頁的子View從最前面頁移除掉，再將該子View添加到第4頁中）。

解決辦法：在只有1張圖片時，不能滑動，暫不處理；如果有2~3張圖片時，遞歸增加至大於等於4個ImageView為止(下方為小編解決該問題的代碼)。

 /**
  * 初始化ImageViews集合
  * @param imageIds
  */
 private void initImageViews(int[] imageIds) {

  ......

  // ImageViews集合中的圖片個數在[2,3]時會存在問題，遞歸再次填充一遍
  if(mImageViews.size() > 1 && mImageViews.size() < 4){
   initImageViews(imageIds);
  }
 }

2. 滑動效果出現混亂（後面會附上混亂的效果圖）

原因：ViewPager源碼本身存在問題 - 數據范圍越界問題。

小編的獲取ViewPager頁面數量的方法是這樣寫的：

 @Override
 public int getCount() {
  return mImageViews.size() <=1 ? mImageViews.size() : Short.MAX_VALUE;
 }

小於1時，頁面沒有滑動，不需要擴充頁面數量；

大於1時，取Short取值范圍的最大值32767（我們會有3W多頁面，但不會同時存在，因為ViewPager最多維持3個頁面）

小編這裡用的是Short，但一開始從網上找的相似實現全是使用的Integer（Integer.MAX_VALUE = 2147483647, 也就是我們的ViewPager將會有大概21億個頁面），如果使用Integer，比較細心的朋友會發現滑動經常出現混亂。

頁面反向回彈Bug

我們松手時，頁面出現反向回彈（1~2頁)，這和我們期望的滑動效果不一致。

這是其中一種Bug，還有一些不太好說明的滑動Bug，小編就用“滑動混亂”這個名詞進行解釋了...

解決辦法：縮小頁面數量（小編使用的Short代替Integer減少了頁面）。

具體的無Bug的臨界值，有興趣的小伙伴可以去實驗,小編的測試結果如下：

800萬以內：基本無滑動Bug;

1000萬左右：開始出現當前頁面定位不准確的Bug，但還未出現反向回彈Bug。

總結

以上就是關於Android使用ViewPager實現無限滑動效果的全部內容，希望這篇文章對大家開發的時候能有所幫助，如果有疑問可以留言交流。