Android实战简易教程-第四十八枪（App引导页面效果实现）

经常使用APP的童鞋会发现，第一次进入APP会有引导页面，里面可以放一些APP的使用介绍或其他信息等等，下面我们研究一下如何实现这个功能，增加APP的体验。

一、自定义控件继承ViewGroup:

package com.genius.scroll;

import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;

import com.genius.demo.MainActivity;

public class MyScrollLayout extends ViewGroup {

  private static final String TAG = "MyScrollLayout";

  /** 用于判断甩动手势 **/
  private VelocityTracker mVelocityTracker;

  private static final int SNAP_VELOCITY = 600;

  /** 滑动控制器 **/
  private Scroller mScroller;

  private int mCurScreen;

  private int mDefaultScreen = 0;

  private float mLastMotionX;

  /** 当前页码 **/
  private int currentPage;

  /** 总页码 **/
  private int pagesize;

  private Context mContext;// 上下文对象

  private OnViewChangeListener mOnViewChangeListener;// View滚动监听器

  /** 标注是否跳转到主界面了 **/
  private boolean go_main = false;

  private SharedPreferences preferences;

  public MyScrollLayout(Context context) {
    super(context);
    this.mContext = context;
    init(context);
  }

  public MyScrollLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.mContext = context;
    init(context);
  }

  public MyScrollLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    this.mContext = context;
    init(context);
  }

  /**
   * 获取当前页码
   * 
   * @param page
   */
  public void setPosition(int page) {
    if (page > 0) {
      currentPage = page;
    }
  }

  /**
   * 获取总页数
   * 
   * @param size
   */
  public void setPageSize(int size) {
    pagesize = size;
  }

  private void init(Context context) {
    mCurScreen = mDefaultScreen;

    mScroller = new Scroller(context);
  }

  /**
   * 调用场景：在view给其孩子设置尺寸和位置时被调用 参数说明： 参数一：view有新的尺寸或位置； 参数二：相对于父view的Left位置；
   * 参数三：相对于父view的Top位置； 参数四：相对于父view的Right位置； 参数五：相对于父view的Bottom位置.
   */
  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    if (changed) {// 如果有新的尺寸或位置
      int childLeft = 0;
      final int childCount = getChildCount();// 返回子View的总数

      for (int i = 0; i < childCount; i++) {// 遍历子View
        final View childView = getChildAt(i);
        if (childView.getVisibility() != View.GONE) {

          // childView.getMeasuredWidth()對View上的內容進行測量後得到的View內容佔據的寬度，前提是你必須在父佈局的
          // onLayout()方法或者此View的onDraw()方法裡調用measure(0,0);(measure
          // 參數的值你可以自己定義)，否則你得到的結果和getWidth()得到的結果一樣
          final int childWidth = childView.getMeasuredWidth();

          // 参数(相对于父布局的左、上、右、下的位置)
          childView.layout(childLeft, 0, childLeft + childWidth,
              childView.getMeasuredHeight());

          childLeft += childWidth;
        }
      }
    }
  }

  /**
   * 指明控件可获得的空间以及关于这个空间描述的元数据.
   */
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    // MeasureSpec封装了父布局传递给子布局的布局要求，每个MeasureSpec代表了一组宽度和高度的要求。一个MeasureSpec由大小和模式组成
    final int width = MeasureSpec.getSize(widthMeasureSpec);// 根据提供的测量值提取大小值
    final int widthMode = MeasureSpec.getMode(widthMeasureSpec);// 根据提供的测量值(格式)提取模式(有三种模式)
    Log.d(TAG, "onMeasure width:" + width + " widthMode:" + widthMode);

    final int count = getChildCount();// 获取子视图总数

    for (int i = 0; i < count; i++) {
      // 调用子视图
      getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
    }

    scrollTo(mCurScreen * width, 0);

  }

  public void snapToDestination() {
    final int screenWidth = getWidth();

    final int destScreen = (getScrollX() + screenWidth / 2) / screenWidth;
    snapToScreen(destScreen);
  }

  public void snapToScreen(int whichScreen) {

    // 得到有效的页面布局
    whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1));
    if (getScrollX() != (whichScreen * getWidth())) {

      final int delta = whichScreen * getWidth() - getScrollX();

      mScroller.startScroll(getScrollX(), 0, delta, 0,
          Math.abs(delta) * 2);

      mCurScreen = whichScreen;
      invalidate(); // 重绘布局

      if (mOnViewChangeListener != null) {
        mOnViewChangeListener.OnViewChange(mCurScreen);
      }
    }
  }

  /**
   * View绘制流程draw()中会调用
   */
  @Override
  public void computeScroll() {
    if (mScroller.computeScrollOffset()) {// 如果返回true，表示动画还没有结束
      scrollTo(mScroller.getCurrX(), mScroller.getCurrY());// 产生平滑的动画效果，根据当前偏移量，每次滚动一点
      postInvalidate();// 此时同样也需要刷新View ，否则效果可能有误差
    } else {// 如果返回false，表示startScroll完成
      Log.i(TAG, "scoller has finished");
    }
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {

    final int action = event.getAction();
    final float x = event.getX();
    final float y = event.getY();
    Log.d(TAG, "X:" + x + " Y:" + y);

    float oldx = 0;
    switch (action) {
    case MotionEvent.ACTION_DOWN:
      oldx = event.getRawX();
      Log.i("", "onTouchEvent  ACTION_DOWN");

      if (mVelocityTracker == null) {
        mVelocityTracker = VelocityTracker.obtain();
        mVelocityTracker.addMovement(event);
      }

      if (!mScroller.isFinished()) {
        mScroller.abortAnimation();
      }

      mLastMotionX = x;
      break;

    case MotionEvent.ACTION_MOVE:
      int deltaX = (int) (mLastMotionX - x);
      float newX = event.getRawX();

      /**
       * 最后一页跳转 
       */
      if (newX - oldx > 3) {

        if (currentPage == pagesize - 1 && !go_main) {
          go_main = true;

          preferences = mContext.getSharedPreferences("setting", 0);
          SharedPreferences.Editor editor = preferences.edit();
          editor.putBoolean("isOpen", true);
          editor.commit();

          Intent intent = new Intent();
          intent.setClass(mContext, MainActivity.class);//跳转到第一个页面；
          mContext.startActivity(intent);
        }
      }
      if (IsCanMove(deltaX)) {
        if (mVelocityTracker != null) {
          mVelocityTracker.addMovement(event);
        }

        mLastMotionX = x;

        scrollBy(deltaX, 0);
      }

      break;

    case MotionEvent.ACTION_UP:

      int velocityX = 0;
      if (mVelocityTracker != null) {
        mVelocityTracker.addMovement(event);
        mVelocityTracker.computeCurrentVelocity(1000);
        velocityX = (int) mVelocityTracker.getXVelocity();
      }

      if (velocityX > SNAP_VELOCITY && mCurScreen > 0) {
        // 向左移动
        Log.e(TAG, "snap left");
        snapToScreen(mCurScreen - 1);
      } else if (velocityX < -SNAP_VELOCITY
          && mCurScreen < getChildCount() - 1) {
        // 向右移动
        Log.e(TAG, "snap right");
        snapToScreen(mCurScreen + 1);
      } else {
        snapToDestination();
      }

      if (mVelocityTracker != null) {
        mVelocityTracker.recycle();
        mVelocityTracker = null;
      }

      break;
    }

    return true;
  }

  private boolean IsCanMove(int deltaX) {

    if (getScrollX() <= 0 && deltaX < 0) {
      return false;
    }

    if (getScrollX() >= (getChildCount() - 1) * getWidth() && deltaX > 0) {
      return false;
    }

    return true;
  }

  public void SetOnViewChangeListener(OnViewChangeListener listener) {
    mOnViewChangeListener = listener;
  }

//  /**
//   * 判断是否开启索引
//   * @return
//   */
//  private boolean isOpean(){
//    
//  }
  
}

