對(duì)于ViewPager，相信大家都不陌生，ViewPager在應(yīng)用中的使用頻率和ListView是有得一拼的。而ViewPager最常用于三個(gè)場(chǎng)景，分別是應(yīng)用的新手引導(dǎo)頁(yè)，廣告輪播控件，和Fragment結(jié)合做應(yīng)用內(nèi)的標(biāo)簽頁(yè)。

由于網(wǎng)上已經(jīng)有很多關(guān)于ViewPager的博文了，寫的也很好，這里就不對(duì)ViewPager進(jìn)行詳細(xì)的闡述了，只對(duì)ViewPager的用法及原理進(jìn)行簡(jiǎn)單的演示，僅供參考...

這里寫的是ViewPager作為新手引導(dǎo)頁(yè)的demo，數(shù)據(jù)都是使用本地的資源。

效果圖

viewpager.gif

代碼及解釋

先看下布局文件吧

<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="開始體驗(yàn)"
        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代碼

思路：

• 初始化數(shù)據(jù)
• 創(chuàng)建一個(gè)MyPagerAdapter繼承PagerAdapter，必須重寫四個(gè)父類的方法（具體什么方法看下邊代碼）
• 計(jì)算指示器兩個(gè)圓點(diǎn)之間的距離
• 給ViewPager設(shè)置Adapter
• 設(shè)置監(jiān)聽Page改變的監(jiān)聽器，當(dāng)Page改變時(shí)改變浮在指示器上面的圖片的位置，拉到最后一個(gè)Page時(shí)顯示跳轉(zhuǎn)按鈕

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); // 去掉標(biāo)題，在setContentView之前設(shè)置
        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));

        // 計(jì)算兩個(gè)圓點(diǎn)之間的距離
        // measure-->layout(確定位置)-->draw（onCreate方法執(zhí)行結(jié)束后才會(huì)執(zhí)行此流程）
        // 視圖樹：監(jiān)聽layout方法結(jié)束的事件，位置確定好之后再獲取圓點(diǎn)的間距
        ivIndicator.getViewTreeObserver().addOnGlobalLayoutListener(
                new OnGlobalLayoutListener() {

            // layout方法執(zhí)行后回調(diào)此方法
            @Override
            public void onGlobalLayout() {
                pointDis = llIndicator.getChildAt(1).getLeft()
                                - llIndicator.getChildAt(0).getLeft();
                // 移除，避免重復(fù)回調(diào)
                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：當(dāng)前位置；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) {
            }
        });

        // 點(diǎn)擊按鈕，進(jìn)入主Activity
        btnStart.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(GuideActivity.this,
                        MainActivity.class);
                startActivity(intent);
                
                finish(); // 銷毀當(dāng)前Activity
            }
        });
    }

    //初始化數(shù)據(jù)
    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);
            // 設(shè)置左邊距
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            if (i > 0) { // 從第二個(gè)開始
                params.leftMargin = 10;
            }
            llIndicator.addView(indicator, params);
        }
    }

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

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

        // item的個(gè)數(shù)
        @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));
        }

    }

}

希望對(duì)你們會(huì)有所幫助