目前市面上几乎所有的APP应用在第一次使用时都会有个引导页面，要么用引导用户操作，要么介绍产品优势，要么用来打广告等。引导页面一般是由3-6张图形界面组成，好的引导页面也不失为该app的亮丽风景！今天我也来说说引导页面的设计（当然有N种方法），我只是把我们项目中用到的方法代码贴出来，方便自己做个笔记。
我们实现的原理很简单，就是用一个ViewPager全屏展示一些图片，主要代码如下：
主页面布局：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.huika.pmall.views.MyViewPager
android:id="@+id/whatsnew_viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<!--下面这个LinearLayout是装载图片指导步圆点的-->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="30dp"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:visibility="gone" >
<ImageView
android:id="@+id/page0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:src="@drawable/page_now" />
<ImageView
android:id="@+id/page1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />
<ImageView
android:id="@+id/page2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />
</LinearLayout>
</FrameLayout>
主页面代码：
public class GuideViewAct extends Activity implements OnRightEndScrollListener {
private MyViewPager mViewPager;
private ImageView mPage0;
private ImageView mPage1;
private ImageView mPage2;
@SuppressWarnings("unused")
private int currIndex = 0;
@Override
public void onCreate() {
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.layout_guide_view);
initViews() ;
}
private void initViews() {
mViewPager = (MyViewPager) findViewById(R.id.whatsnew_viewpager);
mViewPager.setRightEndScrollListener(this);
mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
mPage0 = (ImageView) findViewById(R.id.page0);
mPage1 = (ImageView) findViewById(R.id.page1);
mPage2 = (ImageView) findViewById(R.id.page2);
PagerAdapter mPagerAdapter = new PagerAdapter() {
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public int getCount() {
return 3;//我们引导页面只有3个
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView((View) object);
}
@Override
public View instantiateItem(View container, int position) {
LayoutInflater inflater = LayoutInflater.from(container.getContext());
int layoutId = getResources().getIdentifier("view_guide_" + (position + 1), "layout", getPackageName());
View pView = inflater.inflate(layoutId, (ViewPager) container, false);
((ViewPager) container).addView(pView);
return pView;
}
};
mViewPager.setAdapter(mPagerAdapter);
}
@Override
public void widgetClick(View v) {
super.widgetClick(v);
}
/**
* 最后一张图片Viewpager上面的开始按钮
*
* @param v
*/
public void startbutton(View v) {
System.gc();
Intent intent = new Intent();
intent.setClass(GuideViewAct.this, MainAct.class);
startActivity(intent);
this.finish();
}
@Override
public void onRightEndScrollListener() {
startbutton(null);
}
public class MyOnPageChangeListener implements OnPageChangeListener {
public void onPageSelected(int arg0) {
switch (arg0) {
case 0:
mPage0.setImageResource(R.drawable.page_now);
mPage1.setImageResource(R.drawable.page);
mPage2.setImageResource(R.drawable.page);
break;
case 1:
mPage1.setImageResource(R.drawable.page_now);
mPage0.setImageResource(R.drawable.page);
mPage2.setImageResource(R.drawable.page);
break;
case 2:
mPage2.setImageResource(R.drawable.page_now);
mPage0.setImageResource(R.drawable.page);
mPage1.setImageResource(R.drawable.page);
break;
// case 4:
// mPage4.setImageResource(R.drawable.page_now);
// mPage3.setImageResource(R.drawable.page);
// break;
}
currIndex = arg0;
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
}
}
发现上面int layoutId = getResources().getIdentifier("view_guide_" + (position + 1), "layout", getPackageName());这句没有，我们的view_guide_是从哪来的呢？我们在要res/layout下面新建对应的布局，比如有三张引导页面，我们就要三个布局，分别命名为：view_guide_1.xml，view_guide_2.xml，view_guide_3.xml，在三个页面中分别放上你应用要展示的图片或信息就可以了。
最后贴上自定义的ViewPager:
public class MyViewPager extends ViewPager {
private OnRightEndScrollListener rightEndScrollListener;
private float pStart;
private VelocityTracker mVelocityTracker;
private int touchSlop;
private float scrollFriction;
private boolean mCanDrag = true;
public interface OnRightEndScrollListener {
void onRightEndScrollListener();
}
public MyViewPager(Context context) {
super(context);
init();
}
public MyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
touchSlop = 200;
scrollFriction = 2000;
}
@Override
public boolean onInterceptTouchEvent(MotionEvent arg0) {
if (!mCanDrag)
return false;
boolean flag = false;
try {
flag = super.onInterceptTouchEvent(arg0);
}
catch (Exception e) {
}
return flag;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
try {
if (getAdapter() != null && (getCurrentItem() + 1) == getAdapter().getCount())// 最后一项
{
if (mVelocityTracker == null) {
mVelocityTracker = VelocityTracker.obtain();
}
mVelocityTracker.addMovement(event);
int action = event.getAction() & MotionEvent.ACTION_MASK;
switch (action) {
case MotionEvent.ACTION_DOWN:
pStart = event.getX();
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
float pEnd = event.getX();
mVelocityTracker.computeCurrentVelocity(1000);
float velocityX = mVelocityTracker.getXVelocity();
if ((pStart > pEnd && (pStart - pEnd) > touchSlop) || (velocityX < -scrollFriction)) {// 触发左滑事件
if (rightEndScrollListener != null) {
rightEndScrollListener.onRightEndScrollListener();
}
}
Log.v("fan", touchSlop + "velocityX=" + velocityX);
Log.v("fan", scrollFriction + "(x1-x2)=" + (pStart - pEnd) + "," + pStart + "=" + "x2=" + pEnd);
mVelocityTracker.clear();
break;
default:
break;
}
}
}
catch (Exception e) {
}
return super.onTouchEvent(event);
}
public void setRightEndScrollListener(OnRightEndScrollListener rightEndScrollListener) {
this.rightEndScrollListener = rightEndScrollListener;
}
/**
* 是否可以滑动
*
* @param canDrag
*/
public void setCanDragState(boolean canDrag) {
mCanDrag = canDrag;
}
}