Android ViewPager 幾種開發案例的使用

一. 帶有小圓點的無限輪播廣告

// 準備顯示的圖檔集合
mList = new ArrayList<>();
    for (int i = 0; i < mImages.length; i++) {
    ImageView imageView = new ImageView(this);
    // 将圖檔設定到ImageView控件上
    imageView.setImageResource(mImages[i]);

    // 将ImageView控件添加到集合
    mList.add(imageView);

    // 制作底部小圓點
    ImageView pointImage = new ImageView(this);
    pointImage.setImageResource(R.drawable.shape_point_selector);

    // 設定小圓點的布局參數
    int PointSize = getResources().getDimensionPixelSize(R.dimen.point_size);
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(PointSize, PointSize);

    if (i > 0) {
        params.leftMargin = getResources().getDimensionPixelSize(R.dimen.point_margin);
        pointImage.setSelected(false);
    } else {
        pointImage.setSelected(true);
    }
    pointImage.setLayoutParams(params);
    // 添加到容器裡
    pointGroup.addView(pointImage);
}      

實作滾動時,小圓點同步更新

// 對ViewPager設定滑動監聽
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    int lastPosition;
    @Override
    public void onPageSelected(int position) {
        // 頁面被選中

        // 修改position
        position = position % mList.size();

        // 設定目前頁面選中
        pointGroup.getChildAt(position).setSelected(true);
        // 設定前一頁不選中
        pointGroup.getChildAt(lastPosition).setSelected(false);

        // 替換位置
        lastPosition = position;
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
})      

實作自動輪播

mHandler.postDelayed(new Runnable() {
    @Override
    public void run() {
        int currentPosition = viewPager.getCurrentItem();

        if(currentPosition == viewPager.getAdapter().getCount() - 1){
            // 最後一頁
            viewPager.setCurrentItem(0);
        }else{
            viewPager.setCurrentItem(currentPosition + 1);
        }

        // 一直給自己發消息
        mHandler.postDelayed(this,3000);
    }
},3000);      

然後後面就是擴充卡,getCount為最大實作無限輪播

private class MyAdapter extends PagerAdapter {
    @Override
    public int getCount() {
        // 傳回整數的最大值
        return Integer.MAX_VALUE;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // return super.instantiateItem(container, position);
        // 修改position
        position = position % mList.size();
        // 将圖檔控件添加到容器
        container.addView(mList.get(position));

        // 傳回
        return mList.get(position);
    }

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

二 廣告引導頁

邏輯分析：看效果圖可以知道，白點是浮動在上面的，也就是說，底下灰點是背景，上面白點随着頁面的偏移而偏移。那就可以這樣設計，灰點用LinearLayout包裹 ，白點用ImageView或View包裹并且浮在LinearLayout上面，在填充圖檔的時候初始化這兩種類型的點，然後監聽ViewPager頁面的滑動，動态的設定白點的位置。

白點的位置分析：監聽ViewPager的滑動，我們會得到一個頁面的偏移百分比，有了百分比，我們還差一個白點之間的距離，他倆相乘後累加就會得到白點随着頁面滑動的移動軌迹，那我們現在還缺白點之間的距離。白點之間的距離可以在布局完成之後用第二個點的左邊距減去第一個點的左邊距得到，是以需要的資料就基本分析出來了。

for (int i = 0; i < mIcons.length; i++) {
      // 設定底部小圓點
      ImageView point = new ImageView(this);
      point.setImageResource(R.drawable.shape_point_normal);

      // 設定白點的布局參數
      int pointSize = getResources().getDimensionPixelSize(R.dimen.point_size);
      RelativeLayout.LayoutParams params1 = new RelativeLayout.LayoutParams(pointSize, pointSize);
  	
      mWhitePoint.setLayoutParams(params1);

      // 設定灰色點的布局參數
      LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(pointSize, pointSize);
      if (i > 0) {
          params2.leftMargin = getResources().getDimensionPixelSize(R.dimen.point_margin);
      }

      point.setLayoutParams(params2);

  	// 灰點添加到容器
      mPointGroup.addView(point);
  }
           

// 擷取視圖樹對象，通過監聽白點布局的顯示，然後擷取兩個圓點之間的距離
mWhitePoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        // 此時layout布局已經顯示出來了，可以擷取小圓點之間的距離了
        mPointMargin = mPointGroup.getChildAt(1).getLeft() - mPointGroup.getChildAt(0).getLeft();

        // 将自己移除掉
        mWhitePoint.getViewTreeObserver().removeOnGlobalLayoutListener(this);
    }
});      

監聽ViewPager的滑動，在onPageScrolled方法中動态修改白點的左邊距，(注意positionOffset參數是偏移百分率)這樣白點就會随着頁面的滑動而移動

/**
 * 對View Pager添加監聽
 */
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        // 頁面滑動的時候，動态的擷取小圓點的左邊距
        int leftMargin = (int) (mPointMargin * (position + positionOffset));
        // Log.d("GuideActivity", "leftMargin:" + leftMargin);

        // 擷取布局參數，然後設定布局參數
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mWhitePoint.getLayoutParams();
        // 修改參數
        params.leftMargin = leftMargin;
        // 重新設定布局參數
        mWhitePoint.setLayoutParams(params);
    }

    @Override
    public void onPageSelected(int position) {

      
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});
      

檢視Demo