APP启动引导界面的编写

1、我们都知道当第一次打开一个APP的时候首先是在欢迎界面停留一段时间，然后进入引导界面。引导界面里面的页面可以左右滑动，当滑动到最后一个页面的时候一般在页面当中有一个按钮，点击按钮就可以进入主界面了。

2、然后以后每次打开APP，不会进入引导界面，只会在欢迎界面停留一定时间然后进入主界面。

今天就来讲一下整个实现过程。

欢迎界面WelcomeActivity

既然我们需要根据是不是第一次启动APP来进入引导界面，那么肯定需要在SharedPreferences里面保存一个boolean变量，刚开始为false。当第一次进入引导界面之后，就把这个值设为true。

每次启动WelcomeActivity的时候都判断这个boolean变量，然后延时一段时间进入相应的界面。WelcomeActivity代码如下所示：

package com.easyliu.viewpagerdemo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.os.Bundle;
import android.os.Handler;

public class WelcomeActivity extends Activity {
	private static final int DELAY = 2000;// 延时
	private static final int GO_HOME = 1000;
	private static final int GO_GUIDE = 1001;
	private boolean mIsFirst = false;
	private static final String START_KEY = "isFirst";
	@SuppressLint("HandlerLeak")
	//接收消息
	private Handler hander = new Handler() {
		public void handleMessage(android.os.Message msg) {
			switch (msg.what) {
				case GO_HOME:
					gohome();
					break;
				case GO_GUIDE:
					goguide();
					break;
			}
		}
	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_welcome);
		init();
	}

	private void init() {
		SharedPreferences preferences = getPreferences(MODE_PRIVATE);
		// 读取保存的键的值
		mIsFirst = preferences.getBoolean(START_KEY, true);
		if (!mIsFirst) {
			hander.sendEmptyMessageDelayed(GO_HOME, DELAY);
		} else {
			hander.sendEmptyMessageDelayed(GO_GUIDE, DELAY);
			Editor editor = preferences.edit();
			editor.putBoolean(START_KEY, false);
			editor.commit();
		}
	}

	// 去主界面
	private void gohome() {
		startActivity(new Intent(WelcomeActivity.this, MainActivity.class));
		finish();
	}

	// 去引导界面
	private void goguide() {
		startActivity(new Intent(WelcomeActivity.this, GuideActivity.class));
		finish();
	}
}

引导界面GuideActivity

引导界面主要是使用ViewPager承载几个View，实现左右滑动，所以布局如下所示。注意：在布局文件中，给根布局设置了一个id:layout_guide，这样就方便往界面中动态加入白色小圆点。

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

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00000000" />
</RelativeLayout>

然后就是就是给这个ViewPager设置一个PagerAdapter,编写一个类继承自PagerAdapter，实现其几个方法。GuideViewPagerAdapter如下所示。由于每个页面可能仅仅是一张图片或者是在图片上面还有按钮，所以这里统一把每个页面作为View，加入到ViewPager当中，便于扩展。

package com.easyliu.viewpagerdemo;

import java.util.List;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

public class GuideViewPagerAdapter extends PagerAdapter {
    private List<View> mViews;
    private Context mContext;
    private static final String[] sTitles = {"PageOne", "PageTwo", "PageThree", "PageFour"};

    public GuideViewPagerAdapter(Context context, List<View> view) {
        this.mViews = view;
        this.mContext = context;
    }

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

    @Override
    public Object instantiateItem(View container, int position) {
        ((ViewPager) container).addView(mViews.get(position));
        return mViews.get(position);
    }

    @Override
    public int getCount() {
        return mViews.size();
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return sTitles[position];
    }

    @Override
    public float getPageWidth(int position) {
        return super.getPageWidth(position);
    }

    @Override
    public int getItemPosition(Object object) {
        return mViews.indexOf(object);
    }
}

初始化ViewPager里面的Views以及引导界面下面的白色小圆点，使用ImageView。当滑动到不同的页面的时候相应的小圆点更换成选中状态的图片。

初始化Views代码如下。引导界面中有四个页面。前面三个页面每个页面使用一张图片，最后一个页面使用一个RelativeLayout，在布局中加入了一个按钮和一张图片。最后的一个页面layout_guide_pager_end的布局如下所示：

<?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" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000"
        android:scaleType="fitXY"
        android:src="@drawable/guide_3" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="60dp"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <Button
            android:id="@+id/btn_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="点击进入主界面" />
    </LinearLayout>

</RelativeLayout>

初始化Views代码：

/**
	 *初始化Views
	 */
	private void initViews() {
		layout_guide = (RelativeLayout) findViewById(R.id.layout_guide);
		views = new ArrayList<View>();
        //加入图片
		ImageView imageView = new ImageView(this);
		imageView.setScaleType(ScaleType.FIT_XY);
		imageView.setImageResource(R.drawable.guide_1);
		views.add(imageView);

		imageView = new ImageView(this);
		imageView.setScaleType(ScaleType.FIT_XY);
		imageView.setImageResource(R.drawable.guide_2);
		views.add(imageView);

		imageView = new ImageView(this);
		imageView.setScaleType(ScaleType.FIT_XY);
		imageView.setImageResource(R.drawable.guide_3);
		views.add(imageView);
        //加入最后一页布局
		LayoutInflater inflater = LayoutInflater.from(this);
		views.add(inflater
				.inflate(R.layout.layout_guide_pager_end, null));
		adapter = new GuideViewPagerAdapter(this, views);
		pager = (ViewPager) findViewById(R.id.pager);
		// 设置适配器
		pager.setAdapter(adapter);
		// 注册监听器
		pager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				for (int i = 0; i < views.size(); i++) {
					if (arg0 == i) {
						dots[i].setImageResource(R.drawable.login_point_selected);
					} else {
						dots[i].setImageResource(R.drawable.login_point);
					}
				}
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {

			}
		});
		// 点击按钮跳转到主界面
		views.get(views.size() - 1).findViewById(R.id.btn_start)
				.setOnClickListener(new OnClickListener() {
					@Override
					public void onClick(View v) {
						startActivity(new Intent(GuideActivity.this,
								MainActivity.class));
						finish();
					}
				});
	}

初始化dots代码，根据加入的页面的数量，加入相应数量的dots，每个dot是一个imageView，设置初始图片。

	/**
	 * 初始化点
	 */
	private void initdots() {
		dots = new ImageView[views.size()];
		for (int i = 0; i < views.size(); i++) {
			dots[i] = new ImageView(this);
			if (i == 0) {
				dots[i].setImageResource(R.drawable.login_point_selected);
			} else {
				dots[i].setImageResource(R.drawable.login_point);
			}
			dots[i].setScaleType(ScaleType.FIT_XY);
			// 设置位置
			DisplayMetrics dm = new DisplayMetrics();
			getWindowManager().getDefaultDisplay().getMetrics(dm);
			RelativeLayout.LayoutParams lParams = new LayoutParams(
					LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
			lParams.topMargin = dm.heightPixels*19/20;
			lParams.leftMargin = dm.widthPixels / 2 + (i - views.size() / 2)
					* dm.widthPixels/20;
			layout_guide.addView(dots[i], lParams);
		}
	}

以上就是引导界面的编写过程，主要是引导界面的编写，通过在ViewPager里面加入Views，达到想要的效果。

界面如下：

代码下载地址：https://github.com/EasyLiu-Ly/AndroidBlogDemo