對於ViewPager，相信大家都不陌生，ViewPager在應用中的使用頻率和ListView是有得一拼的。而ViewPager最常用於三個場景，分別是應用的新手引導頁，廣告輪播控制元件，和Fragment結合做應用內的標籤頁。

由於網上已經有很多關於ViewPager的博文了，寫的也很好，這裡就不對ViewPager進行詳細的闡述了，只對ViewPager的用法及原理進行簡單的演示，僅供參考…

這裡寫的是ViewPager作為新手引導頁的demo，資料都是使用本地的資源。

效果圖

程式碼及解釋

先看下佈局檔案吧

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

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_guide"
 

        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal
 
="true"
        android:layout_marginBottom="50dp"
        android:background="@drawable/btn_guide_selected"
        android:padding="5dp"
        android:text="開始體驗"
        android:textColor="@color/text_guide_selected"
        android:textSize="14sp" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp">

        <!-- 指示器佈局 -->
        <LinearLayout
            android:id="@+id/ll_indicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>

        <!-- 浮在指示器上的圖片 -->
        <ImageView
            android:id="@+id/iv_indicator_selected"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/shape_point_selected" />
    </RelativeLayout>

</RelativeLayout>

Java程式碼

思路：

• 初始化資料
• 建立一個MyPagerAdapter繼承PagerAdapter，必須重寫四個父類的方法（具體什麼方法看下邊程式碼）
• 計算指示器兩個圓點之間的距離
• 給ViewPager設定Adapter
• 設定監聽Page改變的監聽器，當Page改變時改變浮在指示器上面的圖片的位置，拉到最後一個Page時顯示跳轉按鈕

public class GuideActivity extends Activity {

    private ViewPager vpGuide;
    private Button btnStart;
    private LinearLayout llIndicator;
    private ImageView ivIndicator;

    private List<ImageView> imgs;
    private int[] imgIds = new int[] { R.drawable.guide_1, R.drawable.guide_2,
            R.drawable.guide_3 };

    private int pointDis; // 指示器的間距

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE); // 去掉標題，在setContentView之前設定
        setContentView(R.layout.activity_guide);

        vpGuide = (ViewPager) this.findViewById(R.id.vp_guide);
        btnStart = (Button) this.findViewById(R.id.btn_start);
        btnStart.setVisibility(View.INVISIBLE);
        llIndicator = (LinearLayout) this.findViewById(R.id.ll_indicator);
        ivIndicator = (ImageView) this.findViewById(R.id.iv_indicator_selected);

        initData();
        vpGuide.setAdapter(new MyPagerAdapter(imgs));

        // 計算兩個圓點之間的距離
        // measure-->layout(確定位置)-->draw（onCreate方法執行結束後才會執行此流程）
        // 檢視樹：監聽layout方法結束的事件，位置確定好之後再獲取圓點的間距
        ivIndicator.getViewTreeObserver().addOnGlobalLayoutListener(
                new OnGlobalLayoutListener() {

            // layout方法執行後回撥此方法
            @Override
            public void onGlobalLayout() {
                pointDis = llIndicator.getChildAt(1).getLeft()
                                - llIndicator.getChildAt(0).getLeft();
                // 移除，避免重複回撥
                ivIndicator.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            }
        });

        vpGuide.setOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                if (position == imgs.size() - 1) {
                    btnStart.setVisibility(View.VISIBLE);
                    AlphaAnimation anim = new AlphaAnimation(0, 1);
                    anim.setDuration(1500);
                    btnStart.setAnimation(anim);
                }else{
                    btnStart.setVisibility(View.INVISIBLE);
                }
            }

            // position：當前位置；positionOffset：偏移量百分比；positionOffsetPixels：偏移量畫素
            @Override
            public void onPageScrolled(int position, float positionOffset,
                    int positionOffsetPixels) {
                int des = (int) (pointDis * positionOffset) + position
                        * pointDis;
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) ivIndicator
                        .getLayoutParams();
                params.leftMargin = des;
                ivIndicator.setLayoutParams(params);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

        // 點選按鈕，進入主Activity
        btnStart.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(GuideActivity.this,
                        MainActivity.class);
                startActivity(intent);

                finish(); // 銷燬當前Activity
            }
        });
    }

    //初始化資料
    private void initData() {
        imgs = new ArrayList<ImageView>();
        for (int i = 0; i < imgIds.length; i++) {
            ImageView img = new ImageView(this);
            img.setBackgroundResource(imgIds[i]);
            imgs.add(img);

            // 初始化指示器
            ImageView indicator = new ImageView(this);
            indicator.setImageResource(R.drawable.shape_point_normal);
            // 設定左邊距
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            if (i > 0) { // 從第二個開始
                params.leftMargin = 10;
            }
            llIndicator.addView(indicator, params);
        }
    }

    class MyPagerAdapter extends PagerAdapter {
        private List<ImageView> imgs;

        public MyPagerAdapter(List<ImageView> imgs) {
            this.imgs = imgs;
        }

        // item的個數
        @Override
        public int getCount() {
            return imgs.size();
        }

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

        // 初始化item佈局
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView view = imgs.get(position);
            container.addView(view);
            return view;
        }

        // 銷燬item
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(imgs.get(position));
        }

    }

}

希望對你們會有所幫助