Android项目实战(四):ViewPager切换动画(3.0版本以上有效果)

原文:Android项目实战(四):ViewPager切换动画(3.0版本以上有效果)

学习内容来自“慕课网”

一般APP进去之后都会有几张图片来导航,这里就学习怎么在这张图片切换的时候添加切换动画效果

先看布局文件

activity_main.layout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/frameLayout1"
    android:orientation="vertical">

</FrameLayout>

然后是java文件

mainactivity.java

 1 package com.example.viewpage;
 2
 3 import java.util.ArrayList;
 4 import java.util.List;
 5
 6 import android.os.Bundle;
 7 import android.app.Activity;
 8 import android.graphics.DashPathEffect;
 9 import android.support.v4.view.PagerAdapter;
10 import android.support.v4.view.ViewPager;
11 import android.text.style.SuperscriptSpan;
12 import android.view.Menu;
13 import android.view.View;
14 import android.view.ViewGroup;
15 import android.view.Window;
16 import android.widget.ArrayAdapter;
17 import android.widget.ImageView;
18 import android.widget.ImageView.ScaleType;
19
20 public class MainActivity extends Activity {
21
22     private ViewPager mviewpager; //控件
23     private int[] mImgIds = new int[]{R.drawable.guide_image1,R.drawable.guide_image2,R.drawable.guide_image3};//初始化图片
24     private List<ImageView> mImages = new ArrayList<ImageView>();
25
26
27
28     @Override
29     protected void onCreate(Bundle savedInstanceState) {
30         super.onCreate(savedInstanceState);
31         requestWindowFeature(Window.FEATURE_NO_TITLE);
32         setContentView(R.layout.activity_main);
33
34         mviewpager = (ViewPager) findViewById(R.id.id_viewpager);
35         //为ViewPage切换添加动画效果(3.0以上版本才可以有效果)
36         mviewpager.setPageTransformer(true, new ZoomOutPageTransformer());
37
38         mviewpager.setAdapter(new PagerAdapter() {
39
40             @Override
41             public Object instantiateItem(View container, int position) {
42                 ImageView imageview = new ImageView(MainActivity.this);
43                 imageview.setImageResource(mImgIds[position]);
44                 imageview.setScaleType(ScaleType.CENTER_CROP); //设置图片不变形
45                 ((ViewGroup) container).addView(imageview);
46                 mImages.add(imageview);
47                 return imageview;
48             };
49             @Override
50             public void destroyItem(View container, int position, Object object) {
51                 // TODO Auto-generated method stub
52
53                 ((ViewPager) container).removeView(mImages.get(position));
54             }
55             public boolean isViewFromObject(View view, Object object) {
56                 // TODO Auto-generated method stub
57                 return view == object;
58             }
59
60             @Override
61             public int getCount() {                   //返回图片个数
62                 // TODO Auto-generated method stub
63                 return mImgIds.length;
64             }
65         });
66     }
67
68
69
70 }

这里代码很简单,主要就是一行代码控制切换效果 第36行mviewpager.setPageTransformer(true, new ZoomOutPageTransformer());

第二个参数就是切换效果,当然不是随便的参数

这些参数可以在http://wear.techbrood.com/training/animation/screen-slide.html网上查阅到

代码是给定的,只要复制代码,点击包粘贴就生成了相应的java文件

这里展示下几种效果:

