Android ViewPager多页面滑动切换以及动画效果

最新推荐文章于 2024-09-23 13:56:36 发布
最新推荐文章于 2024-09-23 13:56:36 发布
阅读量629 收藏
点赞数
分类专栏： android app
本文详细介绍了如何使用Android的ViewPager控件和动画实现滑动Tab栏的效果，包括界面设计、代码实现及初始化工作。通过实例演示，帮助开发者轻松掌握这一常见功能的实现方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

http://www.cnblogs.com/dwinter/archive/2012/02/27/2369590.html


一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的头标进行切换。与此同方式，

白色横条会移动到相应的页卡头标下。这是一个动画效果，白条是缓慢滑动过去的。好了，接下来我们就来实现它。

 

二、在开始前，我们先要认识一个控件，ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。

这个附加包是android-support-v4.jar，在最后的源码中会提供给大家，在libs文件夹中。当然你也可以自己从网上搜索最新的版本。

找到它后，我们需要在项目中添加

 

三、我们先做界面，

界面设计很简单，第一行三个头标，第二行动画图片，第三行页卡内容展示。

复制代码 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="100.0dip"
        android:background="#FFFFFF" >

        <TextView
            android:id="@+id/text1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="页卡1"
            android:textColor="#000000"
            android:textSize="22.0dip" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="页卡2"
            android:textColor="#000000"
            android:textSize="22.0dip" />

        <TextView
            android:id="@+id/text3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="页卡3"
            android:textColor="#000000"
            android:textSize="22.0dip" />
    </LinearLayout>

    <ImageView
        android:id="@+id/cursor"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@drawable/a" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:background="#000000"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />

</LinearLayout>
复制代码


 

我们要展示三个页卡，所以还需要三个页卡内容的界面设计，这里我们只设置了背景颜色，能起到区别作用即可。

复制代码 
<?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"
    android:background="#158684" >
</LinearLayout>
复制代码

 

四、代码部分要进行初始化的工作

(1) 先来变量的定义

复制代码 
    private ViewPager mPager;//页卡内容
    private List<View> listViews; // Tab页面列表
    private ImageView cursor;// 动画图片
    private TextView t1, t2, t3;// 页卡头标
    private int offset = 0;// 动画图片偏移量
    private int currIndex = 0;// 当前页卡编号
    private int bmpW;// 动画图片宽度
复制代码

 

(2) 初始化头标

复制代码 
 1     /**
 2      * 初始化头标
 3 */
 4     private void InitTextView() {
 5         t1 = (TextView) findViewById(R.id.text1);
 6         t2 = (TextView) findViewById(R.id.text2);
 7         t3 = (TextView) findViewById(R.id.text3);
 8 
 9         t1.setOnClickListener(new MyOnClickListener(0));
10         t2.setOnClickListener(new MyOnClickListener(1));
11         t3.setOnClickListener(new MyOnClickListener(2));
12     }
复制代码
复制代码 
 1     /**
 2      * 头标点击监听
 3 */
 4     public class MyOnClickListener implements View.OnClickListener {
 5         private int index = 0;
 6 
 7         public MyOnClickListener(int i) {
 8             index = i;
 9         }
10 
11         @Override
12         public void onClick(View v) {
13             mPager.setCurrentItem(index);
14         }
15     };
复制代码

相信大家看后都没什么问题，点击第几个，就展示第几个页卡内容。

 

(3) 初始化页卡内容区

复制代码 
 1     /**
 2      * 初始化ViewPager
 3 */
 4     private void InitViewPager() {
 5         mPager = (ViewPager) findViewById(R.id.vPager);
 6         listViews = new ArrayList<View>();
 7         LayoutInflater mInflater = getLayoutInflater();
 8         listViews.add(mInflater.inflate(R.layout.lay1, null));
 9         listViews.add(mInflater.inflate(R.layout.lay2, null));
10         listViews.add(mInflater.inflate(R.layout.lay3, null));
11         mPager.setAdapter(new MyPagerAdapter(listViews));
12         mPager.setCurrentItem(0);
13         mPager.setOnPageChangeListener(new MyOnPageChangeListener());
14     }
复制代码

