当我们更新应用，或者第一次进入应用时都会有一个向导界面，介绍这个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滑动事件的处理，希望本篇博文对你的学习和生活有所帮助，如果有写的不对的地方
希望你能在下方留言评论，互相交流，互相学习。