1、ZoomOutPageTransformer()

 1 public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
 2     private static final float MIN_SCALE = 0.85f;
 3     private static final float MIN_ALPHA = 0.5f;
 4
 5     public void transformPage(View view, float position) {
 6         int pageWidth = view.getWidth();
 7         int pageHeight = view.getHeight();
 8
 9         if (position < -1) { // [-Infinity,-1)
10             // This page is way off-screen to the left.
11             view.setAlpha(0);
12
13         } else if (position <= 1) { // [-1,1]
14             // Modify the default slide transition to shrink the page as well
15             float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
16             float vertMargin = pageHeight * (1 - scaleFactor) / 2;
17             float horzMargin = pageWidth * (1 - scaleFactor) / 2;
18             if (position < 0) {
19                 view.setTranslationX(horzMargin - vertMargin / 2);
20             } else {
21                 view.setTranslationX(-horzMargin + vertMargin / 2);
22             }
23
24             // Scale the page down (between MIN_SCALE and 1)
25             view.setScaleX(scaleFactor);
26             view.setScaleY(scaleFactor);
27
28             // Fade the page relative to its size.
29             view.setAlpha(MIN_ALPHA +
30                     (scaleFactor - MIN_SCALE) /
31                     (1 - MIN_SCALE) * (1 - MIN_ALPHA));
32
33         } else { // (1,+Infinity]
34             // This page is way off-screen to the right.
35             view.setAlpha(0);
36         }
37     }
38 }

效果图:

     

红色的为第一张,蓝色的为第二张,向左滑动显示蓝色。效果为两张图并行缩小滑动

2、DepthPageTransformer()

 1 public class DepthPageTransformer implements ViewPager.PageTransformer {
 2     private static final float MIN_SCALE = 0.75f;
 3
 4     public void transformPage(View view, float position) {
 5         int pageWidth = view.getWidth();
 6
 7         if (position < -1) { // [-Infinity,-1)
 8             // This page is way off-screen to the left.
 9             view.setAlpha(0);
10
11         } else if (position <= 0) { // [-1,0]
12             // Use the default slide transition when moving to the left page
13             view.setAlpha(1);
14             view.setTranslationX(0);
15             view.setScaleX(1);
16             view.setScaleY(1);
17
18         } else if (position <= 1) { // (0,1]
19             // Fade the page out.
20             view.setAlpha(1 - position);
21
22             // Counteract the default slide transition
23             view.setTranslationX(pageWidth * -position);
24
25             // Scale the page down (between MIN_SCALE and 1)
26             float scaleFactor = MIN_SCALE
27                     + (1 - MIN_SCALE) * (1 - Math.abs(position));
28             view.setScaleX(scaleFactor);
29             view.setScaleY(scaleFactor);
30
31         } else { // (1,+Infinity]
32             // This page is way off-screen to the right.
33             view.setAlpha(0);
34         }
35     }
36 }

效果图:

     

红色的为第一张,蓝色的为第二张,向左滑动显示蓝色。效果为红色无变化向左滑动,蓝色由淡到深,由小到大占据屏幕

注意:添加DepthPageTransformer()和ZoomOutPageTransformer()java文件的时候 有两个错误 很容易 ctrl+1都能解决

更多动画类:

下载地址:

http://yunpan.cn/cFyjVgaeIFZ4e (提取码:ff5f)

原文地址:https://www.cnblogs.com/lonelyxmas/p/8970169.html

时间: 2024-10-24 09:46:25

Android项目实战(四):ViewPager切换动画(3.0版本以上有效果)的相关文章

Android项目实战(八):列表右侧边栏拼音展示效果

原文:Android项目实战(八):列表右侧边栏拼音展示效果 之前忙着做项目,好久之前的技术都没有时间总结,而发现自己的博客好多写的技术都比自己掌握的时候晚了很多.不管怎么样,写技术博客一定是一个想成为优秀程序猿或者已经是优秀程序猿必须做的.好吧,下面进行学习阶段. 记得很久之前就使用过侧边拼音栏了,先看下它的效果,一个列表,列表的右侧有一个拼音列表,当列表发生滑动的时候,拼音列表也随着滑动,而规律就是拼音列表滑动的位置为显示列表的当前位置的文字的首字母决定,当然,直接点击拼音列表的一个位置,显

Android 实现个性的ViewPager切换动画 实战PageTransformer(兼容Android3.0以下)

