Android开发之ViewPager实现多页面切换及动画效果（仿Android的Launcher效果）

http://www.cnblogs.com/JczmDeveloper/p/3792832.html

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;        }    }

到此源码完毕。

下载地址1：http://download.csdn.net/detail/jczmdeveloper/7511223

下载地址2：http://download.csdn.net/detail/jczmdeveloper/7511147

更多相关文章

随机推荐