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

最新推荐文章于 2022-12-15 20:55:56 发布
最新推荐文章于 2022-12-15 20:55:56 发布
阅读量971 收藏
点赞数
分类专栏： Android 文章标签： android

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


雜貨鋪老闆
关注
专栏目录
Android中使用ViewPager实现一屏多页面的功能
tangzhide的博客
08-01 3113
效果图【录制后使用扣扣秀视频制作的gif，看见水印请别见怪】：实现的主要注意点【关于view pager的使用就忽略了】1、 Adapter需要重写函数—— @Override public float getPageWidth(int position)；2、clipChildren属性的使用—-决定了一屏三页还是一屏两页，三页的就比如爱奇艺的横向滑动的左右两边有相互接
Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用）
09-02 576
[置顶] Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源码 分类： android2014-04-29 19:24 3196人阅读 评论(23) 收藏 举报 Scroller仿源码窗帘登录     在android学习中，动作交互是软件中重要的一部分，其中的Scroller就是提供了拖动效果的类，在网上，比如说一
Android -多页面开发
NervousDing的博客
05-13 2024
1.清单文件介绍  1.1如果想让你的应用程序有多个启动入口应该做如下配置: &lt;activity android:name=".Main2Activity"&gt; &lt;intent-filter&gt; &lt;action android:name="android.intent.action.MAIN" /&gt; ...
android系统launcher,仿android系统Launcher界面
weixin_42508903的博客
05-27 317
写的我要吐血了。。。是不是我太菜了？放出代码.....res-->layout-->activity_main.xmlxmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent">android:id="@+...
android两个view切换动画,Android编程实现ViewPager多页面滑动切换及动画效果的方法...
weixin_42283048的博客
05-26 709
本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法。分享给大家供大家参考，具体如下：一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的头标进行切换。与此同方式，白色横条会移动到相应的页卡头标下。这是一个动画效果，白条是缓慢滑动过去的。好了，接下来我们就来实现它。二、在开始前，我们先要认识一个控件，ViewPager。它是...
Android的ViewPager多页面切换动画（仿Launcher）效果
06-17
本教程将详细讲解如何利用ViewPager实现类似Android Launcher和QQ多标签页的页面切换动画。 首先，我们需要了解ViewPager的基本用法。ViewPager继承自 ViewGroup，它能够自动管理其子View的布局和显示，用户可以...
安卓Launcher桌面相关-使用ViewPager实现高仿launcher拖动效果.rar
07-29
ViewPager是Android SDK中的一个强大视图，主要用于展示多个页面并允许用户左右滑动切换这些页面。在实现Launcher桌面的滑动效果时，我们可以将每个主屏幕看作ViewPager的一个页面，通过滑动来切换不同的主屏幕。 1...
Android原生ViewPager控件实现卡片翻动效果
08-27
Android原生ViewPager控件实现卡片翻动效果 Android原生ViewPager控件是一种常用的UI控件，可以实现卡片翻动效果。本文将详细介绍如何使用Android原生ViewPager控件实现卡片翻动效果的步骤和代码实现。 一、了解...
基于Android的ViewPager动画特效实现页面左右滑动效果
qq_36483174的博客
06-04 1682
基于Android的ViewPager动画特效实现页面左右滑动效果 第一步：打开Android Studio新建一个Android项目 第二部：修改activity_main.xml文件代码 <android.support.v4.view.ViewPager android:id="@+id/vp_main" android:layout_width="matc...
使用ViewPager实现高仿launcher左右拖动效果
09-05
ViewPager是Android开发中用于实现类似页面翻书效果的组件，它是Google提供的，包含在android-support-v4.jar库中。ViewPager主要用于在屏幕上左右滑动切换不同页面，常用于实现启动器(Launcher)、相册、指南页等...
ViewPager实现多页面的滑动切换
08-16
在本示例中，我参考了几个demo整理出来的viewpager的最基本用法，制作了一个类似新闻导航功能的界面，每个页面的下方有对应的项目符号，当页面进行切换的时候项目符号也随之变化
android仿launcher主界面效果
08-24
仿launcher主界面滚动效果，引用android第三包更快的实现效果
弹性效果的ViewPager的小Demo
01-11
欢迎下载学习交流。 这是我的博客地址 http://blog.csdn.net/u010386612
android多页面切换大全，8种效果
11-18
本文实现ViewPager切换的7中常用动画，实现过程： 1、ViewPager有提供一个接口PageTransformer，ViewPager在做页面切换时（onPageScrolled方法）会调用PageTransformer，来调用我们自定义的特效，逻辑关系如图： 2、动画的实现： 从Android3.1开始，View新增了如下方法： setsetAlpha：透明度变化； setTranslation：位置变化； setScale：缩放变化； setRotation：角度变化； 我们可以用这些方法的组合来实现各种View切换特效； 那是不是说Android3.1之前的版本就没办法使用这些方法呢？当然不是，我们有万能的github，万能的开源项目：https://github.com/JakeWharton/NineOldAndroids 他提供了我们在3.1以下版本实现上述方法的调用，为开源致敬，为共享致敬！！！ 下面来看一下例子，立方体效果：
launcher3切屏动态效果
04-07
launcher3动画效果源码，只供学习使用。
Android launcher 桌面抽屉切换动画
热门推荐
极致的专注 无限的热情
11-13 1万+
版本：1.0日期：2014.11.10 2014.11.11版权：© 2014 kince 转载注明出处一、概述    桌面抽屉之间的切换时Android用户经常触发的行为，好的交互会给用户一个舒适的体验。百度桌面默认是随机切换不同的动画，Android默认是一个大小和透明的渐变的动画，如下：    下面开始分析在Launcher2（KitKat）的源码里面是如何实现这种效果的。二、下面列举相关的
android ViewPager实现页面切换
最新发布
qq_53077129的博客
12-15 247
android页面切换
成功开发Android app-7（多页面、添加事件、监听、动画）
Slow down your pace
08-03 377
基于Andrroid Studio 开发 Android app
Android 仿Launcher3实现app图标随意拖拽交换位置功能
安卓兼职framework和app工程师的博客
08-27 1960
在最近app的Launcher开发中，要实现仿Launcher3任意拖拽app图标后可以移动，然后和其他app图标交换位置拖动到哪个app图标附近就占用哪个位置，被占用的位置移动到下一个位置的功能开发
Android ViewPager 实现引导页左右滑动效果教程
在Android开发中，利用ViewPager实现类似Launcher（桌面）的左右滑动导航功能是一个常见的设计策略，尤其是在引导用户熟悉应用功能时。ViewPager是由Google提供的一个强大的组件，用于创建平滑的视图切换，常用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值