概述
在使用v4包下的ViewPager控件时,默认的视图切换动画很一般,有什么办法可以实现自定义的切换动画,打造千变万化的视图切换效果呢?其实ViewPager自带了一个setPageTransformer用于设置切换动画,我看了一下目前有300多行的ViewPager源码,在其中找到了该方法setPageTransformer以及自定义动画的接口PageTransformer 。
public void setPageTransformer(boolean reverseDrawingOrder, android.support.v4.view.ViewPager.PageTransformer transformer) { /* compiled code */ }
public interface PageTransformer {
public void transformPage(View page, float position);
}
本博文将:
- 介绍setPageTransformer方法的具体使用
- 解决该方法在3.0以下系统即SDK11无效的问题,实现向下兼容
- 通过了解PageTransformer接口的用法,实现自定义个性切换动画
开始工作了~~
###setPageTransformer的使用
- 先来个Viewpager的布局文件:
<?xml version="1.0" encoding="utf-8"?>
<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/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
- HomeActivity:
package com.android.viewpager_anim;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
/**
=================================================
*作者: lty
*描述:主界面,实现带有切换动画的Viewpager
===============================================
*/
public class HomeActivity extends AppCompatActivity {
/**
* 定义ViewPager
*/
private ViewPager viewPager;
/**
* 页卡数据
*/
private List<View> vList;
/**
* ViewPager的适配器
*/
private MyPagerAdapter pagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/**
* 绑定控件
*/
viewPager= (ViewPager) findViewById(R.id.viewPager);
/**
* 初始化页面数据
*/
initData();
/**
* 配置适配器
*/
pagerAdapter = new MyPagerAdapter(vList);
viewPager.setAdapter(pagerAdapter);
}
private void initData() {
//页面数据
vList = new ArrayList<View>();
View view1 = LayoutInflater.from(this).inflate(R.layout.view01, null);
vList.add(view1);
View view2 = LayoutInflater.from(this).inflate(R.layout.view02, null);
vList.add(view2);
View view3 = LayoutInflater.from(this).inflate(R.layout.view03, null);
vList.add(view3);
}
}
结合Google给出了两种动画示例:
DepthPageTransformer和ZoomOutPageTransformer,代码如下
DepthPageTransformer
public class DepthPageTransformer implements ViewPager.PageTransformer {
/**
* Scale the page down
*/
private static float MIN_SCALE = 0.75f;
/**
*
* @param view
* @param position 对应三个临界值-1 0 1
*/
@SuppressLint("NewApi")
@Override
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);
}
}
}
在绑定控件后加入:viewPager.setPageTransformer(true, new DepthPageTransformer());
效果图参考:
ZoomOutPageTransformer
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
/**
* Scale the page down
*/
private static float MIN_SCALE = 0.85f;
/**
* pageItem alpha
*/
private static float MIN_ALPHA = 0.5f;
@Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-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);
}
}
}
在绑定控件后加入:viewPager.setPageTransformer(true, new ZoomOutPageTransformer());
效果图参考如下:
接下来,我们对setPageTransformer的使用版本向下兼容:
先来了解一下为什么在3.0系统以下,该方法失效
摘自ViewPager源码:
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();
}
}
从源码中可以看到,我们在调用该方法的时候,里面进行了对SDK大小的判断,当安装的设备大于等于3.0系统时,才会执行上面的属性动画,当然属性动画也是3.0之后才提出的,为了解决这个问题,我们引入一个动画管理Jar包——nineoldandroids
修改后的代码参考:
public class DepthPageTransformer implements ViewPager.PageTransformer {
/**
* Scale the page down
*/
private static float MIN_SCALE = 0.75f;
/**
*
* @param view
* @param position 对应三个临界值-1 0 1
*/
@SuppressLint("NewApi")
@Override
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);
}
}
}
在绑定控件后加入:viewPager.setPageTransformer(true, new DepthPageTransformer()),同时将编译的最小SDK设为2.3,进行测试;
自定义PageTransformer实现个性切换动画
先来看一下官方对这个接口***ViewPager.PageTransformer***的描述
/**
* A PageTransformer is invoked whenever a visible/attached page is scrolled.
* This offers an opportunity for the application to apply a custom transformation
* to the page views using animation properties.
*As property animation is only supported as of Android 3.0 and forward,
* setting a PageTransformer on a ViewPager on earlier platform versions will
* be ignored./
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是应用动画的控件**,**第二个是一个float类型的值**。
这里的position代表当前滑动状态,从源码中可以看出它有***三个临界值-1 0 1***。-1代表当前view的前一个view所在的位置,0代表当前屏幕显示的view的位置,1代表当前view的下一个view所在的位置。
如图片:~~
其实从官方示例的注释就能看出:
[-Infinity,-1) 、(1,+Infinity] 代表已经看不到了
[-1,1]其他两个的View都已经看不到了~~,我们实际操作的重要部分
假设现在ViewPager从A页滑出到B页,则:
A页的position变化就是( 0, -1]——消失
B页的position变化就是[ 1 , 0 ]——显示
官方给的例子,有透明度、偏移量、缩放变化,这里来一个角度变化,即rotation;
大概的效果是这样的:
重点部分解析:
//设置View旋转的中心X轴、Y轴
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 ;
完整代码如下:
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
import com.nineoldandroids.view.ViewHelper;
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);
}
}
}
再来一个角度旋转+缩放(兼容3.0以下):
完整代码参考:
package com.c.viewpager_anim;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
import com.nineoldandroids.view.ViewHelper;
public class RotateAndZooomDownPageTransformer implements ViewPager.PageTransformer {
//旋转最大精度
private static final float ROT_MAX = 20.0f;
private float mRot;
/**
* Scale the page down
*/
private static float MIN_SCALE = 0.85f;
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.
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
/*****************************/
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) { /*****************************/
ViewHelper.setTranslationX(view, horzMargin - vertMargin / 2);
/*****************************/
mRot = (ROT_MAX * position);
ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);
ViewHelper.setPivotY(view, view.getMeasuredHeight());
ViewHelper.setRotation(view, mRot);
} else {
/*****************************/
ViewHelper.setTranslationX(view, horzMargin + vertMargin / 2);
/*****************************/
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.
/*****************************/
ViewHelper.setTranslationX(view, horzMargin - vertMargin / 2);
ViewHelper.setScaleX(view, scaleFactor);
ViewHelper.setScaleY(view, scaleFactor);
/******************************/
} else { // (1,+Infinity]
// Scale the page down (between MIN_SCALE and 1)
// This page is way off-screen to the right.
ViewHelper.setRotation(view, 0);
}
}
}