欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现千变万化的ViewPager切换动画

程序员文章站 2024-03-03 16:23:28
之前写过一篇文章:android自定义viewpager实现个性化的图片切换效果,有朋友提出,viewpager自带了一个setpagetransformer用于设置切换动...

之前写过一篇文章: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()); 
效果:

Android实现千变万化的ViewPager切换动画

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()); 
效果:

Android实现千变万化的ViewPager切换动画

效果图都是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的模拟器上测试下效果:

Android实现千变万化的ViewPager切换动画

可以看到,我们的切换动画完美的运行在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;
大概的效果是这样的:

Android实现千变万化的ViewPager切换动画

下面我们分析代码:
我们设置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实现个性化的图片切换效果
源码下载:viewpager切换动画
以上就是本文的全部内容,希望对大家学习android软件编程有所帮助。