1.介绍如何使用setPageTransformer设置切换动画: 2.自定义PageTransformer实现个性的切换动画: 3.该方法在SDK11以下的版本不起作用,我们会对其做一定修改,让其向下兼容. 官方示例地址:http://developer.android.com/training/animation/screen-slide.html 有兴趣的可以去看看~~ 好了,下面开始编写代码~~ 2.setPageTransformer的使用 首先我们迅速的实现一个传统的ViewPage

用开源项目JazzyViewPager实现viewpager切换动画

JazzyViewPager这个项目可以让viewpager有各种绚丽的动画,而且还可以自由扩展.但从官网下载的lib导入时会出现找不到视图的问题,不知道是不是我人品不行,所以我就自己写了lib.总之,本篇就是来讲这些可以有华丽动画的viewpager. JazzyViewPager项目地址:https://github.com/jfeinstein10/JazzyViewPager    一.布局文件 像viewpager一样,直接写一个控件即可. <?xml version="1.0&

Android项目实战(四十四):Zxing二维码切换横屏扫描

原文:Android项目实战(四十四):Zxing二维码切换横屏扫描 Demo链接 默认是竖屏扫描,但是当我们在清单文件中配置横屏显示的时候: <activity android:name=".CaptureActivity" android:screenOrientation="landscape" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" /> 这时候扫描

Android项目实战(十四):TextView显示html样式的文字

原文:Android项目实战(十四):TextView显示html样式的文字 项目需求: TextView显示一段文字,格式为:白雪公主(姓名,字数不确定)向您发来了2(消息个数,不确定)条消息 这段文字中名字和数字的长度是不确定的,还要求名字和数字各自有各自的颜色. 一开始我想的是用(转) SpannableString与SpannableStringBuilder来实现,因为它可以实现一段文字显示不同的颜色 但是貌似它只能固定哪些位置的文字显示什么样式,于是乎放弃. 然后就想到了用 Html

Android项目实战(三十四):蓝牙4.0 BLE 多设备连接

原文:Android项目实战(三十四):蓝牙4.0 BLE 多设备连接 最近项目有个需求,手机设备连接多个蓝牙4.0 设备 并获取这些设备的数据. 查询了很多资料终于实现,现进行总结. -------------------------------------------------------------------------------------------------------------------------------------------------------------

Android项目实战(四十二):启动页优化,去除短暂白屏或黑屏

原文:Android项目实战(四十二):启动页优化,去除短暂白屏或黑屏 大家会发现一个空项目,从手机桌面打开app是秒启动.但是对于自己开发的项目,有时会发现打开app的时候,会有短暂的1秒--2秒的白屏或者黑屏,然后才进入到程序界面. 个人理解为我们自己实现的Application文件里面做了较多的初始化操作,当这些初始化操作完成后才进入到第一个Activity,这段初始化的时间因为没有界面,应用便会因为主题的类别而显示白屏或者黑屏. 构成白屏/黑屏的原因代码如下: /*** @author

Android项目实战(四十):在线生成按钮Shape的网站

原文:Android项目实战(四十):在线生成按钮Shape的网站 AndroidButton Make  右侧设置按钮的属性,可以即时看到效果,并即时生成对应的.xml 代码,非常高效(当然熟练的话 自己手写代码更快) 原文地址:https://www.cnblogs.com/lonelyxmas/p/8970434.html

Android项目实战(四十三):夜神模拟器

原文:Android项目实战(四十三):夜神模拟器 一.下载模拟器到电脑 夜神模拟器 二.环境配置 计算机--系统--高级系统设置--环境变量 PATH 里面加入夜神模拟器的安装目录下的bin文件 三.启动模拟器 四.运行cmd命令,cd到夜神安装目录(bin目录下) 命令: adb connect 127.0.0.1:62001 成功结果: 四.Android Studio 运行或调试 原文地址:https://www.cnblogs.com/lonelyxmas/p/8970439.html