关闭

自定义ViewPager的切换动画ScalePageTransformer

标签: androidviewpagerPageTransf
111人阅读 评论(0) 收藏 举报
分类:

废话不多说了,先看看效果
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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:854次
    • 积分:29
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论