首先做开发的时候应该有一个闪屏页面和新手引导页, 我相信闪屏页面大家应该都会了,那么先看到新手引导页了。
我们可以看到这其实是一个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();
}
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());