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

最新推荐文章于 2024-05-07 12:10:04 发布
最新推荐文章于 2024-05-07 12:10:04 发布
阅读量4.8k 收藏 2
点赞数
分类专栏： android开发

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

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

Android Tab页面手势滑动切换以及动画效果

 

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

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

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

Android Tab页面手势滑动切换以及动画效果

 

三、我们先做界面，

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

01 <?xml version="1.0" encoding="utf-8"?>
02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03     xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus"
04     android:layout_width="fill_parent"
05     android:layout_height="fill_parent"
06     android:orientation="vertical" >
07  
08     <LinearLayout
09         android:id="@+id/linearLayout1"
10         android:layout_width="fill_parent"
11         android:layout_height="100.0dip"
12         android:background="#FFFFFF" >
13  
14         <TextView
15             android:id="@+id/text1"
16             android:layout_width="fill_parent"
17             android:layout_height="fill_parent"
18             android:layout_weight="1.0"
19             android:gravity="center"
20             android:text="页卡1"
21             android:textColor="#000000"
22             android:textSize="22.0dip" />
23  
24         <TextView
25             android:id="@+id/text2"
26             android:layout_width="fill_parent"
27             android:layout_height="fill_parent"
28             android:layout_weight="1.0"
29             android:gravity="center"
30             android:text="页卡2"
31             android:textColor="#000000"
32             android:textSize="22.0dip" />
33  
34         <TextView
35             android:id="@+id/text3"
36             android:layout_width="fill_parent"
37             android:layout_height="fill_parent"
38             android:layout_weight="1.0"
39             android:gravity="center"
40             android:text="页卡3"
41             android:textColor="#000000"
42             android:textSize="22.0dip" />
43     </LinearLayout>
44  
45     <ImageView
46         android:id="@+id/cursor"
47         android:layout_width="fill_parent"
48         android:layout_height="wrap_content"
49         android:scaleType="matrix"
50         android:src="@drawable/a" />
51  
52     <android.support.v4.view.ViewPager
53         android:id="@+id/vPager"
54         android:layout_width="wrap_content"
55         android:layout_height="wrap_content"
56         android:layout_gravity="center"
57         android:layout_weight="1.0"
58         android:background="#000000"
59         android:flipInterval="30"
60         android:persistentDrawingCache="animation" />
61  
62 </LinearLayout>

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

1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3     android:layout_width="fill_parent"
4     android:layout_height="fill_parent"
5     android:orientation="vertical"
6     android:background="#158684" >
7 </LinearLayout>

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

(1) 先来变量的定义

1 private ViewPager mPager;//页卡内容
2     private List<View> listViews; // Tab页面列表
3     private ImageView cursor;// 动画图片
4     private TextView t1, t2, t3;// 页卡头标
5     private int offset = 0;// 动画图片偏移量
6     private int currIndex = 0;// 当前页卡编号
7     private int bmpW;// 动画图片宽度
(2) 初始化头标
01 /**
02       * 初始化头标
03  */
04      private void InitTextView() {
05          t1 = (TextView) findViewById(R.id.text1);
06          t2 = (TextView) findViewById(R.id.text2);
07          t3 = (TextView) findViewById(R.id.text3);
08   
09          t1.setOnClickListener(new MyOnClickListener(0));
10          t2.setOnClickListener(new MyOnClickListener(1));
11          t3.setOnClickListener(new MyOnClickListener(2));
12      }
01 /**
02       * 头标点击监听
03  */
04      public class MyOnClickListener implements View.OnClickListener {
05          private int index = 0;
06   
07          public MyOnClickListener(int i) {
08              index = i;
09          }
10   
11          @Override
12          public void onClick(View v) {
13              mPager.setCurrentItem(index);
14          }
15      };

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

 

(3) 初始化页卡内容区

01 /**
02       * 初始化ViewPager
03  */
04      private void InitViewPager() {
05          mPager = (ViewPager) findViewById(R.id.vPager);
06          listViews = new ArrayList<View>();
07          LayoutInflater mInflater = getLayoutInflater();
08          listViews.add(mInflater.inflate(R.layout.lay1, null));
09          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      }

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

01 /**
02       * ViewPager适配器
03  */
04      public class MyPagerAdapter extends PagerAdapter {
05          public List<View> mListViews;
06   
07          public MyPagerAdapter(List<View> mListViews) {
08              this.mListViews = mListViews;
09          }
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) 初始化动画

01 /**
02       * 初始化动画
03  */
04      private void InitImageView() {
05          cursor = (ImageView) findViewById(R.id.cursor);
06          bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a)
07                  .getWidth();// 获取图片宽度
08          DisplayMetrics dm = new DisplayMetrics();
09          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      }

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

实现页卡切换监听

查看源码
打印 ?
01 /**
02       * 页卡切换监听
03  */
04      public class MyOnPageChangeListener implements OnPageChangeListener {
05   
06          int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
07          int two = one * 2;// 页卡1 -> 页卡3 偏移量
08   
09          @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      }

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



