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

最新推荐文章于 2024-10-13 12:12:26 发布
最新推荐文章于 2024-10-13 12:12:26 发布
阅读量805 收藏
点赞数
分类专栏： Activity android 手势 文章标签： android Activity 手势
android 同时被 3 个专栏收录
81 篇文章 0 订阅
订阅专栏
Activity
10 篇文章 0 订阅
订阅专栏
手势
6 篇文章 0 订阅
订阅专栏

导读：一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的头标进行切换。与此同方式，白色横条会移动到相应的页卡头标下。这是一个动画效果，


一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的头标进行切换。与此同方式，白色横条会移动到相应的页卡头标下。这是一个动画效果，白条是缓慢滑动过去的。好了，接下来我们就来实现它。

　　二、在开始前，我们先要认识一个控件，ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。这个附加包是android-support-v4。jar，在最后的源码中会提供给大家，在libs文件夹中。当然你也可以自己从网上搜索最新的版本。找到它后，我们需要在项目中添加

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

view source
print ?
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　　<LinearLayout
08　　android：id="@+id/linearLayout1"
09　　android：layout_width="fill_parent"
10　　android：layout_height="100.0dip"
11　　android：background="#FFFFFF">
12　　<TextView
13　　android：id="@+id/text1"
14　　android：layout_width="fill_parent"
15　　android：layout_height="fill_parent"
16　　android：layout_weight="1.0"
17　　android：gravity="center"
18　　android：text="页卡1"
19　　android：textColor="#000000"
20　　android：textSize="22.0dip"/>
21　　<TextView
22　　android：id="@+id/text2"
23　　android：layout_width="fill_parent"
24　　android：layout_height="fill_parent"
25　　android：layout_weight="1.0"
26　　android：gravity="center"
27　　android：text="页卡2"
28　　android：textColor="#000000"
29　　android：textSize="22.0dip"/>
30　　<TextView
31　　android：id="@+id/text3"
32　　android：layout_width="fill_parent"
33　　android：layout_height="fill_parent"
34　　android：layout_weight="1.0"
35　　android：gravity="center"
36　　android：text="页卡3"
37　　android：textColor="#000000"
38　　android：textSize="22.0dip"/>
39　　</LinearLayout>
40　　<ImageView
41　　android：id="@+id/cursor"
42　　android：layout_width="fill_parent"
43　　android：layout_height="wrap_content"
44　　android：scaleType="matrix"
45　　android：src="@drawable/a"/>
46　　<android.support.v4.view.ViewPager
47　　android：id="@+id/vPager"
48　　android：layout_width="wrap_content"
49　　android：layout_height="wrap_content"
50　　android：layout_gravity="center"
51　　android：layout_weight="1.0"
52　　android：background="#000000"
53　　android：flipInterval="30"
54　　android：persistentDrawingCache="animation"/>
55　　</LinearLayout>
我们要展示三个页卡，所以还需要三个页卡内容的界面设计，这里我们只设置了背景颜色，能起到区别作用即可。
view source
print ?
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) 先来变量的定义
view source
print ?
1　　privateViewPager mPager；//页卡内容
2　　privateList<View> listViews； // Tab页面列表
3　　privateImageView cursor；// 动画图片
4　　privateTextView t1， t2， t3；// 页卡头标
5　　privateint offset = 0；// 动画图片偏移量
6　　privateint currIndex = 0；// 当前页卡编号
7　　privateint bmpW；// 动画图片宽度
　　（2） 初始化头标
view source
print ?
01　　/**
02　　* 初始化头标
03　　*/
04　　privatevoid InitTextView（） {
05　　t1 = （TextView） findViewById（R.id.text1）；
06　　t2 = （TextView） findViewById（R.id.text2）；
07　　t3 = （TextView） findViewById（R.id.text3）；
08　　t1.setOnClickListener（newMyOnClickListener（0））；
09　　t2.setOnClickListener（newMyOnClickListener（1））；
10　　t3.setOnClickListener（newMyOnClickListener（2））；
11　　}
view source
print ?
01　　/**
02　　* 头标点击监听
03　　*/
04　　publicclass MyOnClickListenerimplements View.OnClickListener {
05　　privateint index = 0；
06　　publicMyOnClickListener（inti） {
07　　index = i；
08　　}
09　　@Override
10　　publicvoid onClick（View v） {
11　　mPager.setCurrentItem（index）；
12　　}
13　　}；

