Android应用程序介绍页面实现 (一)

在很多应用程序第一次启动的时候，会通过几个滑动页面来对该应用程序进行简要地介绍，本文通过ViewFlipper来实现展示效果。

public class ViewFlipperActivity extends Activity implements OnGestureListener{

	/**
	 * 使用ViewFlipper实现左右滑动效果
	 */
	private ViewFlipper mFlipper;
	private GestureDetector mDetector;
	private String TAG = "ViewFlipperActivity";
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE); 
        setContentView(R.layout.activity_viewflipper);
        /**
         * 添加滑动图片
         */
        mFlipper = (ViewFlipper) this.findViewById(R.id.flipper);
        mFlipper.addView(addImage(R.drawable.guide_1), 0);
        mFlipper.addView(addImage(R.drawable.guide_2), 1);
        mFlipper.addView(addImage(R.drawable.guide_3), 2);
        mFlipper.addView(addImage(R.drawable.guide_4), 3);

        /**
         * 创建一个手势监听器
         */
        mDetector = new GestureDetector(this);
    }

    private View addImage(int id){
    	ImageView imageView = new ImageView(ViewFlipperActivity.this);
    	imageView.setImageResource(id);
    	imageView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    	return imageView;
    }

	@Override
	public boolean onDown(MotionEvent arg0) {
		// TODO Auto-generated method stub
		return false;
	}


	@Override
	public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,
			float arg3) {
		/**
		 * 滑动显示图片
		 */
		if (arg0.getX() - arg1.getX() > 10) {
            mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
            mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
            mFlipper.showNext();
            return true;
        } else if (arg0.getX() - arg1.getX() < -10) {
        	mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
        	mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
        	mFlipper.showPrevious();
            return true;
        }
		// TODO Auto-generated method stub
		return false;
	}


	@Override
	public void onLongPress(MotionEvent arg0) {
		// TODO Auto-generated method stub
		
	}


	@Override
	public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
			float arg3) {
		// TODO Auto-generated method stub
		return false;
	}


	@Override
	public boolean onTouchEvent(MotionEvent event) {
		/**
		 * 将触摸事件发送到手势监听器中
		 */
		return mDetector.onTouchEvent(event);
	}

	@Override
	public void onShowPress(MotionEvent arg0) {
		// TODO Auto-generated method stub
		
	}


	@Override
	public boolean onSingleTapUp(MotionEvent arg0) {
		// TODO Auto-generated method stub
		return false;
	}
    
}

实现相当简单，就是将几张图片添加到ViewFlipper中，使用ViewFlipper来实现页面切换效果。在页面切换过程中，使用了动画来实现平滑过渡效果，分别定义了4个动画，分别为：

push_left_in.xml

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0"
        android:duration="500" />
    <alpha android:fromAlpha="0.1" android:toAlpha="1.0"
        android:duration="500" />
</set>

push_left_out.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-100%p"
        android:duration="500" />
    <alpha android:fromAlpha="1.0" android:toAlpha="0.1"
        android:duration="500" />
</set>

push_right_in.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0"
        android:duration="500" />
    <alpha android:fromAlpha="0.1" android:toAlpha="1.0"
        android:duration="500" />
</set>

push_right_out.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="100%p"
        android:duration="500" />
    <alpha android:fromAlpha="1.0" android:toAlpha="0.1"
        android:duration="500" />
</set>