自定义ViewPager的切换动画ScalePageTransformer

最新推荐文章于 2025-11-19 13:15:19 发布

原创最新推荐文章于 2025-11-19 13:15:19 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#android #viewpager #PageTransf

Android 同时被 2 个专栏收录

4 篇文章

订阅专栏

ViewPager

1 篇文章

订阅专栏

本文介绍如何在Android中创建一个自定义ViewPager，实现ScalePageTransformer效果，使得页面在切换时具有平滑的缩放动画。通过设置android:clipToPadding为false，可以在同一屏幕显示多个页面。在实现过程中，通过分析ViewPager源码，修改PageTransformer中的position计算方式，解决了全屏缩放时页面不在屏幕中心的问题。提供了一个GitHub上的demo链接供参考。

废话不多说了，先看看效果
demo效果图
接下来，我们分析一下实现过程。
首先，使用ViewPager实现类似Gallery效果只需要在布局文件上加上android：clipToPadding=”true”就行。clipToPadding这个属性指的是是否允许子组件布局到父组件的padding区域，默认是true，即不允许。将这个属性设置为false之后，就能实在在同一个屏幕显示多个PageView的效果。

       <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:overScrollMode="never"
            android:layout_centerInParent="true"
            android:clipToPadding="false"
            android:paddingLeft="70dp"
            android:paddingRight="70dp">

        </android.support.v4.view.ViewPager>

其次是要实现page页的切换效果。要实现切换效果就要使用ViewPager的PageTransformer类。如果我们的page是横向满屏的话，直接继承该类就行。例如实现切换时的缩放效果，代码可以简单的这么写：

public class ScalePageTransformer implements ViewPager.PageTransformer {

    public static final float MIN_SCALE = 0.75f;

    @Override
    public void transformPage(View page, float position) {

        if (position < -1) { // [-Infinity,-1)
            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);

        } else if (position <= 1) { // [-1,1]
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);

        }

    }

}

但是如果我们的想要在同一个屏幕显示多个page，那么，我们就会发现，同样使用上面的代码，当page放大到最大的时候，page的位置并不在屏幕的正中间，而是在屏幕的最左侧。
通过ViewPager的源代码，我们发现，问题就出在transformPage的pisition参数上，ViewPager相关源码如下：

if (mPageTransformer != null) {
            final int scrollX = getScrollX();
            final int childCount = getChildCount();
            for (int i = 0; i < childCount; i++) {
                final View child = getChildAt(i);
                final LayoutParams lp = (LayoutParams) child.getLayoutParams();

                if (lp.isDecor) continue;
                final float transformPos = (float) (child.getLeft() - scrollX) / getClientWidth();
                mPageTransformer.transformPage(child, transformPos);
            }
}

private int getClientWidth() {
        return getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
}

我们发现position表示的是page页左侧到屏幕左侧的距离与ViewPager内容区域（除去padding区域）的比值。因此当position的值为0的时候，page页左侧正好与屏幕左侧重合，这显然不是我们想要的。那么我们就可以参考ViewPager的源码，改进position的计算方式，达到我们需要的效果。参考代码如下：

package demo.xuqingqi.cardviewpager;

import android.support.v4.view.ViewPager;
import android.view.View;

/**
 * Created on 2016/8/29.
 */
public class ScalePageTransformer implements ViewPager.PageTransformer {

    public static final float MIN_SCALE = 0.75f;

    /**
     * 重新计算 page 的位置transformPos，使得
     * 当page居中时 transformPos为0
     * 当page向左偏移时 transformPos为[-Infinity, 0)
     * 当page向右偏移时 transformPos为(0, +Infinity]
     */
    @Override
    public void transformPage(View page, float position) {

        ViewPager viewPager = (ViewPager) page.getParent();
        int scrollX = viewPager.getScrollX();
        int clientWidth = viewPager.getMeasuredWidth() -
                viewPager.getPaddingLeft() - viewPager.getPaddingRight();
        int offsetX = page.getLeft() - scrollX;
        int parentWidth = viewPager.getMeasuredWidth();
        int childWidth = page.getWidth();
        float deltaX = (float) (parentWidth - childWidth) / 2;
        float transformPos = (offsetX - deltaX) / clientWidth;

        if (transformPos < -1) { // [-Infinity,-1)
            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);

        } else if (transformPos <= 1) { // [-1,1]
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(transformPos));
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);

        }

    }

}