使用ViewPager实现android软件使用向导功能实现步骤

首先需要一个布局文件，是flamelayout组成的，里面包含了一个viewpager和一个relativelayout，relativelayout里面是一个linearlayout，linearlayout里面是准备放imageview，动态添加。

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<framelayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.view.viewpager
        android:id="@+id/guidepages"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

    <relativelayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom">
        <linearlayout
            android:id="@+id/viewgroup"
            android:layout_alignparentbottom="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center"
            android:layout_marginbottom="30dip">

        </linearlayout>
    </relativelayout>
</framelayout>

另外我们需要4个布局文件，就是向导要显示的图片，每个布局文件是一页，每个布局文件里面都是一个imageview。如下所示：

布局文件一：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <imageview
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/feature_guide_0"/>"

</linearlayout>

布局文件二：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <imageview
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/feature_guide_1"/>

</linearlayout>

布局文件三：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <imageview
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/feature_guide_2"/>"

</linearlayout>

布局文件四：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <imageview
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/feature_guide_3"/>"

</linearlayout>

然后在代码里面加载这4个布局文件和主布局文件：

activity代码：

package com.alex.helloworld;

import java.util.arraylist;

import android.app.activity;
import android.os.bundle;
import android.os.parcelable;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.support.v4.view.viewpager.onpagechangelistener;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup.layoutparams;
import android.view.window;
import android.widget.framelayout;
import android.widget.imageview;
import android.widget.linearlayout;

public class helloword2 extends activity implements onpagechangelistener {

    private arraylist<view> mpageviews;
    private layoutinflater minflater;
    private linearlayout mgroups;
    private framelayout mmain;
    private viewpager mviewpager;
    private imageview[] mimageviews;

    @override
    protected void oncreate(bundle savedinstancestate) {
        super.oncreate(savedinstancestate);
        requestwindowfeature(window.feature_no_title);
        minflater = layoutinflater.from(this);
        mpageviews = new arraylist<view>();
        mpageviews.add(minflater.inflate(r.layout.item_0, null));
        mpageviews.add(minflater.inflate(r.layout.item_1, null));
        mpageviews.add(minflater.inflate(r.layout.item_2, null));
        mpageviews.add(minflater.inflate(r.layout.item_3, null));

        mmain = (framelayout) minflater.inflate(r.layout.hello2, null);
        mgroups = (linearlayout) mmain.findviewbyid(r.id.viewgroup);
        mviewpager = (viewpager) mmain.findviewbyid(r.id.guidepages);
        mimageviews = new imageview[mpageviews.size()];

        for(int i=0; i<mpageviews.size(); i++) {
            imageview iv = new imageview(this);
            iv.setlayoutparams(new layoutparams(20, 20));
            mimageviews[i] = iv;
            if(i == 0) {
                mimageviews[i].setbackgroundresource(r.drawable.page_indicator_focused);
            } else {
                mimageviews[i].setbackgroundresource(r.drawable.page_indicator);
            }
            mgroups.addview(mimageviews[i]);
        }
        mviewpager.setadapter(mpageadapter);
        mviewpager.setonpagechangelistener(this);
        setcontentview(mmain);
    }

    private pageradapter mpageadapter = new pageradapter() {

        @override
        public void startupdate(view arg0) {

        }

        @override
        public parcelable savestate() {
            return null;
        }

        @override
        public void restorestate(parcelable arg0, classloader arg1) {

        }

        @override
        public boolean isviewfromobject(view arg0, object arg1) {
            return arg0 == arg1;
        }

        @override
        public object instantiateitem(view arg0, int arg1) {
            ((viewpager)arg0).addview(mpageviews.get(arg1));
            return mpageviews.get(arg1);
        }

        @override
        public int getcount() {
            return mpageviews.size();
        }

        @override
        public void finishupdate(view arg0) {

        }

        @override
        public void destroyitem(view arg0, int arg1, object arg2) {
            ((viewpager)arg0).removeview(mpageviews.get(arg1));
        }
    };

    @override
    public void onpagescrolled(int position, float positionoffset,
            int positionoffsetpixels) {

    }

    @override
    public void onpageselected(int position) {
        for(int i=0; i<mpageviews.size(); i++) {
            mimageviews[position].setbackgroundresource(r.drawable.page_indicator_focused);
            if(position != i) {
                mimageviews[i].setbackgroundresource(r.drawable.page_indicator);
            }
        }
    }

    @override
    public void onpagescrollstatechanged(int state) {

    }
}

首先从layoutinflater里面加载4个要显示的布局和主布局文件。

然后把布局文件作为view放到一个arraylist里面。

然后从主布局里面找到viewpager和linearlayout，viewpager用来装载4个布局文件，linearlayout用来装载4个提示图标。

然后新建4个imageview，并设置对应的背景，然后作为view添加到linearlayout里面去。

然后给viewpager设置adapter，设置onpagechangelistener。

adapter里面要设置getcount，就是页面的个数，我们这里是4个，就设置4；

同时在instantiateitem里面讲对应的页面add进去，并返回对应的页面。

在destroyitem的时候讲页面remove掉。

在选择页面的方法里面onpageselected里面设置选中图标的背景。