android欢迎引导页面

现在主流的APP开启都会有一个欢迎引导页，所以收藏一个引导页的开发方法是必要的。
先上效果图：
完整工程代码下载地址：代码下载地址
分析：这里主要的难点是红点的移动原理，所以就分析红点的移动原理。
红点移动原理
利用距离左边的距离实现红点的移动
params.leftMargin = 动态值
屏幕滑动的距离：屏幕宽 = 屏幕滑动的百分比
两点间移动的距离：间距 = 屏幕滑动的距离：屏幕宽 = 屏幕滑动的百分比（已知）
两点间移动的距离 = 屏幕滑动百分比*间距
两点间滑动距离对应的坐标 = 原来的起始坐标位置+两点间移动的距离
params.leftMargin = 两点间滑动距离对应的坐标
间距 = 第1个点距离左边的距离 - 第0个点距离左边的距离

因为点要浮在视图上面，所以这里我们的父视图选择用相对布局RelativeLayout，在布局中先添加一个线性布局用于动态的添加点。
布局中有一个viewpager容器，保存滑动页面。首先，我们先把ViewPager先实现，他的主要作用是保存滑动引导页面，实现ViewPager分两个步骤：
一、准备数据，把要显示的图片id保存在一个数组中
//准备数据

 int ids[] = new int[]{R.mipmap.guide_1,R.mipmap.guide_2,R.mipmap.guide_3};

新建一个集合保存要显示的这几张图片,同时新建引导点数的点，把点添加到我们事先准备好的LinearLayout线性布局中。同时我们也设置了点的间距，需要注意的是，这里我们应用了像素转换工具类，把dp转换为px，这个的作用是为了做适配不同手机用的。

private ArrayList<ImageView> imageViews;
     for (int i=0;i<ids.length;i++){
            ImageView imageView = new ImageView(this);
            //设置背景
            imageView.setBackgroundResource(ids[i]);
            //添加到图片集合中
            imageViews.add(imageView);

            //创建点--有多少张图片要显示就有多少个点
            ImageView point = new ImageView(this);
            point.setBackgroundResource(R.drawable.point_normal);
            /**
             * 单位是像素
             * 把单位当成dp转成对应的像素
             */

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(widthdpi,heightdpi);
            if (i!=0){
                //不包括第0个，所有的点距离设置为10个像素
                params.leftMargin = widthdpi;
            }
            point.setLayoutParams(params);
            //把点添加到点集合中
            ll_point_group.addView(point);

        }

/**
 * 单位转换工具
 * dp与px的互相转换
 * Created by willkong on 2016/11/3.
 */

public class DensityUtil {
    /**
     * 根据手机的分辨率从 dip 的单位 转成为 px(像素)
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
}

创建灰色和红色两个圆点

<?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"></size>
    <solid android:color="@android:color/darker_gray"></solid>
</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"></size>
    <solid android:color="@android:color/holo_red_dark"></solid>
</shape>

二、给ViewPager设置适配器

 class MyPagerAdapter extends PagerAdapter{

        /**
         * 返回数据的总个数
         * @return
         */
        @Override
        public int getCount() {
            return imageViews.size();
        }

        /**
         * 作用，getView
         * @param container viewpager
         * @param position 要创建页面的位置
         * @return
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = imageViews.get(position);
            //添加到容器中
            container.addView(imageView);
//            return position;
            return imageView;
        }

        /**
         * 判断
         * @param view 当前创建的视图
         * @param object 上面instantiateItem返回的结果值
         * @return
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
//            return view == imageViews.get(Integer.parseInt((String) object));
            return view ==  object;
        }


        /**
         * 销毁页面
         * @param container viewpager
         * @param position 要销毁页面的位置
         * @param object 要销毁的视图
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
//            super.destroyItem(container, position, object);
            container.removeView((View) object);
        }

    }

上面的代码已经实现了视图的滑动和底下的灰色的圆点引导点，下面我们要实现一个根据页面移动的红点，所以在布局中添加一个红点覆盖在灰色圆点的上面。
activity_guide_pager.xml

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

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

    <Button
        android:id="@+id/btn_start_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="80dp"
        android:background="@drawable/btn_start_main_selector"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:text="开始体验"
        android:textColor="@drawable/btn_start_main_textcolor_selector"
        android:textSize="20sp"
        android:visibility="gone" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp">

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

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


</RelativeLayout>

到这里视图就完成了，下面就要实现红点根据视图滑动而移动。根据上面的红点移动原理来实现红点的移动。
一、根据View的生命周期，当视图执行到onLayout或者onDraw的时候，视图的高和宽，边距都有了
所以先得到红点的视图树的监听者

iv_red_point.getViewTreeObserver().addOnGlobalLayoutListener(new MyOnGlobalLayoutListener());

class MyOnGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener{

        @Override
        public void onGlobalLayout() {
            //执行不止一次，视图树包含了所有的视图，所以执行不止一次
            iv_red_point.getViewTreeObserver().removeGlobalOnLayoutListener(this);

            //间距 = 第一个点距离左边的距离 - 第0个点距离左边的距离
            leftmax = ll_point_group.getChildAt(1).getLeft() - ll_point_group.getChildAt(0).getLeft();
        }
    }

这里就得到了两点间的间距。
下面就是得到ViewPager屏幕滑动的百分比，所以就要监听ViewPager的滑动得到他滑动的百分比。

viewpager.addOnPageChangeListener(new MyOnPageChangeListener());

class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{

        /**
         * 当页面滚动了回调这个方法
         * @param position 当前滑动页面的位置
         * @param positionOffset 页面滑动的百分比
         * @param positionOffsetPixels 页面滑动的像素
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            //两点间移动的距离 =  屏幕百分比 * 间距
            int leftmargin = (int) (positionOffset * leftmax);
            //两点间滑动对应的坐标 = 原来的起始位置 + 两点间移动的距离
            leftmargin = (int) (position * leftmax + positionOffset * leftmax);
            //params.LeftMargin = 两点间滑动对应的坐标
            RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) iv_red_point.getLayoutParams();
            params.leftMargin = leftmargin;
            iv_red_point.setLayoutParams(params);
        }

        /**
         * 当页面被选中的时候，回调这个方法
         * @param position 被选中页面的对应位置
         */
        @Override
        public void onPageSelected(int position) {
            if (position == imageViews.size()-1){
                //最后一个页面
                btn_start_main.setVisibility(View.VISIBLE);
            }else {
                //其他页面
                btn_start_main.setVisibility(View.GONE);
            }
        }

