Android程序:使用ViewPager实现app引导页效果

程序引导页依然成为现今App的必需品，通过引导页可以第一时间知道此款软件是如何应用的。并且能了解到最新的动态和更新。

页面跳转顺序:Welcome（入口）检测是否是第一次进入，若是则跳转到引导页Guide,若不是则跳转到主界面MainActivity

Welcome.class

public class Welcome extends Activity {

    private static final int SLEEP = 2000;
    private static final int GOHOME = 1000;
    private static final int GOGUIDE = 1001;
    private boolean isFirstIn = false;

    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
            case GOHOME:
                goHome();
                break;

            case GOGUIDE:
                goGuide();
                break;
            }
            finish();
        }

    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.welcome);
        init();
    }

    private void init() {
        //通过SharedPreferences获取是否是第一次进入
        SharedPreferences preferences = getSharedPreferences("config",
                MODE_PRIVATE);
        //获取isFirstIn，如果没有值，则是第一次进入，状态为true
        isFirstIn = preferences.getBoolean("isFirstIn", true);

        if (isFirstIn) {
            handler.sendEmptyMessageDelayed(GOGUIDE, SLEEP);
            Editor editor = preferences.edit();
            //将isFirstIn状态改为false，下次进入则不会跳转到引导页
            editor.putBoolean("isFirstIn", false);
            editor.commit();

        } else {
            handler.sendEmptyMessageDelayed(GOHOME, SLEEP);
        }
    }

    //跳转到Home页
    private void goHome() {
        startActivity(new Intent(Welcome.this, MainActivity.class));
    }
    //跳转到引导页
    private void goGuide() {
        startActivity(new Intent(Welcome.this, Guide.class));
    }
}

Guide.class

public class Guide extends Activity implements OnPageChangeListener {
    private ViewPager vp;
    private ViewPagerAdapter adapter;
    private List<View> views;
    private ImageView[] dots;
    private int[] ids = { R.id.iv1, R.id.iv2, R.id.iv3 };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.guide);

        initViews();
        initDots();

    }

    private void initViews() {

        LayoutInflater inflater = LayoutInflater.from(this);

        views = new ArrayList<View>();
        //将引导页面需要的三个ImageView装入ArrayList
        views.add(inflater.inflate(R.layout.one, null));
        views.add(inflater.inflate(R.layout.two, null));
        views.add(inflater.inflate(R.layout.three, null));

        adapter = new ViewPagerAdapter(views, this);

        vp = (ViewPager) findViewById(R.id.viewPager);

        vp.setAdapter(adapter);
        vp.setOnPageChangeListener(this);

        //获取第三个页面中的Button，并添加点击事件监听
        views.get(2).findViewById(R.id.start_btn).setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                //跳转到主界面
                startActivity(new Intent(Guide.this, MainActivity.class));
                finish();
            }
        });
    }

    private void initDots() {
        dots = new ImageView[views.size()];
        for (int i = 0; i < views.size(); i++) {
            dots[i] = (ImageView) findViewById(ids[i]);
        }
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {

    }

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

    }

    @Override
    public void onPageSelected(int arg0) {
        //当前页面显示时，对应的下面三个点的状态会改变
        for (int i = 0; i < ids.length; i++) {
            if (arg0 == i) {
                dots[i].setImageResource(R.drawable.login_point_selected);

            } else {
                dots[i].setImageResource(R.drawable.login_point);
            }
        }
    }

}

ViewPagerAdapter:

public class ViewPagerAdapter extends PagerAdapter {
    private List<View> views;
    private Context context;

    public ViewPagerAdapter(List<View> views,Context context) {
        this.views=views;
        this.context=context;
    }

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


    @Override
    public Object instantiateItem(View container, int position) {
        ((ViewPager) container).addView(views.get(position));
        return views.get(position);
    }

    @Override
    public int getCount() {

        return views.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {

        return (arg0==arg1);
    }

}

one,two,three.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="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/guide_3" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:layout_centerHorizontal="true" >

        <Button
            android:id="@+id/start_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="进入" />
    </LinearLayout>

</RelativeLayout>

guide.xml
下面三个ImageView是显示对应页面的点(dots)

<?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.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/iv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/login_point_selected" />

        <ImageView
            android:id="@+id/iv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/login_point" />

        <ImageView
            android:id="@+id/iv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/login_point" />
    </LinearLayout>

</RelativeLayout>