package com.xspacing.viewpager;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.RelativeLayout;
/**
 * 
 * @ClassName MainActivity.java
 * @Description TODO 引導頁
 * @author Smile
 * @version v1.0
 * @date 2016年9月26日 
 */
public class MainActivity extends Activity {

  protected static final String TAG = "MainActivity";
  ViewPager mViewPager;
  List<ImageView> list;
  private LinearLayout mLinearLayout;

  // 兩個小灰點的距離
  private int poitWidth;
  private ImageView mViewPress;
  private ImageView mViewNotPress;
  private Button btnStart;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initViews();
    initDatas();
  }

  private void initViews() {
    mViewPager = (ViewPager) findViewById(R.id.main_view_pager);
    mLinearLayout = (LinearLayout) findViewById(R.id.main_point);
    mViewPress = (ImageView) findViewById(R.id.main_red_point_press);
    btnStart = (Button) findViewById(R.id.main_btn);
  }

  private void initDatas() {
    list = new ArrayList<ImageView>();
    final int imageId[] = { R.drawable.a, R.drawable.b, R.drawable.c };
    for (int i = 0; i < imageId.length; i++) {
      ImageView imageView = new ImageView(this);
      imageView.setBackgroundResource(imageId[i]);
      list.add(imageView);
      mViewNotPress = new ImageView(this);
      mViewNotPress.setImageResource(R.drawable.shape_grey_point_not_press);
      LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
          LinearLayout.LayoutParams.WRAP_CONTENT);
      if (i != 0) {
        layoutParams.leftMargin = 20;
      }
      mLinearLayout.addView(mViewNotPress, layoutParams);

    }

    // 由于在執行onCreate()的時候,界面還沒有被繪制完成,所有拿不到poitWidth,
    // 要拿到視圖樹,監聽視圖的繪制完成,才能拿到poitWidth
    mViewPress.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

      @Override
      public void onGlobalLayout() {
        poitWidth = mLinearLayout.getChildAt(1).getLeft() - mLinearLayout.getChildAt(0).getLeft();
        Log.i(TAG, poitWidth + "");
      }
    });
    mViewPager.setAdapter(new ViewPgerAdapter(this, list));

    mViewPager.addOnPageChangeListener(new OnPageChangeListener() {

      // 當前選中的是第幾個界面
      @Override
      public void onPageSelected(int position) {
        if (position==imageId.length-1) {
          btnStart.setVisibility(View.VISIBLE);
        }
        else {
          btnStart.setVisibility(View.GONE);
        }
      }

      // 界面滑動的時候,會不斷地回調這個方法
      // 第二個參數是當前頁面滑過的百分比(0.0到1.0)
      @Override
      public void onPageScrolled(int position, float offset, int arg2) {
        Log.i(TAG, "arg1:" + offset);
        // 小紅點當前滑動的距離
        int width = (int) (poitWidth * offset + position * poitWidth);
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mViewPress.getLayoutParams();
        layoutParams.leftMargin = width;
        mViewPress.setLayoutParams(layoutParams);
      }

      @Override
      public void onPageScrollStateChanged(int arg0) {

      }
    });
  }

}

package com.xspacing.viewpager;

import java.util.List;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ViewPgerAdapter extends PagerAdapter {

  Context mContext;
  List<ImageView> list;

  public ViewPgerAdapter(Context context, List<ImageView> list) {
    this.mContext = context;
    this.list = list;
  }

  // 頁數
  @Override
  public int getCount() {
    return list.size();
  }

  // 復用頁卡
  @Override
  public boolean isViewFromObject(View view, Object obj) {
    return view == obj;
  }

  // 銷毀頁卡
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView(list.get(position));
  }

  // 生成頁卡
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    View view = list.get(position);
    container.addView(view);
    return view;
  }

}

<?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="#C3C3C3"/>

</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="#44FF0000"/>

</shape>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.xspacing.viewpager.MainActivity" >

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

  <RelativeLayout
    android:id="@+id/main_relative"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="50dp" >

    <LinearLayout
      android:id="@+id/main_point"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal" >
    </LinearLayout>

    <ImageView
      android:id="@+id/main_red_point_press"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/shape_red_point_press" />
  </RelativeLayout>

  <Button
    android:id="@+id/main_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="30dp"
    android:visibility="gone"
    android:layout_above="@id/main_relative"
    android:layout_centerHorizontal="true"
    android:text="開始體驗" />

</RelativeLayout>