我们将三个页卡界面装入其中，默认显示第一个页卡。这里我们还需要实现一个适配器。

复制代码 
 1 /**
 2      * ViewPager适配器
 3 */
 4     public class MyPagerAdapter extends PagerAdapter {
 5         public List<View> mListViews;
 6 
 7         public MyPagerAdapter(List<View> mListViews) {
 8             this.mListViews = mListViews;
 9         }
10 
11         @Override
12         public void destroyItem(View arg0, int arg1, Object arg2) {
13             ((ViewPager) arg0).removeView(mListViews.get(arg1));
14         }
15 
16         @Override
17         public void finishUpdate(View arg0) {
18         }
19 
20         @Override
21         public int getCount() {
22             return mListViews.size();
23         }
24 
25         @Override
26         public Object instantiateItem(View arg0, int arg1) {
27             ((ViewPager) arg0).addView(mListViews.get(arg1), 0);
28             return mListViews.get(arg1);
29         }
30 
31         @Override
32         public boolean isViewFromObject(View arg0, Object arg1) {
33             return arg0 == (arg1);
34         }
35 
36         @Override
37         public void restoreState(Parcelable arg0, ClassLoader arg1) {
38         }
39 
40         @Override
41         public Parcelable saveState() {
42             return null;
43         }
44 
45         @Override
46         public void startUpdate(View arg0) {
47         }
48     }
复制代码

这里我们实现了各页卡的装入和卸载

 

(3) 初始化动画

复制代码 
 1     /**
 2      * 初始化动画
 3 */
 4     private void InitImageView() {
 5         cursor = (ImageView) findViewById(R.id.cursor);
 6         bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a)
 7                 .getWidth();// 获取图片宽度
 8         DisplayMetrics dm = new DisplayMetrics();
 9         getWindowManager().getDefaultDisplay().getMetrics(dm);
10         int screenW = dm.widthPixels;// 获取分辨率宽度
11         offset = (screenW / 3 - bmpW) / 2;// 计算偏移量
12         Matrix matrix = new Matrix();
13         matrix.postTranslate(offset, 0);
14         cursor.setImageMatrix(matrix);// 设置动画初始位置
15     }
复制代码

根据屏幕的分辨率和图片的宽度计算动画移动的偏移量

实现页卡切换监听

复制代码 
 1 /**
 2      * 页卡切换监听
 3 */
 4     public class MyOnPageChangeListener implements OnPageChangeListener {
 5 
 6         int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
 7         int two = one * 2;// 页卡1 -> 页卡3 偏移量
 8 
 9         @Override
10         public void onPageSelected(int arg0) {
11             Animation animation = null;
12             switch (arg0) {
13             case 0:
14                 if (currIndex == 1) {
15                     animation = new TranslateAnimation(one, 0, 0, 0);
16                 } else if (currIndex == 2) {
17                     animation = new TranslateAnimation(two, 0, 0, 0);
18                 }
19                 break;
20             case 1:
21                 if (currIndex == 0) {
22                     animation = new TranslateAnimation(offset, one, 0, 0);
23                 } else if (currIndex == 2) {
24                     animation = new TranslateAnimation(two, one, 0, 0);
25                 }
26                 break;
27             case 2:
28                 if (currIndex == 0) {
29                     animation = new TranslateAnimation(offset, two, 0, 0);
30                 } else if (currIndex == 1) {
31                     animation = new TranslateAnimation(one, two, 0, 0);
32                 }
33                 break;
34             }
35             currIndex = arg0;
36             animation.setFillAfter(true);// True:图片停在动画结束位置
37             animation.setDuration(300);
38             cursor.startAnimation(animation);
39         }
40 
41         @Override
42         public void onPageScrolled(int arg0, float arg1, int arg2) {
43         }
44 
45         @Override
46         public void onPageScrollStateChanged(int arg0) {
47         }
48     }
复制代码

 

