Android切换动画之ViewPager
有过开发经验的程序员都知道这个效果,就是当我们第一次安装一个软件时有一个使用说明的图片切换效果,他是如何实现的呢?今天我们就一起学习一下吧,难度系数1.0,就是只要你仔细分析,都可以学会。废话不多说,下面我们开始本篇的介绍。
本篇我需要使用到ViewPager,对于ViewPager的介绍,就不再详述,网上关于ViewPager的介绍很多,大家可以自行去了解。
再进行动画效果制作之前我们先实现一个图片的切换效果。
布局文件:
<RelativeLayout 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" > <com.example.android_viewpager.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.example.android_viewpager.ViewPager> </RelativeLayout>
我们的Activity:
public class MainActivity extends Activity { private ViewPager mViewPager;//系统提供的 int [] imageIds = {R.drawable.guide_image1, R.drawable.guide_image2, R.drawable.guide_image3};
List<ImageView> listImager = new ArrayList<ImageView>(); @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.viewPager);//调用系统提供的 mViewPager.setAdapter(new PagerAdapter() { @Override
public void destroyItem(ViewGroup container, int position,
Object object) {
container.removeView(listImager.get(position));
} @Override
public Object instantiateItem(ViewGroup container, int position) { ImageView imagerView = new ImageView(MainActivity.this);
imagerView.setImageResource(imageIds[position]);
imagerView.setScaleType(ScaleType.CENTER_CROP);//设置样式
container.addView(imagerView);
listImager.add(imagerView);
return imagerView;
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
} @Override
public int getCount() {
return imageIds.length;
}
});
} @Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
} }
这样我们最简单的使用说明的效果已经做好了。下面我们来一起看一下如何为我们的切换效果添加一些炫酷效果呢?
首先我们想到的是谷歌有没有为我们封装这样的方法,答案是肯定的,大家可以访问谷歌Android API详细了解其中的机制(http://developer.android.com/training/animation/screen-slide.html )。接下来就有我带领大家先使用一下为ViewPager添加动画效果的实现。
调用的方法:
mViewPager.setPageTransformer(true, new DepthPageTransformer());
DepthPageTransformer.java:
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class DepthPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.75f; @SuppressLint("NewApi")
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(0); } else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1); } 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(0);
}
}
}
对于这段代码代码大家直接把官网的拿过来就可以了。好了到这里我们的切换效果已经实现了,大家可以测试一下了。
是不是一些同学已经发现一个问题了,自己的为什么一点效果都没有,是的,这不是你写错的原因,这是因为我们的动画效果都是通过属性动画实现的,而属性动画又是Android3.0以后的版本才支持的,所以大家不为之困扰,换一个高版本的就可以完美呈现了,当然如果你感觉这个效果还不算理想,官网还为我们提供了一个效果,大家同样的操作就可以了。
对于上面的提到的关于3.0以前版本不支持的问题,这里我为大家提供一个改进方法:
我们对DepthPageTransformer.java进行优化:
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class myDepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f; /*
* 使用ViewHelper替代系统提供的view
* (non-Javadoc)
* @see android.support.v4.view.ViewPager.PageTransformer
* #transformPage(android.view.View, float)
*/ @SuppressLint("NewApi")
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(0);
ViewHelper.setAlpha(view, 0); } else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
// view.setAlpha(1);
ViewHelper.setAlpha(view, 1);
// view.setTranslationX(0);
ViewHelper.setTranslationX(view, 0);
// view.setScaleX(1);
ViewHelper.setScaleX(view, 1);
// view.setScaleY(1);
ViewHelper.setScaleY(view, 1); } else if (position <= 1) { // (0,1]
// Fade the page out.
// view.setAlpha(1 - position);
ViewHelper.setAlpha(view, 1 - position); // Counteract the default slide transition
// view.setTranslationX(pageWidth * -position);
ViewHelper.setTranslationX(view, 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);
ViewHelper.setScaleX(view, scaleFactor);
// view.setScaleY(scaleFactor);
ViewHelper.setScaleY(view, scaleFactor); } else { // (1,+Infinity]
// This page is way off-screen to the right.
// view.setAlpha(0);
ViewHelper.setAlpha(view, 0);
}
}
}
这样我们通过ViewHelper来替代我们的属性动画属性,来处理我们3.0以前版主不支持属性动画的问题,当我们运行后发现,3.0以后的版本还是没有效果,这是什么原因呢?我们打开ViewPager的源代码发现里面有一句判断:
if (Build.VERSION.SDK_INT >= 11) //Android版本判断
对这个就是罪魁祸首,当我们的版本低于3.0时,我们的动画效果代码根本得不到执行,所以如果想要解决这个问题,我们需要从写这个类。把里面setPageTransformer()里面的版本判断进行一下注释;
public void setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) {
//if (Build.VERSION.SDK_INT >= 11) //Android版本判断
{
final boolean hasTransformer = transformer != null;
final boolean needsPopulate = hasTransformer != (mPageTransformer != null);
mPageTransformer = transformer;
setChildrenDrawingOrderEnabledCompat(hasTransformer);
if (hasTransformer) {
mDrawingOrder = reverseDrawingOrder ? DRAW_ORDER_REVERSE : DRAW_ORDER_FORWARD;
} else {
mDrawingOrder = DRAW_ORDER_DEFAULT;
}
if (needsPopulate) populate();
}
}
然后我们需要把里面的布局文件进行一下更改:
<com.example.android_viewpager.ViewPagerCompate
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.example.android_viewpager.ViewPagerCompate>
然后把MainActivity进行一些更改:
mViewPager = (ViewPagerCompate) findViewById(R.id.viewPager);//修改系统提供的
这样我们刚刚修改的效果就可以在3.0以后的版本显示出来了,是不是感觉很神奇。最后我在为大家介绍一个效果:
public class RotateDownPagetransformer implements ViewPager.PageTransformer { private static final float MAX_ROTATE = 20F;
private static float ROTATE = 0F; /*
* 效果分析:
* 滑动可以分解为:A>B
* A的position:0.0 >> -1.0
* B的position:1.0 >> 0.0
* (non-Javadoc)
* @see android.support.v4.view.ViewPager.PageTransformer#
* transformPage(android.view.View, float)
*/ @Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth(); if (position < -1) { // [-Infinity,-1)
ViewHelper.setAlpha(view, 0);//设置透明度
} else if (position <= 0) { // A页position:0.0 >> 1.0
//计算旋转角度
ROTATE = MAX_ROTATE * position;
//设置旋转中心
ViewHelper.setPivotX(view, pageWidth/2);
ViewHelper.setPivotY(view, view.getMeasuredHeight());
//设置选择角度
ViewHelper.setRotation(view, ROTATE); } else if (position <= 1) { // B页position:1.0 >> 0.0
//计算旋转角度
ROTATE = MAX_ROTATE * position;
//设置旋转中心
ViewHelper.setPivotX(view, pageWidth/2);
ViewHelper.setPivotY(view, view.getMeasuredHeight());
//设置选择角度
ViewHelper.setRotation(view, ROTATE); } else { // (1,+Infinity]
ViewHelper.setAlpha(view, 0);
}
}
}
这是一个类似于扇形的切换效果,好了对于ViewPager的切换动画就已经为大家介绍完毕,内容较多,大家有什么疑问可以留言交流。
Android切换动画之ViewPager的更多相关文章
- ViewPager无限轮播与自定义切换动画
一直在寻求一个能用得长久的ViewPager,寻寻觅觅终于发现,ViewPager有这一个就够了. 注:并非完全原创 先看一下效果: 淡入淡出: 旋转: 无限轮播的ViewPager 主要设计思路(以 ...
- Android开源项目发现---ViewPager 、Gallery 篇(持续更新)
1. Android-ViewPagerIndicator 鼎鼎大名,配合ViewPager使用的Indicator,支持各种位置和样式 项目地址:https://github.com/JakeWh ...
- Android项目实战(四):ViewPager切换动画(3.0版本以上有效果)
学习内容来自“慕课网” 一般APP进去之后都会有几张图片来导航,这里就学习怎么在这张图片切换的时候添加切换动画效果 先看布局文件 activity_main.layout <?xml versi ...
- Android为ViewPager增加切换动画——使用属性动画.
ViewPager作为Android最常用的的组件之一,相信大家在项目中会频繁的使用到的,例如利用ViewPager制作引导页.轮播图,甚至做整个app的表现层的框架等等. Android3.0以下不 ...
- Android至ViewPager添加切换动画——使用属性动画
转载请注明出处:http://blog.csdn.net/allen315410/article/details/44200623 ViewPager作为Android最经常使用的的组件之中的一个.相 ...
- android下ViewPager的使用,带下部选项栏的切换动画
(文章针对类似我这种初学者,大神看到不要嘲笑) 演示 我的规矩是先上GIF动画效果(Linux下用转的GIF,清晰度还可以但是不知道为什么放博客上,界面会这么大): 代码: android中有View ...
- Android 实现个性的ViewPager切换动画 实战PageTransformer(兼容Android3.0以下)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40411921,本文出自:[张鸿洋的博客] 1.概述 之前写过一篇博文:Andro ...
- Android -- ViewPager切换动画,PageTransformer
transformPage(View view, float position) view就是滑动中的那个view,position这里是float类型,是当前滑动状态的一个表示,比如当滑动到正全屏时 ...
- Android为ViewPager添加切换动画——自己定义ViewPager
转载请注明出处:http://blog.csdn.net/allen315410/article/details/44224517 在上篇博客中,我写了一个使用属性动画为ViewPager加入切换动画 ...
随机推荐
- MVVM 在使用 ItemsSource 之前,项集合必须为空
今天在做ListBox和Combobox绑定的时候,都出现过“在使用 ItemsSource 之前,项集合必须为空”的错误. Combobox比较简单,代码如下: <ComboBox x:Nam ...
- 创建Xml文件与修改Xml文件
/// <summary> /// 修改节点 /// </summary> /// <param name="user">UserSafe 实体 ...
- Minimum configuration for openldap to proxy multiple AD into a single search base
[root@localhost ~]# cd /etc/openldap[root@localhost openldap]# cat slapd.confloglevel 0x900include / ...
- <<数字是世界的>>读后感
我对这本书的第一印象就是很多书评中提到的,这是一本无论是否有学习过计算机专业知识的人都可以读的书.我一开始不是很能理解这些评价,我是抱着对这个问题的疑惑进行通读的,以后我发现了,它全书中都很少出现计算 ...
- 三星(SAMSUNG)910S3L-K04 安装win7的BIOS设置
三星(SAMSUNG)910S3L-K04 开机后连续点击F2进入BIOS,再进入BOOT.将SECURE BOOT CONTROL点成disabled,将OS MODE SELECTION选为uef ...
- DNS的view设置
在实际的网络应用中,我们有时希望对于同一个Domain Name能够根据不同的请求IP 地址/区域,解析到不同的对应IP地址,比如:有时对于企业内部网络和外部网络希望对同一域名解析到不同的IP地址以达 ...
- ASP.NET MVC3 Razor 初心者容易遇到的問題(转)
这是一些相关的文章地址 http://demo.tc/Post/679 http://blog.csdn.net/cheny_com/article/details/6298496
- 解压缩c#
protected void btn_ServerClick(object sender, EventArgs e) { string strtxtPath = "E:/ ...
- 解决你的开发烦恼——Aoite 开源前奏
Aoite(Any one item!) 一个适于任何 .Net Framework 4.0+ 项目的快速开发整体解决方案,敬请关注 Aoite GitHub. 介绍 本项目从2009年孵化(V-&g ...
- AMD加载器实现笔记(五)
前几篇文章对AMD规范中的config属性几乎全部支持了,这一节主要是进一步完善.到目前为止我们的加载器还无法处理环形依赖的问题,这一节就是解决环形依赖. 所谓环形依赖,指的是模块A的所有依赖项的依赖 ...