之前写过一篇文章：android自定义viewpager实现个性化的图片切换效果，有朋友提出，viewpager自带了一个setpagetransformer用于设置切换动画~
本篇文章，将进行以下内容学习：
1、介绍如何使用setpagetransformer设置切换动画；
2、自定义pagetransformer实现个性的切换动画；
3、该方法在sdk11以下的版本不起作用，我们会对其做一定修改，让其向下兼容。
官方示例地址： 有兴趣的可以去看看~~
好了，下面开始编写代码~~
一、setpagetransformer的使用
首先我们迅速的实现一个传统的viewpager效果~
1、布局文件
我要评论
<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.support.v4.view.viewpager
android:id="@+id/id_viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</relativelayout>
2、mainactivity
package com.zhy.demo_zhy_08_viewpageranim;
import java.util.arraylist;
import java.util.list;
import android.app.activity;
import android.os.bundle;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.view.view;
import android.view.viewgroup;
import android.view.window;
import android.widget.imageview;
import android.widget.imageview.scaletype;
public class mainactivity extends activity
{
private viewpager mviewpager;
private int[] mimgids = new int[] { r.drawable.guide_image1,
r.drawable.guide_image2, r.drawable.guide_image3 };
private list<imageview> mimageviews = new arraylist<imageview>();
@override
protected void oncreate(bundle savedinstancestate)
{
super.oncreate(savedinstancestate);
requestwindowfeature(window.feature_no_title);
setcontentview(r.layout.activity_main);
initdata();
mviewpager = (viewpager) findviewbyid(r.id.id_viewpager);
mviewpager.setadapter(new pageradapter()
{
@override
public object instantiateitem(viewgroup container, int position)
{
container.addview(mimageviews.get(position));
return mimageviews.get(position);
}
@override
public void destroyitem(viewgroup container, int position,
object object)
{
container.removeview(mimageviews.get(position));
}
@override
public boolean isviewfromobject(view view, object object)
{
return view == object;
}
@override
public int getcount()
{
return mimgids.length;
}
});
}
private void initdata()
{
for (int imgid : mimgids)
{
imageview imageview = new imageview(getapplicationcontext());
imageview.setscaletype(scaletype.center_crop);
imageview.setimageresource(imgid);
mimageviews.add(imageview);
}
}
}
好了，这样一个传统viewpager就实现了~~大家对上面代码应该不会有任何陌生的感觉~运行效果也不用贴图了，大家肯定知道。
二、pagetransformer
viewpager有个方法叫做：
setpagetransformer(boolean reversedrawingorder, pagetransformer transformer) 用于设置viewpager切换时的动画效果，并且google官方还给出了两个示例。
只需要在上述代码中调用setpagetransformer即可添加切换动画效果~~下面演示google的两个pagetransformer的代码，以及运行效果。
1）、depthpagetransformer
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(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);
}
}
}
调用代码：
mviewpager.setpagetransformer(true, new depthpagetransformer());
效果：
2）、zoomoutpagetransformer
package com.zhy.view;
import android.annotation.suppresslint;
import android.support.v4.view.viewpager;
import android.util.log;
import android.view.view;
public class zoomoutpagetransformer implements viewpager.pagetransformer
{
private static final float min_scale = 0.85f;
private static final float min_alpha = 0.5f;
@suppresslint("newapi")
public void transformpage(view view, float position)
{
int pagewidth = view.getwidth();
int pageheight = view.getheight();
log.e("tag", view + " , " + position + "");
if (position < -1)
{ // [-infinity,-1)
// this page is way off-screen to the left.
view.setalpha(0);
} else if (position <= 1) //a页滑动至b页 ； a页从 0.0 -1 ；b页从1 ~ 0.0
{ // [-1,1]
// modify the default slide transition to shrink the page as well
float scalefactor = math.max(min_scale, 1 - math.abs(position));
float vertmargin = pageheight * (1 - scalefactor) / 2;
float horzmargin = pagewidth * (1 - scalefactor) / 2;
if (position < 0)
{
view.settranslationx(horzmargin - vertmargin / 2);
} else
{
view.settranslationx(-horzmargin + vertmargin / 2);
}
// scale the page down (between min_scale and 1)
view.setscalex(scalefactor);
view.setscaley(scalefactor);
// fade the page relative to its size.
view.setalpha(min_alpha + (scalefactor - min_scale)
/ (1 - min_scale) * (1 - min_alpha));
} else
{ // (1,+infinity]
// this page is way off-screen to the right.
view.setalpha(0);
}
}
}
调用代码：
mviewpager.setpagetransformer(true, new zoomoutpagetransformer());
效果：
效果图都是google官网上的，我们的测试图会在兼容3.0以下贴出来，不然就重复了~~
为viewpager添加切换就一行代码是不是很happy，可惜是不兼容3.0以下的版本的，该方法的注释上写到：
setting a pagetransformer prior to android 3.0 (api 11) will have no effect 在3.0之前的版本设置此方法是没有效果的，那么下面我们就看如何让其兼容3.0以下版本。
三、版本的向下兼容
1）、不兼容的原因
首先看下为什么不兼容，3.0以下呢？
看上面的两个示例代码，代码中view的动画使用的是属性动画，而属性动画是3.0才推出的，那么这么写肯定是不兼容3.0以下了。
那么我们首先引入nineoldandroids，让动画先能在3.0以下跑再说：
修改depthpagetransformer
package com.zhy.view;
import com.nineoldandroids.view.viewhelper;
import android.annotation.suppresslint;
import android.support.v4.view.viewpager;
import android.view.view;
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(0);
viewhelper.setalpha(view, 0);
} else if (position <= 0)// a页滑动至b页 ； a页从 0.0 -1 ；b页从1 ~ 0.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 - position);
// view.setscalex(scalefactor);
viewhelper.setscalex(view, scalefactor);
// view.setscaley(1);
viewhelper.setscaley(view, scalefactor);
} else
{ // (1,+infinity]
// this page is way off-screen to the right.
// view.setalpha(0);
viewhelper.setalpha(view, 1);
}
}
}
很简单，把所有属性动画换成viewhelper去设置就好了。现在我们去3.0以下的机子上去运行，发现还是没有效果~~~
为什么呢？
我们再去看看setpagetransformer的源码：
public void setpagetransformer(boolean reversedrawingorder, pagetransformer transformer) {
if (build.version.sdk_int >= 11) {
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();
}
}
终于发现原因了，原来在此方法内部判断了如果是11以上的版本才让动画生效~~
那么，没办法了，如果想兼容，必须修改viewpager的源码了~~
2）、完美向下兼容
我们将viewpager的源码拷贝一份至我们的项目中，修改名称为viewpagercompat；然后注释掉sdk版本判断那一句
public class viewpagercompat extends viewgroup {
public void setpagetransformer(boolean reversedrawingorder, viewpager.pagetransformer transformer) {
// if (build.version.sdk_int >= 11)
{
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();
}
}
...
}
注意，所有的pagetransformer使用viewpager.pagetransformer
然后我们把项目中的viewpager改为viewpagercompat；记得修改布局文件，以及mainactivity中的viewpager为viewpagercompat
我们在2.3.3的模拟器上测试下效果：
可以看到，我们的切换动画完美的运行在2.3.3的机器上~~so happy ~~没有viewpager源码的童鞋不要紧，我会在文末的源码下载中加入viewpager源码，让你可以尽情去测试~~
当然了，仅仅是兼容当然不能满足我们的好奇心，难道我们做到了兼容，还只能使用google给的示例动画么~~我们强大的创新呢~~下面带领大家分析setpagetransformer方法，然后设计一个个性的动画切换效果
四、自定义pagetransformer实现个性切换动画
public interface pagetransformer {
/**
* apply a property transformation to the given page.
*
* @param page apply the transformation to this page
* @param position position of page relative to the current front-and-center
* position of the pager. 0 is front and center. 1 is one full
* page position to the right, and -1 is one page position to the left.
*/
public void transformpage(view page, float position);
}
可以看到该接口只有一个方法，第一个是我们的view，第二个是position~~
当我们滑动时：会打印出当然viewpager中存活的每个view以及它们的position的变化~~注意是每一个，所以建议别只log position，不然你会觉得莫名其妙的输出~~
position的可能性的值有，其实从官方示例的注释就能看出：
[-infinity,-1) 已经看不到了
(1,+infinity] 已经看不到了
[-1,1]
重点看[-1,1]这个区间 ， 其他两个的view都已经看不到了~~
假设现在viewpager在a页现在滑出b页，则:
a页的position变化就是( 0, -1]
b页的position变化就是[ 1 , 0 ]
知道了我们滑动时position的变化~~那么就开始设计我们的个性的切换效果；
官方给的例子，有变化透明度、偏移量、缩放的，我们准备来个不一样的，我们变化角度，即rotation;
大概的效果是这样的：
下面我们分析代码：
我们设置view的旋转中心为：
viewhelper.setpivotx(view, view.getmeasuredwidth() * 0.5f); viewhelper.setpivoty(view, view.getmeasuredheight());
依然是viewpager在a页现在滑出b页
那么a页应当在滑动过程中0度到-20度的偏移，b页应当在滑动过程中+20度到0度的偏移
结合
a页的position变化就是( 0, -1]
b页的position变化就是[ 1 , 0 ]
那么旋转的角度即：mrot = (20 * position); a页 mrot :0 ,~ -20 ; b页 mrot :20 ~ 0 ;
瞬间觉得好简单：
完整代码：
package com.zhy.view;
import com.nineoldandroids.view.viewhelper;
import android.annotation.suppresslint;
import android.support.v4.view.viewpager;
import android.util.log;
import android.view.view;
public class rotatedownpagetransformer implements viewpager.pagetransformer
{
private static final float rot_max = 20.0f;
private float mrot;
public void transformpage(view view, float position)
{
log.e("tag", view + " , " + position + "");
if (position < -1)
{ // [-infinity,-1)
// this page is way off-screen to the left.
viewhelper.setrotation(view, 0);
} else if (position <= 1) // a页滑动至b页 ； a页从 0.0 ~ -1 ；b页从1 ~ 0.0
{ // [-1,1]
// modify the default slide transition to shrink the page as well
if (position < 0)
{
mrot = (rot_max * position);
viewhelper.setpivotx(view, view.getmeasuredwidth() * 0.5f);
viewhelper.setpivoty(view, view.getmeasuredheight());
viewhelper.setrotation(view, mrot);
} else
{
mrot = (rot_max * position);
viewhelper.setpivotx(view, view.getmeasuredwidth() * 0.5f);
viewhelper.setpivoty(view, view.getmeasuredheight());
viewhelper.setrotation(view, mrot);
}
// scale the page down (between min_scale and 1)
// fade the page relative to its size.
} else
{ // (1,+infinity]
// this page is way off-screen to the right.
viewhelper.setrotation(view, 0);
}
}
}
你没看错，if else 里面代码是一样的，为了好理解特意没有合并到一起。
到此，我们从setpagetransformer使用，到修改viewpager做到向下兼容，直至自己定义出个性的切换效果 都已经介绍完毕。大家可以发挥自己的创造力，做出各种神奇的动画效果，ok，就到这里！
如果你喜欢自定义viewpager来实现，请移步：android自定义viewpager实现个性化的图片切换效果
源码下载：
以上就是本文的全部内容，希望对大家学习android软件编程有所帮助。
如对本文有疑问， 点击进行留言回复！！
Android studio开发小型对话机器人app(实例代码)
Android通过Java sdk的方式接入OpenCv的方法
Android 通过cmake的方式接入opencv的方法步骤
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)
网友评论