本讲主要讲解ViewPager与ViewFlipper，通过一个案例来让大家感受它们之间的区别。

案例：实现应用介绍导航界面。

案例效果图：

一.ViewPager实现代码：

（1）布局文件代码：

guide_viewpager.xml

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

home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="欢迎进入首页" />
</LinearLayout>

(2)功能代码：

ViewPagerActivity.java

package com.anjoyo.viewpager;
import java.util.ArrayList;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout.LayoutParams;
import android.widget.RelativeLayout;

public class ViewPagerActivity extends Activity {

private ArrayList<View> pagerList;
private ViewPager viewPager;
private RelativeLayout mMainLayout;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.guide_viewpager);
mMainLayout = (RelativeLayout) this.findViewById(R.id.rl_main);
addMainLayout(mMainLayout);
}
private void addMainLayout(RelativeLayout layout) {
viewPager = new ViewPager(this);
createView();
RelativeLayout.LayoutParams params_cal = new RelativeLayout.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
layout.addView(viewPager, params_cal);
}
private void createView() {
ImageView preView = new ImageView(ViewPagerActivity.this);
preView.setBackgroundResource(R.drawable.new_version_1);
ImageView currentView = new ImageView(ViewPagerActivity.this);
currentView.setBackgroundResource(R.drawable.new_version_2);
ImageView last_1_View = new ImageView(ViewPagerActivity.this);
last_1_View.setBackgroundResource(R.drawable.new_version_3);
ImageView last_2_View = new ImageView(ViewPagerActivity.this);
last_2_View.setBackgroundResource(R.drawable.new_version_4);
ImageView last_3_View = new ImageView(ViewPagerActivity.this);
last_3_View.setBackgroundResource(R.drawable.new_version_5);
last_3_View.setId(5);
pagerList = new ArrayList<View>();
pagerList.add(preView);
pagerList.add(currentView);
pagerList.add(last_1_View);
pagerList.add(last_2_View);
pagerList.add(last_3_View);
viewPager.setAdapter(new GuidePageAdapter());
last_3_View.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
Intent intent = new Intent(ViewPagerActivity.this,
HomeActivity.class);
startActivity(intent);

}
});

}
class GuidePageAdapter extends PagerAdapter {

@Override
public int getCount() {
return pagerList.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView(pagerList.get(position));

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

}

}

HomeActivity.java

package com.anjoyo.viewpager;
import android.app.Activity;
import android.os.Bundle;
public class HomeActivity extends Activity {

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

（3）清单文件代码：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.anjoyo.viewpager"
android:versionCode="1"
android:versionName="1.0" >
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
android:name=".ViewPagerActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
android:name=".HomeActivity" >
</activity>
</application>
</manifest>

二.ViewFlipper实现代码

（1）布局文件代码：

guide.xml

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

home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="欢迎进入首页" />
</LinearLayout>

slide_left_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate
android:duration="400"
android:fromXDelta="100%p"
android:toXDelta="0" >
</translate>

</set>

slide_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate
android:duration="400"
android:fromXDelta="0"
android:toXDelta="-100%p" >
</translate>
</set>

slide_right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate
android:duration="400"
android:fromXDelta="-100%p"
android:toXDelta="0" >
</translate>

</set>

slide_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate
android:duration="400"
android:fromXDelta="0"
android:toXDelta="100%p" >
</translate>

</set>

(2)功能代码：

GuideActivity.java

package com.anjoyo.gesture;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout.LayoutParams;
import android.widget.RelativeLayout;
import android.widget.ViewFlipper;

public class GuideActivity extends Activity {

private static final int SWIPE_MIN_DISTANCE = 120;//手势滑动的最短距离
private static final int SWIPE_THRESHOLD_VELOCITY = 200;//手势滑动最低滑动速度
private GestureDetector mGesture;//手势识别类
private ViewFlipper viewFlipper;

private Animation mSlideLeftIn;//左进动画
private Animation mSlideLeftOut;//左出动画
private Animation mSlideRightIn;//右进动画
private Animation mSlideRightOut;//右出动画
private RelativeLayout mMainLayout;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.guide);
mGesture = new GestureDetector(this, new MyOnGestureListener());
mMainLayout = (RelativeLayout) this.findViewById(R.id.rl_main);
addMainLayout(mMainLayout);

}
/*
* 初始界面
* */
private void addMainLayout(RelativeLayout layout) {
viewFlipper = new ViewFlipper(this);
createView();
RelativeLayout.LayoutParams params_cal = new RelativeLayout.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
layout.addView(viewFlipper, params_cal);
}
//动画监听器
AnimationListener animationListener = new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}

