<?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/vp_pager"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

    <RelativeLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:layout_marginBottom="25dp" >

        <LinearLayout

            android:id="@+id/ll_container"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content" >

        </LinearLayout>

        <ImageView

            android:id="@+id/iv_red_point"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:src="@drawable/shape_circle_selected" />

    </RelativeLayout>

    <Button

        android:id="@+id/btn_start"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:layout_marginBottom="60dp"

        android:background="@drawable/btn_guide_selector"

        android:paddingLeft="5dp"

        android:paddingRight="5dp"

        android:text="开始体验"

        android:textColor="@color/txt_guide_selector"

        android:visibility="gone" >

    </Button>

</RelativeLayout>

import java.util.ArrayList;

import com.itheima.zhsh66.utils.PrefUtils;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.view.ViewTreeObserver.OnGlobalLayoutListener;

import android.view.Window;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.RelativeLayout;

/**

 * 新手引导

 *

 * @author Kevin

 * @date 2015-8-10

 */

public class GuideActivity extends Activity implements OnClickListener {

    private ViewPager mViewPager;

    private LinearLayout llContainer;

    private ImageView ivRedPoint;// 小红点

    private Button btnStart;

    private int[] mImageIds = new int[] { R.drawable.guide_1,

            R.drawable.guide_2, R.drawable.guide_3 };

    private ArrayList<ImageView> mImageViewList;

    private int mPointWidth;// 两个圆点的宽度

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        // 去掉标题, 必须在setContentView之前执行

        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.activity_guide);

        mViewPager = (ViewPager) findViewById(R.id.vp_pager);

        llContainer = (LinearLayout) findViewById(R.id.ll_container);

        ivRedPoint = (ImageView) findViewById(R.id.iv_red_point);

        btnStart = (Button) findViewById(R.id.btn_start);

        btnStart.setOnClickListener(this);

        // 初始化ImageView

        mImageViewList = new ArrayList<ImageView>();

        for (int i = 0; i < mImageIds.length; i++) {

            ImageView view = new ImageView(this);

            view.setBackgroundResource(mImageIds[i]);

            mImageViewList.add(view);

            // 初始化圆点

            ImageView pointView = new ImageView(this);

            pointView.setImageResource(R.drawable.shape_circle_default);

            // 初始化圆点布局参数

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(

                    LinearLayout.LayoutParams.WRAP_CONTENT,

                    LinearLayout.LayoutParams.WRAP_CONTENT);

            if (i > 0) {

                params.leftMargin = 8;// 从第二个点开始设置边距

            }

            pointView.setLayoutParams(params);

            llContainer.addView(pointView);

        }

        mViewPager.setAdapter(new MyAdapter());

        // 页面绘制结束之后, 计算两个圆点的间距

        // 视图树

        ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(

                new OnGlobalLayoutListener() {

                    // layout方法执行结束(位置确定)

                    @Override

                    public void onGlobalLayout() {

                        // 移除监听

                        ivRedPoint.getViewTreeObserver()

                                .removeGlobalOnLayoutListener(this);

                        // 获取两个圆点的间距

                        mPointWidth = llContainer.getChildAt(1).getLeft()

                                - llContainer.getChildAt(0).getLeft();

                        System.out.println("width:" + mPointWidth);

                    }

                });

        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override

            public void onPageSelected(int position) {

                if (position == mImageIds.length - 1) {// 最后页面显示开始体验

                    btnStart.setVisibility(View.VISIBLE);

                } else {

                    btnStart.setVisibility(View.GONE);

                }

            }

            // 页面滑动过程的回调

            @Override

            public void onPageScrolled(int position, float positionOffset,

                    int positionOffsetPixels) {

                System.out.println("当前位置:" + position + ";偏移百分比:"

                        + positionOffset);

                // 计算当前小红点的左边距

                int leftMargin = (int) (mPointWidth * positionOffset + position

                        * mPointWidth);

                // 修改小红点的左边距

                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) ivRedPoint

                        .getLayoutParams();

                params.leftMargin = leftMargin;

                ivRedPoint.setLayoutParams(params);

            }

            @Override

            public void onPageScrollStateChanged(int state) {

            }

        });

    }

    class MyAdapter extends PagerAdapter {

        @Override

        public int getCount() {

            return mImageIds.length;

        }

        @Override

        public boolean isViewFromObject(View view, Object object) {

            return view == object;

        }

        @Override

        public Object instantiateItem(ViewGroup container, int position) {

            // ImageView view = new ImageView(getApplicationContext());

            // view.setBackgroundResource(mImageIds[position]);

            ImageView view = mImageViewList.get(position);

            container.addView(view);

            return view;

        }

        @Override

        public void destroyItem(ViewGroup container, int position, Object object) {

            container.removeView((View) object);

        }

    }

    @Override

    public void onClick(View v) {

        switch (v.getId()) {

        case R.id.btn_start:

            // 开始体验

            // 记录新手引导已经被展示的状态,下次启动不再展示

            PrefUtils.putBoolean("is_guide_show", true, this);

            startActivity(new Intent(this, MainActivity.class));

            finish();

            break;

        default:

            break;

        }

    }

}

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="oval" >

    <size

        android:height="10dp"

        android:width="10dp" />

    <solid android:color="#5000" />

</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="oval" >

    <size

        android:height="10dp"

        android:width="10dp" />

    <solid android:color="#f00" />

</shape>