首先需要一个布局文件，是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里面设置选中图标的背景。