ViewPager实现引导页，底部圆点跟随移动

实现引导页效果：

代码如下：

public class GuideActivity extends Activity {

	private ViewPager mViewPager;
	private int[] mGuideLists;
	private Button mButton;
	private LinearLayout mLinearLayout;// 小灰点
	private View point_red;// 小红点
	private int mPointWidth;// 小圆点之间的距离

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_guide);
		initView();
		initData();
	}

	private void initView() {
		mViewPager = (ViewPager) findViewById(R.id.vp_guide);
		mButton = (Button) findViewById(R.id.btn_start);
		mLinearLayout = (LinearLayout) findViewById(R.id.ll_point_group);
		point_red = findViewById(R.id.point_red);
	}

	private void initData() {
		mGuideLists = new int[] { R.drawable.guide_1, R.drawable.guide_2,
				R.drawable.guide_3 };
		initDot();
		mViewPager.setAdapter(new GuideAdapter());
		mViewPager.setOnPageChangeListener(new GudiePagerChangeListener());
	}

	/**
	 * 初始化点
	 */
	private void initDot() {
		for (int i = 0; i < mGuideLists.length; i++) {
			View view = new View(GuideActivity.this);
			view.setBackgroundResource(R.drawable.dot_gray);

			// dp和px的关系: dp = px/设备密度
			float density = getResources().getDisplayMetrics().density;
			int width=(int) (10*density);
			int height=(int) (10*density);
			//System.out.println("设备密度:" + density);
			LayoutParams params = new LayoutParams(width, height);
			if (i > 0) {
				params.leftMargin = width;
			}
			view.setLayoutParams(params);
			mLinearLayout.addView(view);
		}

		mLinearLayout.getViewTreeObserver().addOnGlobalLayoutListener(
				new OnGlobalLayoutListener() {

					@Override
					public void onGlobalLayout() {
						mLinearLayout.getViewTreeObserver()
								.removeGlobalOnLayoutListener(this);
						mPointWidth = mLinearLayout.getChildAt(1).getLeft()
								- mLinearLayout.getChildAt(0).getLeft();
						Log.e("tag", mPointWidth + "");
					}
				});
	}

	private class GuideAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			return mGuideLists.length;
		}

		@Override
		public boolean isViewFromObject(View view, Object object) {
			return view == object;
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			ImageView imageView = new ImageView(GuideActivity.this);
			imageView.setScaleType(ScaleType.FIT_XY);
			imageView.setImageResource(mGuideLists[position]);
			container.addView(imageView);
			return imageView;
		}

		/* 销毁pager */
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View) object);
		}

	}

	private class GudiePagerChangeListener implements OnPageChangeListener {

		@Override
		public void onPageScrollStateChanged(int arg0) {

		}

		@Override
		public void onPageScrolled(int position, float positionOffset,
				int positionOffsetPixels) {
			float leftWidth = mPointWidth * positionOffset + position * mPointWidth;
			RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) point_red
					.getLayoutParams();// 获取小红点的布局参数
			layoutParams.leftMargin = (int) leftWidth;// 设置小红点的左边距
			point_red.setLayoutParams(layoutParams);
		}

		@Override
		public void onPageSelected(int position) {
			if (position == 2) {
				mButton.setVisibility(View.VISIBLE);
				mButton.setOnClickListener(new OnClickListener() {

					@Override
					public void onClick(View v) {
						Intent intent = new Intent(GuideActivity.this,
								MainActivity.class);
						startActivity(intent);
						finish();
					}
				});
			} else {
				mButton.setVisibility(View.INVISIBLE);
			}
		}

	}

}

activity文件代码：

<?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:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_guide"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

    <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="50dp"
        android:background="@drawable/btn_bg_selector"
        android:text="@string/start"
        android:textColor="@drawable/btn_text_selector"
        android:textSize="18sp"
        android:visibility="invisible" />

    <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_point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>

        <View
            android:id="@+id/point_red"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/dot_red" />
    </RelativeLayout>

</RelativeLayout>

shpae文件：(以下是小灰点的，小红点只需将颜色改下)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@android:color/darker_gray"/>

</shape>