        /**
         * 当ViewPager页面滑动状态发生变化的时候会回调这个方法
         * @param state
         */
        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

GuiderPager.Java

import android.annotation.TargetApi;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.navigationpage.utils.DensityUtil;

import java.util.ArrayList;

import static com.navigationpage.R.id.viewpager;

public class GuidePager extends AppCompatActivity {
    private Button btn_start_main;
    private ViewPager viewpager;
    private LinearLayout ll_point_group;
    private ImageView iv_red_point;
    private ArrayList<ImageView> imageViews;
    private int leftmax;//点的间距
    private int widthdpi;
    private int heightdpi;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide_pager);
        initView();
        initData();
    }

    private void initData() {
        //准备数据
        int ids[] = new int[]{R.mipmap.guide_1,R.mipmap.guide_2,R.mipmap.guide_3};
        //创建要显示的图片控件
        imageViews = new ArrayList<>();
        widthdpi = DensityUtil.dip2px(this,10);
        heightdpi = DensityUtil.dip2px(this,10);
        for (int i=0;i<ids.length;i++){
            ImageView imageView = new ImageView(this);
            //设置背景
            imageView.setBackgroundResource(ids[i]);
            //添加到图片集合中
            imageViews.add(imageView);

            //创建点--有多少张图片要显示就有多少个点
            ImageView point = new ImageView(this);
            point.setBackgroundResource(R.drawable.point_normal);
            /**
             * 单位是像素
             * 把单位当成dp转成对应的像素
             */

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(widthdpi,heightdpi);
            if (i!=0){
                //不包括第0个，所有的点距离设置为10个像素
                params.leftMargin = widthdpi;
            }
            point.setLayoutParams(params);
            //把点添加到点集合中
            ll_point_group.addView(point);

        }

        //设置ViewPager的适配器
        viewpager.setAdapter(new MyPagerAdapter());
        //根据View的生命周期，当视图执行到onLayout或者onDraw的时候，视图的高和宽，边距都有了,这里就得到两个点之间的间距了
        iv_red_point.getViewTreeObserver().addOnGlobalLayoutListener(new MyOnGlobalLayoutListener());
        //获取ViewPager屏幕滑动的百分比
        viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
    }

    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{

        /**
         * 当页面滚动了回调这个方法
         * @param position 当前滑动页面的位置
         * @param positionOffset 页面滑动的百分比
         * @param positionOffsetPixels 页面滑动的像素
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
        {
            //两点间移动的距离 =  屏幕百分比 * 间距
            int leftmargin = (int) (positionOffset * leftmax);
            //两点间滑动对应的坐标 = 原来的起始位置 + 两点间移动的距离
            leftmargin = (int) (position * leftmax + positionOffset * leftmax);
            //params.LeftMargin = 两点间滑动对应的坐标
            RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)
                    iv_red_point.getLayoutParams();
            params.leftMargin = leftmargin;
            iv_red_point.setLayoutParams(params);
        }

        /**
         * 当页面被选中的时候，回调这个方法
         * @param position 被选中页面的对应位置
         */
        @Override
        public void onPageSelected(int position) {
            if (position == imageViews.size()-1){
                //最后一个页面
                btn_start_main.setVisibility(View.VISIBLE);
            }else {
                //其他页面
                btn_start_main.setVisibility(View.GONE);
            }
        }

        /**
         * 当ViewPager页面滑动状态发生变化的时候会回调这个方法
         * @param state
         */
        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

    class MyOnGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener{

        @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
        @Override
        public void onGlobalLayout() {
            //执行不止一次
            iv_red_point.getViewTreeObserver().removeOnGlobalLayoutListener(this);

            //间距 = 第一个点距离左边的距离 - 第0个点距离左边的距离
            leftmax = ll_point_group.getChildAt(1).getLeft() - ll_point_group.getChildAt(0).getLeft();
        }
    }

    class  MyPagerAdapter extends PagerAdapter{

        public MyPagerAdapter() {
            super();
        }

        @Override
        public int getCount() {
            return imageViews.size();
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = imageViews.get(position);
            //添加到容器中
            container.addView(imageView);
            return imageView;
        }

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

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

    private void initView() {
        btn_start_main = (Button) findViewById(R.id.btn_start_main);
        viewpager = (ViewPager) findViewById(R.id.viewpager);
        ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);
        iv_red_point = (ImageView) findViewById(R.id.iv_red_point);
    }
}

到这里就把欢迎引导页面实现了。