先上图

guidedot.gif

1.activity代码

public class GuideActivity extends Activity {
    private LinearLayout mDotContainer;
    private ImageView mDotSelet;
    private View page01;
    private View page02;
    private View page03;
    private ViewPager mViewPager;
    private int dLeft;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        initPage();
        initView();
        mViewPager.setAdapter(new MyAdapter());
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                int off = (int) (dLeft*position + dLeft*positionOffset + 0.5f);
                FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) mDotSelet.getLayoutParams();
                params.leftMargin = off;
                mDotSelet.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initPage() {
        page01 = View.inflate(this, R.layout.page01,null);
        page02 = View.inflate(this, R.layout.page02,null);
        page03 = View.inflate(this, R.layout.page03,null);
    }

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.vp);
        mDotContainer = (LinearLayout) findViewById(R.id.dot_container);
        mDotSelet = (ImageView) findViewById(R.id.dot_select);
        final View dot01 = mDotContainer.getChildAt(0);
        final View dot02 = mDotContainer.getChildAt(1);
        mDotContainer.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                dLeft = dot02.getLeft() - dot01.getLeft();
                mDotContainer.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
        });
    }



    class MyAdapter extends PagerAdapter{
        @Override
        public int getCount() {
            return 3;
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = null;
            switch (position) {
                case 0:
                    view = page01;
                    break;
                case 1:
                    view = page02;
                    break;
                case 2:
                    view = page03;
                    break;
            }
            if(view.getParent()!=null){
                return view;
            }
            container.addView(view);
            return view;
        }

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

        }
    }
}

2.XML文件代码

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/activity_guide"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <android.support.v4.view.ViewPager
       android:id="@+id/vp"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
   <FrameLayout
       android:layout_gravity="bottom|center"
       android:layout_marginBottom="40dp"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">
       <LinearLayout
           android:id="@+id/dot_container"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"

           android:orientation="horizontal">

           <ImageView
               android:layout_width="10dp"
               android:layout_height="10dp"
               android:src="@drawable/dot_default" />

           <ImageView
               android:layout_width="10dp"
               android:layout_height="10dp"
               android:layout_marginLeft="10dp"
               android:src="@drawable/dot_default" />

           <ImageView
               android:layout_width="10dp"
               android:layout_height="10dp"
               android:layout_marginLeft="10dp"
               android:src="@drawable/dot_default" />
       </LinearLayout>
       <ImageView
           android:id="@+id/dot_select"
           android:layout_width="10dp"
           android:layout_height="10dp"
           android:src="@drawable/dot_select"/>
   </FrameLayout>
</FrameLayout>

4.小圆点的shape图形

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

    <solid android:color="#dab9b1"/>
</shape>

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

    <solid android:color="#da694f"/>
</shape>

5.每一页的layout

 每一页就是一个imageview,这个没什么好贴的.