引导页

在布局文件中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mei.cainiaoxiangmu.ui.activity.YinActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_guide"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <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="#666"
        android:padding="5dp"
        android:text="进入主页面"
        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_dot_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <View
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:background="#ff1e00"/>

            <View
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:layout_marginLeft="10dp"
                android:background="#ff0000"/>

            <View
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:layout_marginLeft="10dp"
                android:background="#ff0000"/>
        </LinearLayout>

        <View
            android:id="@+id/view_red_dot"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="#21cb18"/>
    </RelativeLayout>


</RelativeLayout>

在activity中

private static int[] mImageIds = new int[]{
            R.mipmap.hai, R.mipmap.lang,R.mipmap.xi,};
    /**
     * 功能引导页
     */
    private ViewPager mVpGuide;
    /**
     * 功能引导页展示的 ImageView 集合
     */
    private List<ImageView> mImageList;
    private Button mBtnStart;
    /**
     * 小灰点的父控件
     */
    private LinearLayout mDotGroup;
    /**
     * 小红点
     */
    private View mRedDot;
    /**
     * 相邻小灰点之间的距离
     */
    private int mDotDistance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_yin);
        initView();
    }
    private void initView() {
        mVpGuide = (ViewPager) findViewById(R.id.vp_guide);
        mBtnStart = (Button) findViewById(R.id.btn_start);
        mDotGroup = (LinearLayout) findViewById(R.id.ll_dot_group);
        mRedDot = findViewById(R.id.view_red_dot);
        mImageList = new ArrayList<>();
        // 将要展示的 3 张图片存入 ImageView 集合中
        for (int i = 0; i < mImageIds.length; i++) {
            ImageView image = new ImageView(this);
            // 将图片设置给对应的 ImageView
            image.setBackgroundResource(mImageIds[i]);
            mImageList.add(image);
        }
        mDotGroup.getViewTreeObserver().addOnGlobalLayoutListener(
                new ViewTreeObserver.OnGlobalLayoutListener() {
                    @Override
                    public void onGlobalLayout() {
                        // OnGlobalLayoutListener可能会被多次触发，
                        // 因此在得到了高度之后，要将 OnGlobalLayoutListener 注销掉
                        mDotGroup.getViewTreeObserver()
                                .removeGlobalOnLayoutListener(this);
                        // 计算小灰点之间的距离
                        mDotDistance = mDotGroup.getChildAt(1).getLeft()
                                - mDotGroup.getChildAt(0).getLeft();

                    }
                });
        mVpGuide.setAdapter(new GuideAdapter());
        mVpGuide.setOnPageChangeListener(new GuidePageChangeListener());
        mBtnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 按钮一旦被点击，更新 SharedPreferences
//                PrefUtils.setBoolean(MainActivity.this, PrefUtils.GUIDE_SHOWED, true);
                // 跳转到主页面
                startActivity(new Intent(YinActivity.this, MainActivity.class));
                finish();
            }
        });
    }
    /**
     * 适配器
     */
    class GuideAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return mImageList.size();
        }
        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mImageList.get(position));
            return mImageList.get(position);
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mImageList.get(position));
        }
    }
    /**
     * 滑动监听
     */
    class GuidePageChangeListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
        // 页面滑动时回调此方法
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            // 页面滑动过程中，小红点移动的距离
            int distance = (int) (mDotDistance * (positionOffset + position));

            // 获取小红点的布局参数
            RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mRedDot
                    .getLayoutParams();
            // 修改小红点的左边缘和父控件(RelativeLayout)左边缘的距离
            params.leftMargin = distance;
            // 修改小红点的布局参数
            mRedDot.setLayoutParams(params);
        }
        // 某个页面被选中时回调此方法
        @Override
        public void onPageSelected(int position) {
            // 如果是最后一个页面，按钮可见，否则不可见
            if (position == mImageIds.length - 1) {
                mBtnStart.setVisibility(View.VISIBLE);
            } else {
                mBtnStart.setVisibility(View.INVISIBLE);
            }
        }
    }
}