@Override
public void onAnimationRepeat(Animation animation) {
}

@Override
public void onAnimationEnd(Animation animation) {
// 当动画完成后调用
createView();
}
};
/*
* 动态加载的界面View
* */
private void createView() {

ImageView preView = new ImageView(GuideActivity.this);
preView.setId(1);
preView.setBackgroundResource(R.drawable.new_version_1);
ImageView currentView = new ImageView(GuideActivity.this);
currentView.setBackgroundResource(R.drawable.new_version_2);
ImageView last_1_View = new ImageView(GuideActivity.this);
last_1_View.setBackgroundResource(R.drawable.new_version_3);
ImageView last_2_View = new ImageView(GuideActivity.this);
last_2_View.setBackgroundResource(R.drawable.new_version_4);
ImageView last_3_View = new ImageView(GuideActivity.this);
last_3_View.setBackgroundResource(R.drawable.new_version_5);
last_3_View.setId(5);

viewFlipper.addView(preView);
viewFlipper.addView(currentView);
viewFlipper.addView(last_1_View);
viewFlipper.addView(last_2_View);
viewFlipper.addView(last_3_View);
mSlideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_left_in);
mSlideLeftOut = AnimationUtils.loadAnimation(this,
R.anim.slide_left_out);
mSlideRightIn = AnimationUtils.loadAnimation(this,
R.anim.slide_right_in);
mSlideRightOut = AnimationUtils.loadAnimation(this,
R.anim.slide_right_out);

mSlideLeftIn.setAnimationListener(animationListener);
mSlideLeftOut.setAnimationListener(animationListener);
mSlideRightIn.setAnimationListener(animationListener);
mSlideRightOut.setAnimationListener(animationListener);
last_3_View.setOnTouchListener(null);
last_3_View.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
Intent intent = new Intent(GuideActivity.this, HomeActivity.class);
startActivity(intent);

}
});
}

@Override
public boolean onTouchEvent(MotionEvent event) {
return mGesture.onTouchEvent(event);
}
//手机屏幕手势监听器
class MyOnGestureListener implements OnGestureListener {

@Override
public boolean onSingleTapUp(MotionEvent e) {
return false;
}

@Override
public void onShowPress(MotionEvent e) {

}

@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2,
float distanceX, float distanceY) {
// 监听滚动事件
// Toast.makeText(MainActivity.this, "我被滚动了", 0).show();
return false;
}

@Override
public void onLongPress(MotionEvent e) {
// 监听长按事件
// Toast.makeText(MainActivity.this, "我被长按了", 0).show();
}

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
// 监听左右滑动事件
// Toast.makeText(MainActivity.this, "我被滑动了", 0).show();
// right to left swipe
if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE
&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
// Toast.makeText(MainActivity.this, "向左滑动了", 0).show();
if (viewFlipper.getCurrentView().getId() == 5) {

return false;
} else {
viewFlipper.setInAnimation(mSlideLeftIn);
viewFlipper.setOutAnimation(mSlideLeftOut);
viewFlipper.showNext();
return true;
}
// left to right swipe
} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE
&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
// Toast.makeText(MainActivity.this, "向右滑动了", 0).show();
if (viewFlipper.getCurrentView().getId() == 1) {
return false;
} else {
viewFlipper.setInAnimation(mSlideRightIn);
viewFlipper.setOutAnimation(mSlideRightOut);
viewFlipper.showPrevious();
return true;
}

}
return false;
}
@Override
public boolean onDown(MotionEvent e) {
// 监听按下事件
// Toast.makeText(MainActivity.this, "我被按下了", 0).show();
return false;
}
}
}

HomeActivity.java

package com.anjoyo.gesture;
import android.app.Activity;
import android.os.Bundle;

public class HomeActivity extends Activity {

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

}

（3）清单文件代码：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.anjoyo.gesture"
android:versionCode="1"
android:versionName="1.0" >
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".GuideActivity"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".HomeActivity"
android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >
</activity>
</application>
</manifest>