登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

楼主: Rf2698

Android实现千变万化的ViewPager切换动画,android中viewpager

[复制链接]

444

主题

824

帖子

1964

安币

手工艺人

发表于 2018-1-9 12:28:14 | 显示全部楼层 |阅读模式

        之前写过一篇文章:android自定义viewpager实现个性化的图片切换效果,有朋友提出,viewpager自带了一个setpagetransformer用于设置切换动画~
本篇文章,将进行以下内容学习:
1、介绍如何使用setpagetransformer设置切换动画;
2、自定义pagetransformer实现个性的切换动画;
3、该方法在sdk11以下的版本不起作用,我们会对其做一定修改,让其向下兼容。
官方示例地址:http://developer.android.com/training/animation/screen-slide.html 有兴趣的可以去看看~~

        好了,下面开始编写代码~~
一、setpagetransformer的使用
首先我们迅速的实现一个传统的viewpager效果~
1、布局文件

[Java] 查看源文件 复制代码
<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

[Java] 查看源文件 复制代码
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

[Java] 查看源文件 复制代码
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

[Java] 查看源文件 复制代码
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

[Java] 查看源文件 复制代码
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的源码:

[Java] 查看源文件 复制代码
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 

        终于发现原因了,原来在此方法内部判断了如果是11以上的版本才让动画生效~~
那么,没办法了,如果想兼容,必须修改viewpager的源码了~~
2)、完美向下兼容
我们将viewpager的源码拷贝一份至我们的项目中,修改名称为viewpagercompat;然后注释掉sdk版本判断那一句

[Java] 查看源文件 复制代码
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 

        注意,所有的pagetransformer使用viewpager.pagetransformer
然后我们把项目中的viewpager改为viewpagercompat;记得修改布局文件,以及mainactivity中的viewpager为viewpagercompat
我们在2.3.3的模拟器上测试下效果:

        


        可以看到,我们的切换动画完美的运行在2.3.3的机器上~~so happy ~~没有viewpager源码的童鞋不要紧,我会在文末的源码下载中加入viewpager源码,让你可以尽情去测试~~
当然了,仅仅是兼容当然不能满足我们的好奇心,难道我们做到了兼容,还只能使用google给的示例动画么~~我们强大的创新呢~~下面带领大家分析setpagetransformer方法,然后设计一个个性的动画切换效果
四、自定义pagetransformer实现个性切换动画

[Java] 查看源文件 复制代码
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的旋转中心为:

[Java] 查看源文件 复制代码
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 ;
瞬间觉得好简单:
完整代码:

[Java] 查看源文件 复制代码
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 里面代码是一样的,为了好理解特意没有合并到一起。


7

主题

9292

帖子

1984

安币

Android大神

Rank: 6Rank: 6

发表于 2018-1-10 04:52:56 | 显示全部楼层
安卓巴士是个不错的网站,我来顶个贴~

28

主题

1万

帖子

1387

安币

Android大神

小白

Rank: 6Rank: 6

发表于 2018-1-10 20:45:28 | 显示全部楼层
支持楼主,支持安卓巴士!

2

主题

9329

帖子

2104

安币

Android大神

Rank: 6Rank: 6

QQ达人

发表于 2018-1-11 18:53:33 | 显示全部楼层
每次我都积极回帖的,想要安币~

14

主题

9139

帖子

4748

安币

码皇(巴士元老)

Rank: 8Rank: 8

发表于 2018-1-13 05:59:22 | 显示全部楼层
感谢分享,楼主V5~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站长推荐

通过邮件订阅最新安卓weekly信息
上一条 /4 下一条

下载安卓巴士客户端

全国最大的安卓开发者社区
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表