sky837
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于Android的ViewPager动画特效实现页面左右滑动效果
qq_36483174的博客
06-04 1635
基于Android的ViewPager动画特效实现页面左右滑动效果 第一步：打开Android Studio新建一个Android项目 第二部：修改activity_main.xml文件代码 <android.support.v4.view.ViewPager android:id="@+id/vp_main" android:layout_width="matc...
Android动画全篇系列（十二）——ViewPager滑动动画
01-03
文章目录一、前言二、实现1、参数的介绍2、实现三、ViewPager2四、小结 一、前言 ViewPager的作用很多，一般会结合Fragment来构成能左右滑动的视图结构。ViewPager还能够撸成一个Banner轮播图，只需要自定义一个PageAdapter即可。 当我们将ViewPager与Fragment相结合，我们不需要太多花里胡哨的滑动效果，简单的左右滑动就能够满足我们的要求。 而ViewPager运用于轮播图，或者其他类似的滑动展示的效果时，我们不拘泥于普通的滑动效果，非得实现一些卓尔不群的效果。 二、实现 1、参数的介绍 我们只需简单的调用viewPager.setPage
Android Viewpager滑动背景颜色变化的动画
{丸の子}
05-23 248
效果: [img]http://dl2.iteye.com/upload/attachment/0097/4226/e661d23a-3ed0-3638-98b7-7c39847438fa.gif[/img] [code="java"] package cn.taurusxi.guidebackgroundcoloranimation.sample; import android....
学不动也要学！深入了解ViewPager2(1)
最新发布
2401_84149814的博客
05-07 964
item_page中代码如下： val viewPager2 = findViewById(R.id.view_pager) val myAdapter = MyAdapter() myAdapter.setList(data) viewPager2.adapter = myAdapter很简单就完成了一个ViewPager的功能，来看下效果怎么样： 接下来我们通过一行代码为其设置竖直滑动viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL竖直滑动
android viewpager各种滑动动画
12-10
一款android viewpager 自定义滑动动画效果，很多种效果有你想要的，还可以理解之后自己写出自己想要的效果，很简单，调用就一段代码，不影响性能
Android使用ViewPager实现屏幕滑动效果
08-29
主要为大家详细介绍了Android使用ViewPager实现屏幕滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android官方提供的两种viewpager滑动动画
坚持自己!
04-06 612
1.ZoomOutPageTransformer package com.gelonghui.glhapp.view; import android.view.View; public class ZoomOutPageTransformer implements android.support.v4.view.ViewPager.PageTransformer { private
ViewPager滑动动画
~~代码中的南城故事，南城故事里的中分女王。
05-19 493
ViewPager在项目中用的地方很多，有默认的滑动动画，下面介绍一下怎么自定义动画 public void setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) { boolean hasTransformer = transformer != null; boolean needsPopulate = hasTransformer != (thi
Android使用ViewPager实现左右滑动效果
热门推荐
卡尔
10-06 1万+
使用ViewPager用使用android的兼容包，android-support-v4.jar。 工程源代码下载：点击下载 在res/layout下建立三个文件first.xml,second.xml,third.xml，随便加入一些控件 main.xml文件的布局如下： <FrameLayout xmlns:android="http://schemas.android.com
Android开发：ViewPager实现屏幕滑动，及定义切换动画（实例）
BoCong-Deng的博客
10-22 668
在两个完整的界面之间进行切换是非常常见的效果，Android提供的ViewPager使我们实现起来非常的便捷，在这里，我将讲解如何用ViewPager实现切换，以及如何自定义切换的动画效果。 一、实现屏幕切换 其实非常简单，实际上我们只需要四个文件即可实现效果，首先创建一个Fragment所使用的布局文件layout/fragment_screen_slide_page，布局文件中包含一个显示...
android切换页面上滑动动画,Android ViewPager多页面滑动切换以及动画效果
weixin_35182991的博客
05-26 274
评论#28楼[楼主]2012-06-01 14:27D.Winter@孤寒江雪我猜 要么在头尾各再加入一个页卡在页卡切换监听中判断，如果选中了头尾的页卡，就返回到相邻的那个页卡。头尾页卡的界面可以只是个背景色。#29楼2012-07-05 14:18olue正好要用到，帮助很大，楼主辛苦了#30楼2012-07-05 15:41olue@BottleMan我也发现不能添加button的事件，...
android 多条滑动动画,Android中ViewPager显示3个条目及滑动动画
weixin_35157304的博客
05-26 613
在这里我们看到的一个很重要的核心的技术点是 android:clipChildren="false" 这个属性的意思是：父容器不要去切割子View,也就是说，子View即使超出了一些父容器的限制，也是可以显示出来那一部分的！但是如何实现一个item中显示出2个相邻的item呢？也就是通过设置这个东西就可以显示出来，让ViewPager都进行marginmViewPager.setPageMar...
Android ViewPager多页面滑动切换以及动画效果
商清艾专栏
07-31 781
viewpage实现多页面滑动是通过pageAdapter或FragmentPagerAdapter来实现页面的滑动切换 有的需要类似图片的三角形的滑动动画三角形是更具页面滑动而滑动的并且指定在相应的选项卡下 功能的实现首先从android xml文件布局开始贴代码： <LinearLayout xmlns:android="http://schemas.android.com/apk
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多页面滑动切换以及动画效果的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值