相信大家看后都没什么问题，点击第几个，就展示第几个页卡内容。
(3) 初始化页卡内容区
view source
print ?
01　　/**
02　　* ViewPager适配器
03　　*/
04　　publicclass MyPagerAdapter extends PagerAdapter {
05　　publicList<View> mListViews；
06　　publicMyPagerAdapter（List<View> mListViews） {
07　　this.mListViews = mListViews；
08　　}
09　　@Override
10　　publicvoid destroyItem（View arg0，int arg1， Object arg2） {
11　　（（ViewPager） arg0）.removeView（mListViews.get（arg1））；
12　　}
13　　@Override
14　　publicvoid finishUpdate（View arg0） {
15　　}
16　　@Override
17　　publicint getCount（） {
18　　returnmListViews.size（）；
19　　}
20　　@Override
21　　publicObject instantiateItem（View arg0， intarg1） {
22　　（（ViewPager） arg0）.addView（mListViews.get（arg1），0）；
23　　returnmListViews.get（arg1）；
24　　}
25　　@Override
26　　publicboolean isViewFromObject（View arg0， Object arg1） {
27　　returnarg0 == （arg1）；
28　　}
29　　@Override
30　　publicvoid restoreState（Parcelable arg0， ClassLoader arg1） {
31　　}
32　　@Override
33　　publicParcelable saveState（） {
34　　returnnull；
35　　}
36　　@Override
37　　publicvoid startUpdate（View arg0） {
38　　}
39　　}
这里我们实现了各页卡的装入和卸载 (4) 初始化动画
view source
print ?
01　　/**
02　　* 初始化动画
03　　*/
04　　privatevoid InitImageView（） {
05　　cursor = （ImageView） findViewById（R.id.cursor）；
06　　bmpW = BitmapFactory.decodeResource（getResources（）， R.drawable.a）
07　　.getWidth（）；// 获取图片宽度
08　　DisplayMetrics dm = newDisplayMetrics（）；
09　　getWindowManager（）.getDefaultDisplay（）.getMetrics（dm）；
10　　intscreenW = dm.widthPixels；// 获取分辨率宽度
11　　offset = （screenW / 3- bmpW） / 2；// 计算偏移量
12　　Matrix matrix = newMatrix（）；
13　　matrix.postTranslate（offset， 0）；
14　　cursor.setImageMatrix（matrix）；// 设置动画初始位置
15　　}
根据屏幕的分辨率和图片的宽度计算动画移动的偏移量 　　/** 　　* 页卡切换监听　　*/ 　　public class MyOnPageChangeListener implements OnPageChangeListener { 　　int one = offset * 2 + bmpW；// 页卡1 -> 页卡2 偏移量　　int two = one * 2；// 页卡1 -> 页卡3 偏移量　　@Override 　　public void onPageSelected（int arg0） { 　　Animation animation = null；　　switch （arg0） { 　　case 0：　　if （currIndex == 1） { 　　animation = new TranslateAnimation（one， 0， 0， 0）；　　} else if （currIndex == 2） { 　　animation = new TranslateAnimation（two， 0， 0， 0）；　　} 　　break；　　case 1：　　if （currIndex == 0） { 　　animation = new TranslateAnimation（offset， one， 0， 0）；　　} else if （currIndex == 2） { 　　animation = new TranslateAnimation（two， one， 0， 0）；　　} 　　break；　　case 2：　　if （currIndex == 0） { 　　animation = new TranslateAnimation（offset， two， 0， 0）；　　} else if （currIndex == 1） { 　　animation = new TranslateAnimation（one， two， 0， 0）；　　} 　　break；　　} 　　currIndex = arg0；　　animation.setFillAfter（true）；// True：图片停在动画结束位置　　animation.setDuration（300）；　　cursor.startAnimation（animation）；　　} 　　@Override 　　public void onPageScrolled（int arg0， float arg1， int arg2） { 　　} 　　@Override 　　public void onPageScrollStateChanged（int arg0） { 　　} 　　} 
 
 
 
 五、打完收工，快来看看自己的劳动成果吧
  
  
 
 
 
 


                

        

        

    

  


    

      

        

            

              
                
                  骄傲的奔波儿灞
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
Android---使用ViewPager来实现屏幕滑动效果

				
			

			

				

					FireOfStar的专栏
				

				

					09-12
					
					2759
					
				

			

		

		

			
				
本文译自：http://developer.android.com/training/animation/screen-slide.html
本文示例代码：http://download.csdn.net/detail/fireofstar/6211781
屏幕滑动是两个整屏窗口之间切换的一种效果，并且常用于安装向导或幻灯片。本文介绍如何通过supportlibrary类库提供的ViewPag

			
		

	



                

              
                



	

		

			

				
					
android防谷歌滑动效果,Android使用ViewPager实现无限滑动效果

				
			

			

				

					weixin_36444022的博客
				

				

					05-25
					
					214
					
				

			

		

		

			
				
前言其实仔细想一下原理还是挺简单的。无非是当我们滑动到最后一页，再向后滑动时定位到第一页;当我们滑动到第一页，再向前滑动时定位到最后一页。但是，相信很多朋友都遇到过这个问题：视图的过度效果不自然。小编也是通过百度和谷歌查找了很多解决方案，实验了很多方法，总结了一个相对不错的方法，接下来给各位分享下滑动效果、实现细节以及一些踩过的坑。1.无限滑动效果(左右无限滑动)事先准备好2张滑动图片(有想试验的...

			
		

	



                


  
              

                


	

		

			

				
					
实现ViewPager的不同滑动效果

				
			

			

				

					Frank的博客
				

				

					11-07
					
					520
					
				

			

		

		

			
				
给ViewPager滑动加一个动画.
在我之前的博客模仿知乎安卓客户端的banner广告条以及一些思考中有写到利用viewPager的PageTransformer来实现各种不同的viewPager的滑动效果,这次我就写了9种不同的效果来练习一下.


代码在我的github
这里面用的知识点也不是很多,主要是和view变换有关的
1. View.setPivotX()设置锚点的X坐标

			
		

	





	

		

			

				
					
仿新浪微博首页具有泥鳅蚯蚓滑动效果的可自定义View的Android ViewPager指示器

				
			

			

				

					梁超杰
				

				

					07-31
					
					1518
					
				

			

		

		

			
				
说到蚯蚓滑动效果的指示器，市面上很常见 
 
也许是普通的控件习以为常了，刷微博的时候看到微博首页的设计觉得很有意思 
 
于是在公司的蚯蚓滑动指示器的基础上进行了加工，写了这么一个指示器，效果如下所示 


我就要只显示文字的指示器？ 
直接把EarthwormIndicator添加为Module依赖，不用自定义布局了。

我需要自定义View的指示器？ 
核心类就两个CustomPageTab...

			
		

	



		

			
		



	

		

			

				
					
TabLayout系列：FlycoTabLayout实现点击切换效果

				
			

			

				

					知道这个有什么用？
				

				

					03-12
					
					3391
					
				

			

		

		

			
				
先看效果图，


app module下build.gradle中集成

 implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar'

这个库的Github项目地址：https://github.com/H07000223/FlycoTabLayout，我只做点击切换效果，不做滑动切换效果，因为我的开发经验来讲，做滑动切换会有许多问题。所以我专门把ViewPager的滑动功能禁止掉了。
import android.content.C

			
		

	





	

		

			

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

				
			

			

				

					weixin_35182991的博客
				

				

					05-26
					
					295
					
				

			

		

		

			
				
评论#28楼[楼主]2012-06-01 14:27D.Winter@孤寒江雪我猜 要么在头尾各再加入一个页卡在页卡切换监听中判断，如果选中了头尾的页卡，就返回到相邻的那个页卡。头尾页卡的界面可以只是个背景色。#29楼2012-07-05 14:18olue正好要用到，帮助很大，楼主辛苦了#30楼2012-07-05 15:41olue@BottleMan我也发现不能添加button的事件，...

			
		

	





	

		

			

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

				
			

			

				

					linjcai的博客
				

				

					07-01
					
					120
					
				

			

		

		

			
				
一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的头标进行切换。与此同方式，
白色横条会移动到相应的页卡头标下。这是一个动画效果，白条是缓慢滑动过去的。好了

			
		

	





	

		

			

				
					
viewpage 去掉左右切换效果_ViewPager多页面滑动切换以及动画效果(转)

				
			

			

				

					weixin_39982537的博客
				

				

					12-21
					
					282
					
				

			

		

		

			
				
二、在开始前，我们先要认识一个控件，ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。这个附加包是android-support-v4.jar，在最后的源码中会提供给大家，在libs文件夹中。当然你也可以自己从网上搜索最新的版本。找到它后，我们需要在项目中添加三、我们先做界面，界面设计很简单，第一行三个头标，第二行动画图片，第三行页卡内容展示。xml...

			
		

	





	

		

			

				
					
Android编程实现ViewPager多页面滑动切换及动画效果的方法

				
			

			

				

					09-03
				

			

		

		

			
				
本教程将详细讲解如何利用ViewPager实现多页面滑动切换并添加动画效果。  首先，ViewPager是Android Support Library的一部分，位于`android.support.v4.view.ViewPager`包下。要使用ViewPager，需要在项目中添加...

			
		

	





	

		

			

				
					
左右滑动的分页View(模拟Launcher3的PagedView)

				
			

			

				

					C_biubiubiu的博客
				

				

					09-10
					
					422
					
				

			

		

		

			
				
public class XPagedView extends ViewGroup {

    private static final String TAG = "XPagedView";

    private Context mContext;

    private VelocityTracker mVelocityTracker;

    /**
     * 触发自动翻页的的最小速度
     */
    private int mTriggerTrunPageVelocity;

 

			
		

	





	

		

			

				
					
Android：记录一个打包发布版的release包以后闪退的问题

				
			

			

				

					Spy003的博客
				

				

					10-13
					
					417
					
				

			

		

		

			
				
个人感觉其实release闪退的问题挺难排查的，因为release包运行起来as捕获不到相应的应用程序进程，从而不易查看到日志，也是我玩得不溜，大家有不同的方法可以评论区探讨，我也定期回复一些评论一起讨论。

			
		

	





	

		

			

				
					
在 Windows 11 安卓子系统中安装 APK 的操作指南

				
			

			

				

					ailbj的博客
				

				

					10-11
					
					630
					
				

			

		

		

			
				
本指南旨在帮助用户在 Windows 11 上安装并运行带有 Google 框架的原生 Android 环境中的 APK。如果网络设置导致连通性检测失败，可能会出现“VirtWifi的连接受限”的提示。这样设置后，即使关闭所有应用窗口，WSA 也会继续运行，防止代理中断。安卓子系统上成功安装和运行带有 Google 框架的 APK。直接在已安装的 WSA 子系统中安装所需的代理应用程序。软件中好像有网络功能，不过无论如何，以下内容不是必要的。

			
		

	





	

		

			

				
					
PHP获取图片属性（size, width, 和 height）的函数

				
			

			

				

					sheji888的专栏
				

				

					10-13
					
					470
					
				

			

		

		

			
				
这个函数不仅返回图片的宽度和高度，还返回图片的类型和MIME类型等信息。关于图片的大小（size，即文件的字节数），你可以使用PHP的内置函数。函数还会检查文件是否是一个有效的图片文件，如果不是，它会返回。在PHP中，要获取图片的尺寸（宽度和高度），你可以使用。结合这两个函数，你就可以获取到图片的尺寸和文件大小了。

			
		

	





	

		

			

				
					
Android上的AES加密

					
最新发布

				
			

			

				

					github_35581409的博客
				

				

					10-13
					
					457
					
				

			

		

		

			
				
虽然这个视频讲的非常详细，但是涉及到具体底层算法，大致流程1. 将数据转成HEX或者byte array2.将数据分层一块块等大小的数据3.将数据和key 进行一次混合，加密之后的输出，在生成新的key4.将新的key和下一个数据，进行加密计算，继续重复生成的KEY长度有128,192,256，不同的的长度对算法的速度有影响当然key的长度越长，可能越安全这样具体的算法是什么呢。

			
		

	





	

		

			

				
					
Android -- [SelfView] 自定义多色渐变背景板

				
			

			

				

					8023的博客
				

				

					10-10
					
					730
					
				

			

		

		

			
				
【代码】Android -- [SelfView] 自定义多色渐变背景板。

			
		

	





	

		

			

				
					
PHP基础语法全面指南

				
			

			

				

					tatasix的博客
				

				

					10-11
					
					762
					
				

			

		

		

			
				
本文全面介绍了PHP的基础语法和高级特性。从基本的语法结构、数据类型、变量和常量，到流程控制、函数、类与对象，再到命名空间、枚举、错误和异常处理，以及最新的纤程和注解等特性，文章覆盖了PHP编程的各个方面。通过详细的代码示例，帮助读者快速掌握PHP的核心知识点，并提供了实用的编程技巧。无论是初学者还是有一定经验的开发者，都能从中受益，提升自己的PHP编程技能。

			
		

	





	

		

			

				
					
PHP基础语法详细代码案例

				
			

			

				

					l1337224493的博客
				

				

					10-10
					
					1220
					
				

			

		

		

			
				
phpreturn "这是一辆 $this->color $this->model";$myCar = new Car("红色", "Toyota");// 输出 这是一辆 红色 Toyota?本文详细介绍了PHP的基础语法和用法，包括变量、数据类型、控制结构、函数、数组、面向对象编程、表单处理、文件操作和数据库连接等多个方面。通过提供具体的代码案例，希望能帮助读者更好地理解和掌握PHP编程。

			
		

	





	

		

			

				
					
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、付费专栏及课程。

              

            

          

      

      余额充值