Android开发实战之ViewPager实现向导界面

当我们更新应用，或者第一次进入应用时都会有一个向导界面，介绍这个app的内容和使用方式。

如果你细心你会发现其实这就是个viewpager，本篇博文将介绍应用的向导界面是如何制作的。希

望本篇博文对你的学习和生活有所帮助。

好了不多说，放上效果图：

需要注意的是，下方的圆点跟随着viewpager滑动，当滑动到最后一张的时候，开始体验按钮出现了。

viewpager的基础我就不多说了，如果你不是很明白，可以查看我的上一篇博客：http://www.cnblogs.com/lovelyYakir/p/5797153.html。

我就重点介绍一下下方圆点更随着viewpager滑动是如何实现的。

**第一次进入**

关于是否是第一次进入，实现方式比较简单，用过使用SharedPreferences保存使用状态，将他封装到工具类中便于使用：

public class SplashUtils {
    public static void setBoolean(Context context,String key, Boolean value) {
        SharedPreferences sharedPreferences=context.getSharedPreferences(Constants.CONFIGFILE,Context.MODE_PRIVATE);
        SharedPreferences.Editor editor=sharedPreferences.edit();
        editor.putBoolean(key,value);
        editor.commit();
    }
    public static Boolean getBoolean(Context context,String key,Boolean dfValue) {
        SharedPreferences sharedPreferences=context.getSharedPreferences(Constants.CONFIGFILE,Context.MODE_PRIVATE);
        return sharedPreferences.getBoolean(key,dfValue);
    }
}

需要注意的是，getBoolean方法最后一个参数无论是true,是false，都不会影响到我们的取值，所以可以写，也可以不写。

**小圆点随ViewPager滑动**

实现思路：当viewpager滑动的时候，红点随着滑动量而移动。需要监听viewpager的滑动。

关于红点，如果你有UI,可以叫UI帮你画，如果没有UI,那就只能自己画了。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!--半径-->
    <corners android:radius="10dip"></corners>
    <!--颜色-->
    <solid android:color="#ff0000"></solid>

</shape>

下面是XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/vp_gide">

    </android.support.v4.view.ViewPager>
<RelativeLayout
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="30dip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/ll_guide_point">
    </LinearLayout>
    <View
        android:layout_width="20px"
        android:layout_height="20px"
        android:id="@+id/guide_point"
        android:background="@drawable/red_point"/>
</RelativeLayout>
    <Button
        android:id="@+id/btn_guide"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开始体验"
        android:textColor="@color/btn_text_color"
        android:background="@drawable/btn_select"
        android:visibility="gone"/>
</RelativeLayout>

好了布局算是完成了，开始处理逻辑模块，首先我们需要知道这个红色圆点的宽和高，但是我们知道，绘制完成一般是在oncreated（）之后完成的。那么，我们就需要对这个

view进行监听，当它绘制完成之后，拿到具体信息。

      //监听界面绘制完成
        viewPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

            @Override
            public void onGlobalLayout() {
                //取消注册界面而产生的回调接口
                viewPoint.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                //计算点于点之间的距离
                pointDistance = linearLayoutGuide.getChildAt(1).getLeft()-linearLayoutGuide.getChildAt(0).getLeft();
                Log.e("this", String.valueOf(pointDistance));
            }
        });

灰色的点在LinearLayout中绘制：

    //获取点
            View pointView=new View(getApplicationContext());
            pointView.setBackgroundResource(R.drawable.gray_point);
            //设置灰色点的显示大小
            float dip=20;
            float distance=20;
            LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(
                    Density.dipTopx(getApplicationContext(),dip),
                    Density.dipTopx(getApplicationContext(),dip));//单位是px,不是dp,为了做适配需要装换
            //设置点与点的距离,第一个点除外
            if (i!=0) {
                params.leftMargin = Density.dipTopx(getApplicationContext(),distance);//px
            }
            pointView.setLayoutParams(params);

            linearLayoutGuide.addView(pointView);

滑动事件监听滑动距离，点更随滑动。

 viewPagerGuide.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            /**
             *页面滑动调用，拿到滑动距离设置视图的滑动状态
             * @param position 当前页面位置
             * @param positionOffset 移动的比例值
             * @param positionOffsetPixels 便宜的像素
             */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //计算红点的左边距
                float leftMargrain=pointDistance*(position+positionOffset);
                //设置红点的左边距
                RelativeLayout.LayoutParams params= (RelativeLayout.LayoutParams) viewPoint.getLayoutParams();
                //对folat类型进行四舍五入，
                params.leftMargin=Math.round(leftMargrain);
                //设置位置
                viewPoint.setLayoutParams(params);

            }

            @Override
            public void onPageSelected(int position) {
                 if (position==imagList.size()-1) {
                     buttonGuide.setVisibility(View.VISIBLE);
                 }
                else {
                     buttonGuide.setVisibility(View.GONE);
                 }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

好了，一个向导界面就完成了。代码我注释的都很详细，这一篇博文还是主要对viewpager滑动事件的处理，希望本篇博文对你的学习和生活有所帮助，如果有写的不对的地方

希望你能在下方留言评论，互相交流，互相学习。