二、定义接口

package com.genius.scroll;

public interface OnViewChangeListener {
  public void OnViewChange(int view);
}

三、创建实例

1.创建ViewPagerAdapter.java:

package com.genius.demo;

import java.util.List;

import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

/**
 * ViewPgageAdapter适配器
 * @author yayun 
 *
 */
public class ViewPageAdapter extends PagerAdapter {

  List<View> mViewList;

  public ViewPageAdapter(List<View> viewList) {
    mViewList = viewList;
  }

  @Override
  public int getCount() {
    if (mViewList != null) {
      return mViewList.size();
    }

    return 0;
  }

  @Override
  public Object instantiateItem(View view, int index) {
    ((ViewPager) view).addView(mViewList.get(index), 0);

    return mViewList.get(index);
  }

  @Override
  public void destroyItem(View view, int position, Object arg2) {

    ((ViewPager) view).removeView(mViewList.get(position));
  }

  @Override
  public void finishUpdate(View arg0) {

  }

  @Override
  public boolean isViewFromObject(View view, Object obj) {
    return (view == obj);

  }

  @Override
  public void restoreState(Parcelable arg0, ClassLoader arg1) {

  }

  @Override
  public Parcelable saveState() {
    return null;
  }

  @Override
  public void startUpdate(View arg0) {

  }

}

