自定义ViewPager的切换动画ScalePageTransformer

来源：互联网发布：java rtf格式转换pdf 编辑：程序博客网时间：2024/06/12 22:50

废话不多说了，先看看效果
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);        }    }}

另附demo：github地址

0 0