指令汇B新闻客户端开发（一） 新手引导页开发

首先做开发的时候应该有一个闪屏页面和新手引导页， 我相信闪屏页面大家应该都会了，那么先看到新手引导页了。

我们可以看到这其实是一个ViewPager，我们也可以看到这是3个引导页，那么首先来看一下布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <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="@drawable/btn_guide_selector"
        android:padding="5dp"
        android:text="开始体验"
        android:visibility="invisible"
        android:textColor="@drawable/btn_guide_text_selector" />

    <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_point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>

        <View
            android:id="@+id/view_red_point"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/shape_point_red" />
    </RelativeLayout>

</RelativeLayout>

然后我们需要在清单文件中注册这个活动：

 <activity android:name=".Activity.GuideActivity" > </activity>

接下来是主界面了：

主界面中有3个小圆点，可以随页面的滑动而自动滑动，当然，你也可以从美工那里直接用已经画好了的图片，下面我们来看一下怎么添加3个小点：

// 初始化引导页的小圆点
		for (int i = 0; i < mImageIds.length; i++) {
			View point = new View(this);
			point.setBackgroundResource(R.drawable.shape_point_gray);// 设置引导页默认圆点

			LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
					10, 10);
			if (i > 0) {
				params.leftMargin = 10;// 设置圆点间隔
			}

			point.setLayoutParams(params);// 设置圆点的大小

			llPointGroup.addView(point);// 将圆点添加给线性布局
		}

		// 获取视图树, 对layout结束事件进行监听
		llPointGroup.getViewTreeObserver().addOnGlobalLayoutListener(
				new OnGlobalLayoutListener() {

					// 当layout执行结束后回调此方法
					@Override
					public void onGlobalLayout() {
						System.out.println("layout 结束");
						llPointGroup.getViewTreeObserver()
								.removeGlobalOnLayoutListener(this);
						mPointWidth = llPointGroup.getChildAt(1).getLeft()
								- llPointGroup.getChildAt(0).getLeft();
						System.out.println("圆点距离:" + mPointWidth);
					}
				});

初始化界面，当然，这些都需要定义一下

mImageViewList = new ArrayList<ImageView>();

		// 初始化引导页的3个页面
		for (int i = 0; i < mImageIds.length; i++) {
			ImageView image = new ImageView(this);
			image.setBackgroundResource(mImageIds[i]);// 设置引导页背景
			mImageViewList.add(image);

接下来是viewpager数据适配器

class GuideAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			return mImageIds.length;
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(mImageViewList.get(position));
			return mImageViewList.get(position);
		}

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

然后是 viewpager的滑动监听

class GuidePageListener implements OnPageChangeListener {

		// 滑动事件
		@Override
		public void onPageScrolled(int position, float positionOffset,
				int positionOffsetPixels) {
			// System.out.println("当前位置:" + position + ";百分比:" + positionOffset
			// + ";移动距离:" + positionOffsetPixels);
			int len = (int) (mPointWidth * positionOffset) + position
					* mPointWidth;
			RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewRedPoint
					.getLayoutParams();// 获取当前红点的布局参数
			params.leftMargin = len;// 设置左边距

			viewRedPoint.setLayoutParams(params);// 重新给小红点设置布局参数
		}

当某个页面被选中的时候，例如第一页：

// 某个页面被选中
		@Override
		public void onPageSelected(int position) {
			if (position == mImageIds.length - 1) {// 最后一个页面
				btnStart.setVisibility(View.VISIBLE);// 显示开始体验的按钮
			} else {
				btnStart.setVisibility(View.INVISIBLE);
			}
		}

		// 滑动状态发生变化
		@Override
		public void onPageScrollStateChanged(int state) {

		}

在闪屏页里面判断是否只出现一次，因为我们这个新手引导页在用户安装的时候只出现一次就可以了，显示完成之后点击“开始体验”直接跳转到主页面：

那么我们如何判断用户只显示一次呢？

**
* 跳转下一个页面
*/
private void jumpNextPage() {
// 判断之前有没有显示过新手引导
boolean userGuide = PrefUtils.getBoolean(this, "is_user_guide_showed",
false);


if (!userGuide) {
// 跳转到新手引导页
startActivity(new Intent(SplashActivity.this, GuideActivity.class));
} else {
startActivity(new Intent(SplashActivity.this, MainActivity.class));
}


finish();
}

然后再新手页中添加以下代码：如果“is_user_guide_showed"是true，则表示已经展示了新手引导页，那么我们下次就可以不用再展示了，下次进入的时候直接跳转主页面。

btnStart.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// 更新sp, 表示已经展示了新手引导
				PrefUtils.setBoolean(GuideActivity.this,
						"is_user_guide_showed", true);

				// 跳转主页面
				startActivity(new Intent(GuideActivity.this, MainActivity.class));
				finish();
			}
		});

		initViews();
		vpGuide.setAdapter(new GuideAdapter());

		vpGuide.setOnPageChangeListener(new GuidePageListener());

导入相关的包，这个项目就可以成功运行了。