2.创建SwitchViewDemoActivity.java:

package com.genius.demo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.genius.scroll.MyScrollLayout;
import com.genius.scroll.OnViewChangeListener;

public class SwitchViewDemoActivity extends Activity implements
    OnViewChangeListener, OnClickListener {

  private MyScrollLayout mScrollLayout;

  private ImageView[] mImageViews;

  private int mViewCount;

  private int mCurSel;
  
  /** Activity对象 **/
  public static Activity MY_ACTIVITY;
  
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    
    MY_ACTIVITY = this;
    
    init();
  }

  private void init() {
    mScrollLayout = (MyScrollLayout) findViewById(R.id.ScrollLayout);

    LinearLayout linearLayout = (LinearLayout) findViewById(R.id.llayout);

    mViewCount = mScrollLayout.getChildCount();
    mImageViews = new ImageView[mViewCount];

    for (int i = 0; i < mViewCount; i++) {
      mImageViews[i] = (ImageView) linearLayout.getChildAt(i);
      mImageViews[i].setEnabled(true);
      mImageViews[i].setOnClickListener(this);
      mImageViews[i].setTag(i);
    }

    mScrollLayout.setPageSize(mImageViews.length);
    mCurSel = 0;
    mImageViews[mCurSel].setEnabled(false);

    mScrollLayout.SetOnViewChangeListener(this);
  }

  private void setCurPoint(int index) {
    if (index < 0 || index > mViewCount - 1 || mCurSel == index) {
      return;
    }
    
    mImageViews[mCurSel].setEnabled(true);
    mImageViews[index].setEnabled(false);
    mScrollLayout.setPosition(index);
    mCurSel = index;
  }

  @Override
  public void OnViewChange(int view) {
    setCurPoint(view);
  }

  @Override
  public void onClick(View v) {
    int pos = (Integer) (v.getTag());
    setCurPoint(pos);
    mScrollLayout.snapToScreen(pos);
  }
}

3.布局文件：

<?xml version="1.0" encoding="utf-8"?>    
<RelativeLayout 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:id="@+id/touch"
    xmlns:android="http://schemas.android.com/apk/res/android">
    
    
    <com.genius.scroll.MyScrollLayout    
      xmlns:android="http://schemas.android.com/apk/res/android"    
      android:id="@+id/ScrollLayout"    
      android:layout_width="fill_parent"    
      android:layout_height="fill_parent">    
  
      <FrameLayout    
      android:background="@drawable/guide01"    
      android:layout_width="fill_parent"    
      android:layout_height="fill_parent">
      </FrameLayout>   
      
      <FrameLayout    
      android:background="@drawable/guide02"    
      android:layout_width="fill_parent"    
      android:layout_height="fill_parent">
      </FrameLayout>    
          
      <FrameLayout     
      android:background="@drawable/guide03"     
      android:layout_width="fill_parent"    
      android:layout_height="fill_parent">    
      

      
      </FrameLayout>    
      
      <FrameLayout    
      android:background="@drawable/guide04"    
      android:layout_width="fill_parent"    
      android:layout_height="fill_parent">    
      </FrameLayout>    
      
      <FrameLayout    
      android:background="@drawable/guide05"    
      android:layout_width="fill_parent"    
      android:layout_height="fill_parent">    
      </FrameLayout>    
       
    </com.genius.scroll.MyScrollLayout> 

    <LinearLayout 
        android:orientation="horizontal" 
        android:id="@+id/llayout" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginBottom="24.0dip" 
        android:layout_alignParentBottom="true" 
        android:layout_centerHorizontal="true">
        
        <ImageView android:clickable="true"  android:padding="15.0dip" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/guide_round" />
        <ImageView android:clickable="true"  android:padding="15.0dip"  android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/guide_round" />
        <ImageView android:clickable="true"  android:padding="15.0dip"  android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/guide_round" />
        <ImageView android:clickable="true"  android:padding="15.0dip"  android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/guide_round" />
        <ImageView android:clickable="true"  android:padding="15.0dip"  android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/guide_round" />
    </LinearLayout>
    
</RelativeLayout>

四、运行实例：

喜欢的朋友请关注我！

​​源码下载​​