Android开发之ViewPager实现多页面切换及动画效果（仿Android的Launcher效果）
Android开发中经常会有引导页或者切换页面等效果，本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果。源码地址在文章最后给出下载。
效果图如下：
1.Viewpager是个Android自带的View视图控件，要使用它，必须导入这个附加包android-support-v4.jar，如何导入到家必应搜索一下就知道了。
2.界面设计：
其实很简单就是一个简单页面，里面放一个ViewPager，
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="fill_parent" android:layout_height="fill_parent" > <android.support.v4.view.PagerTabStrip android:id="@+id/pagertab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top" android:background="#8B00FF" android:textColor="#FFF" /> </android.support.v4.view.ViewPager> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:id="@+id/viewGroup" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="30dp" android:gravity="center_horizontal" android:orientation="horizontal" > </LinearLayout> </RelativeLayout> </FrameLayout>
其次就是 5个页面，放在ViewPager里的，这里就随便举例一个页面源码：
<?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:background="@drawable/guide02" android:gravity="center_horizontal" android:orientation="horizontal" > <ImageView android:id="@+id/translate1" android:layout_gravity="center" android:layout_width="96dp" android:layout_height="192dp" android:src="@drawable/translate1" /> <ImageView android:id="@+id/translate2" android:layout_gravity="center" android:layout_width="96dp" android:layout_height="192dp" android:layout_marginLeft="5dp" android:src="@drawable/scale" android:visibility="gone" /> <ImageView android:id="@+id/translate3" android:layout_gravity="center" android:layout_width="96dp" android:layout_height="192dp" android:layout_marginLeft="5dp" android:src="@drawable/translate2" android:visibility="gone" /> </LinearLayout>
该页面里的三个图片所对应的动画效果代码如下：
<translate android:duration="800" android:fromXDelta="-100%p" /> <translate android:duration="800" android:fromYDelta="-100%p" android:interpolator="@android:anim/bounce_interpolator" /> <translate android:duration="800" android:fromXDelta="100%p" />
3.Java代码设计与实现：
（1）View等相关变量定义：
ViewPager viewPager; ArrayList<View> listViews; ViewGroup main, group; ImageView imageView; ImageView[] imageViews; ImageView imgv; Animation[] animations; Animation animTranslate2; Animation animTranslate3; List<String> listTitles ;
（2）变量初始化工作：
this.requestWindowFeature(Window.FEATURE_NO_TITLE); LayoutInflater inflater = getLayoutInflater(); listViews = new ArrayList<View>(); listViews.add(inflater.inflate(R.layout.item1, null)); listViews.add(inflater.inflate(R.layout.item2, null)); listViews.add(inflater.inflate(R.layout.item3, null)); listViews.add(inflater.inflate(R.layout.item4, null)); listViews.add(inflater.inflate(R.layout.item5, null)); imageViews = new ImageView[listViews.size()]; ViewGroup main = (ViewGroup) inflater.inflate(R.layout.main, null); // group是R.layou.main中的负责包裹小圆点的LinearLayout. ViewGroup group = (ViewGroup) main.findViewById(R.id.viewGroup); viewPager = (ViewPager) main.findViewById(R.id.viewPager); for (int i = 0; i < listViews.size(); i++) { imageView = new ImageView(MainActivity.this); imageView.setLayoutParams(new LayoutParams(60, 60)); imageView.setPadding(10, 0, 10, 0); imageViews[i] = imageView; if (i == 0) { // 默认进入程序后第一张图片被选中; imageViews[i].setImageResource(R.drawable.guide_dot_white); } else { imageViews[i].setImageResource(R.drawable.guide_dot_black); } group.addView(imageView); } listTitles = new ArrayList<String>(); listTitles.add("页面1"); listTitles.add("页面2"); listTitles.add("页面3"); listTitles.add("页面4"); listTitles.add("页面5"); setContentView(main); viewPager.setAdapter(new MyAdapter(listTitles)); viewPager.setOnPageChangeListener(new MyListener());
（3）动画初始化以及监听器设定：
animations = new Animation[listViews.size()]; animations[0]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale); animations[1]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate1); animations[2]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate); animations[3]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.demo); animTranslate2=AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate2); animTranslate3=AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate3); animations[1].setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation arg0) { // TODO Auto-generated method stub listViews.get(1).findViewById(R.id.translate2).setVisibility(View.INVISIBLE); listViews.get(1).findViewById(R.id.translate3).setVisibility(View.INVISIBLE); } @Override public void onAnimationRepeat(Animation arg0) { // TODO Auto-generated method stub } @Override public void onAnimationEnd(Animation arg0) { // TODO Auto-generated method stub listViews.get(1).findViewById(R.id.translate2).setVisibility(View.VISIBLE); listViews.get(1).findViewById(R.id.translate2).startAnimation(animTranslate2); } }); animTranslate2.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation arg0) { // TODO Auto-generated method stub //list.get(1).findViewById(R.id.translate3).setVisibility(View.INVISIBLE); } @Override public void onAnimationRepeat(Animation arg0) { // TODO Auto-generated method stub } @Override public void onAnimationEnd(Animation arg0) { // TODO Auto-generated method stub listViews.get(1).findViewById(R.id.translate3).setVisibility(View.VISIBLE); listViews.get(1).findViewById(R.id.translate3).startAnimation(animTranslate3); } });
（4）ViewPager的自定义适配器：
animations = new Animation[listViews.size()]; animations[0]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale); animations[1]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate1); animations[2]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate); animations[3]=AnimationUtils.loadAnimation(MainActivity.this, R.anim.demo); animTranslate2=AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate2); animTranslate3=AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate3); animations[1].setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation arg0) { // TODO Auto-generated method stub listViews.get(1).findViewById(R.id.translate2).setVisibility(View.INVISIBLE); listViews.get(1).findViewById(R.id.translate3).setVisibility(View.INVISIBLE); } @Override public void onAnimationRepeat(Animation arg0) { // TODO Auto-generated method stub } @Override public void onAnimationEnd(Animation arg0) { // TODO Auto-generated method stub listViews.get(1).findViewById(R.id.translate2).setVisibility(View.VISIBLE); listViews.get(1).findViewById(R.id.translate2).startAnimation(animTranslate2); } }); animTranslate2.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation arg0) { // TODO Auto-generated method stub //list.get(1).findViewById(R.id.translate3).setVisibility(View.INVISIBLE); } @Override public void onAnimationRepeat(Animation arg0) { // TODO Auto-generated method stub } @Override public void onAnimationEnd(Animation arg0) { // TODO Auto-generated method stub listViews.get(1).findViewById(R.id.translate3).setVisibility(View.VISIBLE); listViews.get(1).findViewById(R.id.translate3).startAnimation(animTranslate3); } });
（5）实现页面切换动作监听：
class MyListener implements OnPageChangeListener { @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub /*list.get(1).findViewById(R.id.translate1).setVisibility(View.INVISIBLE); list.get(1).findViewById(R.id.translate2).setVisibility(View.INVISIBLE); list.get(1).findViewById(R.id.translate3).setVisibility(View.INVISIBLE);*/ } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageSelected(int arg0) { Toast.makeText(MainActivity.this, ""+(arg0+1), Toast.LENGTH_SHORT).show(); for (int i = 0; i < imageViews.length; i++) { imageViews[arg0].setImageResource(R.drawable.guide_dot_white); if (arg0 != i) { imageViews[i].setImageResource(R.drawable.guide_dot_black); } } Log.v("viewpager", ""+arg0+1); if(arg0 != 4) playAnim(arg0); } } private void playAnim(final int n){ switch(n){ case 0: listViews.get(n).findViewById(R.id.scale).startAnimation(animations[n]); break; case 1: listViews.get(n).findViewById(R.id.translate1).startAnimation(animations[n]); break; case 2: listViews.get(n).findViewById(R.id.rotate).startAnimation(animations[n]); break; case 3: listViews.get(n).findViewById(R.id.demo).startAnimation(animations[n]); break; } }
到此源码完毕。
