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;

        }

    }

到此源码完毕。

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

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

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

Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab
今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可 ...
Android中使用ViewPager实现屏幕页面切换和页面切换效果
之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpag ...
Android开发之ViewPager
什么是ViewPager? ViewPager是安卓3.0之后提供的新特性,继承自ViewGroup,专门用以实现左右滑动切换View的效果. 如果想向下兼容就必须要android-support-v ...
Android开发之ViewPager实现轮播图（轮播广告）效果的自定义View
最近开发中需要做一个类似京东首页那样的广告轮播效果,于是采用ViewPager自己自定义了一个轮播图效果的View. 主要原理就是利用定时任务器定时切换ViewPager的页面. 效果图如下: 主页面 ...
Android开发之ViewPager的简单使用
ViewPager是V4包中的,如果你的编译器敲不出ViewPager,那么你就需要添加,看下面: 第一步:点击+号第二步:选择第一个Library 第三步:添加这个包: 然后点击ok-->o ...
Android开发之ViewPager做新手引导界面
先看一下我们要开发的界面(三张图片,滑到最后一个会出现开始体验的Button,下面的小红点会跟着一起滑动): 首先看一下布局文件: <?xml version="1.0" e ...
Android开发之viewpager导报错误解决方法：错误代码 Caused by: java.lang.ClassNotFoundException: Didn't find class
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 Caused by: java.lang.ClassNotFoundException: Didn't ...
android开发之AlertDialog点击按钮之后不消失分类： android 学习笔记 2015-07-15 18:07 89人阅读评论(0) 收藏
最近有这样一个需求,我需要用户在一个弹出框里输入密码来验证,验证成功当然好说,但是如果验证失败则需要把alertdialog的标题改为"密码错误,请重新输入",并且这个alertd ...
Android开发之旅: Intents和Intent Filters（理论部分）
引言大部分移动设备平台上的应用程序都运行在他们自己的沙盒中.他们彼此之间互相隔离,并且严格限制应用程序与硬件和原始组件之间的交互. 我们知道交流是多么的重要,作为一个孤岛没有交流的东西,一定毫无意义 ...

随机推荐

C#学习笔记一:C#开发环境的设置
C#是.NET Framework的一部分,用于编写.NET应用程序. C#集成开发环境(IDE) 微软提供了以下C#编程开发工具: Visual Studio 2010 (VS) Visual C# ...
Delphi组件indy 10中IdTCPServer修正及SSL使用心得
indy 10终于随着Delphi2005发布了,不过indy套件在我的印象中总是复杂并且BUG不断,说实话,不是看在他一整套组件的面子上,我还是喜欢VCL原生的Socket组件,简洁,清晰.Indy ...
Android 你应该知道的学习资源进阶之路贵在坚持
1.国外教程网站 Android Developers Blog 不解释 vogella 很不错的网站,免费的,包含android的教程也比较全面,并且教程中经常引用大牛blog,会有很多意外发现.代 ...
linux操作Oracle导入导出dmp数据命令
--清空该表数据 :非索引清空TRUNCATE TABLE GE_INTERFACE_MESSAGE; --数据库导出指定导出某个用户的所有数据包括表索引序列存储过程函数等exp CX ...
cocos2d-x 添加自定义字体---中文,英文
1: 找到字体 xxx.ttf 2: 在xcode工程的 Info.plist文件中添加key Fonts provided by application, 或者 UIAppFonts(raw ...
GeoServer基础教程（一）：环境搭建篇
转自:http://imxz.me/tech/3sdev/installation-of-geoserver.html GeoServer的是一个基于Java的软件,它允许用户查看和编辑地理空间数据, ...
HDOJ --- 1160
FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
Dot Net设计模式—MVC模式
1 MVC设计模式简介 MVC结构是为那些需要为同样的数据提供多个视图的应用程序而设计的,它很好的实现了数据层与表示层的分离.MVC作为一种开发模型,通常用于分布式应用系统的设计和分析中,以及用于确定 ...
Bzoj 1657: [Usaco2006 Mar]Mooo 奶牛的歌声单调栈
1657: [Usaco2006 Mar]Mooo 奶牛的歌声 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 631 Solved: 445[Submi ...
Qualcomm Android display架构分析
Android display架构分析(一) http://blog.csdn.net/BonderWu/archive/2010/08/12/5805961.aspx http://hi.baidu ...

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

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

随机推荐

热门专题