五、打完收工，快来看看自己的劳动成果吧


源码分享：http://115.com/file/dpi0unyg

作品发布：dwintergame.com 
个人开发盈利方案： 传送门 
本文版权归作者D.Winter和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 


android两个view切换动画,Android编程实现ViewPager多页面滑动切换及动画效果的方法...
weixin_42283048的博客
05-26 760
本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法。分享给大家供大家参考，具体如下：一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的头标进行切换。与此同方式，白色横条会移动到相应的页卡头标下。这是一个动画效果，白条是缓慢滑动过去的。好了，接下来我们就来实现它。二、在开始前，我们先要认识一个控件，ViewPager。它是...
android viewpager各种滑动动画
12-10
一款android viewpager 自定义滑动动画效果，很多种效果有你想要的，还可以理解之后自己写出自己想要的效果，很简单，调用就一段代码，不影响性能
ViewPager的切换动画
weixin_42643321的博客
03-23 901
ViewPager切换动画
Android动画全篇系列（十二）——ViewPager滑动动画
01-03
文章目录一、前言二、实现1、参数的介绍2、实现三、ViewPager2四、小结 一、前言 ViewPager的作用很多，一般会结合Fragment来构成能左右滑动的视图结构。ViewPager还能够撸成一个Banner轮播图，只需要自定义一个PageAdapter即可。 当我们将ViewPager与Fragment相结合，我们不需要太多花里胡哨的滑动效果，简单的左右滑动就能够满足我们的要求。 而ViewPager运用于轮播图，或者其他类似的滑动展示的效果时，我们不拘泥于普通的滑动效果，非得实现一些卓尔不群的效果。 二、实现 1、参数的介绍 我们只需简单的调用viewPager.setPage
Android官方提供的两种viewpager滑动动画
坚持自己!
04-06 655
1.ZoomOutPageTransformer package com.gelonghui.glhapp.view; import android.view.View; public class ZoomOutPageTransformer implements android.support.v4.view.ViewPager.PageTransformer { private
ViewPager Animations: Customizing Swipes in Android
最新发布
weixin_42298164的博客
09-23 759
本文还有配套的精品资源，点击获取 简介：ViewPager在Android开发中用于实现页面的左右滑动浏览效果，如轮播图或Tab切换。本文将介绍如何为ViewPager添加动画效果，提高用户体验。我们将探讨使用PageTransformer接口来自定义页面转换动画，并通过代码示例展示如何实现淡入淡出效果和利用ObjectAnimator进行复杂的动画设计。需要注意的是，这些...
Android ViewPager切换的七种动画
01-05
Android ViewPager切换的七种动画，分别是：深入浅出，立方体，旋转，左右折叠，右上角进入，右下角进入和淡入淡出。
ViewPager动画切换效果
10-23
这个就是Viewpager的效果，在上下也滑动之间有一个动画效果，平时使用viewpager是一般不设置，实际上也可以通过实现自ViewPager.PageTransformer 来做出完全不同的切换动画效果。官方给出的缩放效果和深度效果的ViewPager.PageTransformer与默认的效果很不同。仅支持3.0以上的版本
Android ViewPager实现动画切换效果
08-31
主要为大家详细介绍了Android ViewPager实现动画切换效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【Android】ViewPager
2303_79296612的博客
09-13 2558
ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view，用于允许用户在几个页面（或称为碎片）之间左右滑动切换。它通常用于创建像画廊或轮播图那样的用户体验。1）ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。2）ViewPager类需要一个PagerAdapter适配器类给它提供数据。
Android 自定义ViewPager酷炫切换动画
ckwccc的博客
01-19 1096
首先看一下ViewPager自带的滑动效果：那么如何打造属于自己的切换效果呢？ 当viewpager上一个可见或依附的页面发生了滚动事件就会调用PageTransformer，这让应用可以使用自定义transformation让viewpager某一个页面视图上实现某些特定的动画属性。只需要一行代码就可以实现自定义动画切换功能， 类似于下面的代码：mPager.setPageTransforme
Android开发-使用ViewPager2控件实现抖音视频上下滑动播放功能
_彼岸雨敲窗_的博客
03-01 9895
前 言 目前抖音 App 比较火，大家在玩 Android 版的抖音的过程中有没有发现，当你在刷抖音视频时手指上滑拉取下一视频，大家有没有觉得拉取视频很顺畅，而且视频能立即播放，当手指下滑拉取上一视频，效果也一样。其实这背后都是 ViewPager2 控件的功劳，当用户启动到抖音视频页面时，ViewPager2 除了加载当前的视频界面外还自动加载下一个视频界面的操作，所以大家有没有感觉首次进入到视频页面加载视频时等待的时间很长，这其实是 ViewPager2 同时加载当前视频和下一个视频的原因。当用户上
Android:ViewPager 切换动画效果
diaolapei9880的博客
11-25 184
ViewPager 可以设置不同页面切换效果，通过方法setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 实现。 其中第二个参数PageTransformer 是关键 PageTransformer 是一个接口，只有一个方法 transformPage() ，参数：第一个是vie...
Android实现ViewPager视差动画效果及背景渐变过渡
热门推荐
我是紫色紫色的专栏
11-09 6万+
在上一篇文章（TabLayout与ViewPager配合使用踩坑总结）中我记录了TabLayout搭配ViewPager使用过程中的踩坑过程，那么这一篇文章我来写一下ViewPager切换的视差动画效果及背景渐变过渡是如何实现的！ 一、视差动画实现 惯例首先来看看ViewPager的切换效果： 注意下方的三行文字，在切换的时候是有一个视觉差的，也就是它们仨不是以同一个偏移量移动，可以看到名称那一...
Android——ViewPager多页面滑动切换以及动画效果
05-27
ViewPager是一个Android中的View容器，可以让用户在多个页面之间进行滑动切换。要实现多页面滑动切换以及动画效果，可以按照以下步骤： 1. 在XML布局文件中添加ViewPager控件，并添加对应的布局文件，例如： ``` <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2. 在Java代码中为ViewPager设置Adapter，用于显示多个页面。例如： ``` ViewPager viewPager = findViewById(R.id.viewPager); MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); ``` 其中，MyPagerAdapter是自定义的PagerAdapter类，需要继承自FragmentPagerAdapter或FragmentStatePagerAdapter。 3. 在自定义的PagerAdapter类中实现getItem()方法，用于返回每个页面的Fragment实例。例如： ``` @Override public Fragment getItem(int position) { switch (position) { case 0: return new Fragment1(); case 1: return new Fragment2(); case 2: return new Fragment3(); default: return null; } } ``` 其中，Fragment1、Fragment2、Fragment3是自定义的Fragment类，用于显示对应页面的内容。 4. 如果需要添加页面切换的动画效果，可以在Java代码中为ViewPager设置PageTransformer。例如： ``` viewPager.setPageTransformer(true, new DepthPageTransformer()); ``` 其中，DepthPageTransformer是自定义的PageTransformer类，用于实现页面切换时的动画效果。可以参考以下代码示例： ``` public class DepthPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.75f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0f); } else if (position <= 0) { // [-1,0] // Use the default slide transition when moving to the left page view.setAlpha(1f); view.setTranslationX(0f); view.setScaleX(1f); view.setScaleY(1f); } else if (position <= 1) { // (0,1] // Fade the page out. view.setAlpha(1 - position); // Counteract the default slide transition view.setTranslationX(pageWidth * -position); // Scale the page down (between MIN_SCALE and 1) float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0f); } } } ``` 以上就是实现Android中ViewPager多页面滑动切换以及动画效果的步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值