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滑动事件的处理，希望本篇博文对你的学习和生活有所帮助，如果有写的不对的地方
希望你能在下方留言评论，互相交流，互相学习。
