利用ViewPage的PagerTransformer定制页面切换效果

最新推荐文章于 2022-03-04 18:02:28 发布
最新推荐文章于 2022-03-04 18:02:28 发布
阅读量2k 收藏 15
点赞数 6
分类专栏： android ViewPager切换刷新与联动 文章标签： ViewPager PageTransformer 切换 ViewPager滑动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxiaocheng16/article/details/95472436
版权
  1. 利用ViewPage的PagerTransformer定制页面切换效果
  2. ViewPager动态添加删除及刷新页面
  3. ViewPager打造真正意义的无限轮播
  4. ViewPage 联动效果自带角标
  5. ViewPager禁止滑动和修改滑动速度

1. 简述

你是不是觉得 ViewPager 默认的切换效果有些平淡？其实，我们可以定制 ViewPager 的页面切换效果。定制 ViewPager 的页面切换效果，只需用到 ViewPager 的一个方法setPageTransformer(boolean reverseDrawingOrder, @Nullable PageTransformer transformer)，实现一个接口 PageTransformer 。

2. PageTransformer

PageTransformer 是 ViewPager 内部一个接口，源码如下：

/**
     * 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.
     * 每当滚动到 可见/附属 页面时，都会调用 PageTransformer 。
     *  这为应用程序提供了使用动画属性对页面视图应用自定义转换的机会。
     * <p>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.</p>
     */
    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.
         *                 页面相对于当前正中位置的位置。0代表正中。1 是右边的一个完整页面位置，
         *                 -1 是左边的一个页面位置。
         */
        void transformPage(@NonNull View page, float position);
    }

从源码注释我们可以看出， PageTransformer 就是为自定义页面切换效果而生的。

使用 PageTransformer 需要实现方法 void transformPage(@NonNull View page, float position)，这个方法有两个参数，两个参数是对应关系，position 表示页面相对于正中（0）的位置，0代表正中，1 是右边的一个完整页面位置，-1 是左边的一个页面位置。

如下图所示，ViewPager 页面滑动过程中，屏幕中显示 2 个页面，即左边页面（绿色）的一部分和右边页面（蓝色）的一部分。以虚线和页面左边缘作为位置参考，那么左边页面位置在 (-1, 0) 区间，右边页面位置在 (0, 1) 区间。它们的值是：position左 = (x左 - x0) / width，position右 = (x右 - x0) / width。
在这里插入图片描述
一般情况下我们最多只能看到如上所示两个页面，所以多数情况下，我们可以把 position 分为 3 段。

  • (-Infinity, -1) ：左边不可见页面。
  • [-1, 1]：中间可见页面，其中 [-1, 0) 表示左边可见页面，[0, 1] 表示右边可见页面。
  • (1, +Infinity) ：右边不可见页面。
    当页面的 position = 0，此页面正中显示。

可以调用 ViewPager 的 setOffscreenPageLimit(int) 方法设置了离屏缓存页面数量（空闲时，当前页面左右保留页面数量）。

如果想在 ViewPager 中显示多个页面，可以：

  • 调用 setOffscreenPageLimit(int) 设置离屏缓存页面数量 大于 1；
  • 给 ViewPager 外层控件以及 ViewPager 都设置 android:clipChildren="false"；
  • 给 ViewPager 设置 适当的 leftMargin 和 rightMargin 。

3. 例子和效果

1、手风琴效果
手风琴效果
其实就是水平缩放效果。在页面滑动时，
左边页面 position < 0，右边页面 position > 0；
左边页面以页面右边缘为缩放中心，右边页面以左边缘为缩放中心。
代码如下所示：

/**
 * 手风琴效果（水平方向缩放）
 */
public class AccordionTransformer implements ViewPager.PageTransformer {


    @Override
    public void transformPage(@NonNull View page, float position) {
        if (position < 0f) {
            page.setPivotX(page.getWidth());
            page.setScaleX(1f + position * 0.5f);
        } else if (position < 1f) {
            page.setPivotX(0f);
            page.setScaleX(1f - position * 0.5f);
        }
    }
}

2、下弧形效果
下弧形
实现此效果需以页面下边缘某一点为旋转中心旋转：

  • position < -1 时，旋转到最大角度，旋转中心为右下角；
  • -1 < position < 0 时，position 越靠近 0 ，旋转角度越小，旋转中心向下边缘中心靠拢；
  • 0 <= position <= 1 时，position 越靠近 0 ，旋转角度越小，旋转中心向下边缘中心靠拢；
  • position > 1 时，旋转到最大角度，旋转中心为左下角。

代码如下所示：

/**
 *  下弧形切换效果
 */
public class ArcDownTransformer implements ViewPager.PageTransformer {

    private static final float DEF_MAX_ROTATE = 12.0f;
    private float mMaxRotate = DEF_MAX_ROTATE;



    @Override
    public void transformPage(@NonNull View page, float position) {
        page.setPivotY( page.getHeight());
        if (position < -1f) {//[-Infinity, -1)
            page.setRotation(-mMaxRotate);
            page.setPivotX(page.getWidth());
        } else if (position <= 1f) {//[-1, 1]
            if (position < 0f) {//[-1, 0)
                page.setRotation(mMaxRotate * position);
                page.setPivotX(page.getWidth() * (0.5f - 0.5f * position));
            } else { //[0, 1]
                page.setRotation(mMaxRotate * position);
                page.setPivotX(page.getWidth() * (0.5f - 0.5f * position));
            }
        } else {//(1, +Infinity]
            page.setRotation(mMaxRotate);
            page.setPivotX(0f);
        }
    }
}

3、上弧形效果
上弧形
与下弧形相反，旋转中心以上边缘某一点：

  • position < -1 时，旋转到最大角度，旋转中心为右下角；
  • -1 < position < 0 时，position 越靠近 0 ，旋转角度越小，旋转中心向上边缘中心靠拢；
  • 0 <= position <= 1 时，position 越靠近 0 ，旋转角度越小，旋转中心向上边缘中心靠拢；
  • position > 1 时，旋转到最大角度，旋转中心为左下角。

代码如下：

/**
 * 上弧形切换效果
 */
public class ArcUpTransformer implements ViewPager.PageTransformer {

    private static final float DEF_MAX_ROTATE = 12.0f;
    private float mMaxRotate = DEF_MAX_ROTATE;

    @Override
    public void transformPage(@NonNull View page, float position) {
        page.setPivotY(0f);
        if (position < -1f) {//[-Infinity, -1)
            page.setRotation(mMaxRotate);
            page.setPivotX(page.getWidth());
        } else if (position <= 1f) {//[-1, 1]
            if (position < 0f) {//[-1, 0)
                page.setRotation(-mMaxRotate * position);
                page.setPivotX(page.getWidth() * (0.5f - 0.5f * position));
            } else { //[0, 1]
                page.setRotation(-mMaxRotate * position);
                page.setPivotX(page.getWidth() * (0.5f - 0.5f * position));
            }
        } else {//(1, +Infinity]
            page.setRotation(-mMaxRotate);
            page.setPivotX(0f);
        }
    }
}

4、立方翻转-外
立方翻转-外
其实是绕 Y 轴旋转，再加上缩放效果。绕 Y 轴旋转，用到了 View 的 setRotationY(float) 方法，此方法可以设置绕 Y 轴的旋转角度。

  • position < -1，逆时针旋转到最大角度，旋转中心为页面右边缘；
  • -1 <= position < 0，旋转中心为页面右边缘，position 越靠近 0，旋转角度越小，页面先缩小后放大，缩放值是关于 position 开口向上 对称线为 position = -0.5 的抛物线；
  • 0 <= position <= 1，旋转中心为左边缘，position 越靠近 0，旋转角度越小，页面先缩小后放大，缩放值是关于 position 开口向上 对称线为 position = 0.5 的抛物线；
  • position > 1，顺时针旋转到最大角度，旋转中心为左边缘。

引入抛物线计算缩放值，是为了让页面在滑动到一半（position 为 -0.5 和 0.5）时，缩放到最小。

需要注意 的是镜头距离，即图像与屏幕距离，距离较小时，旋转时会有较大的失真，效果很差，需要设置一下镜头距离（Camera Distance，参考 View#setCameraDistance(float)）。

代码如下：

/**
 * 立方体翻转效果
 */
public class CubicOverturnTransformer implements ViewPager.PageTransformer {

    public static final float DEFAULT_MAX_ROTATION = 60f;
    public static final float DEF_MIN_SCALE = 0.86f;

    /**
     * 最大旋转角度
     */
    private float mMaxRotation = DEFAULT_MAX_ROTATION;

    /**
     * 最小缩放
     */
    private float mMinScale = DEF_MIN_SCALE;


    public CubicOverturnTransformer() {
        this(DEFAULT_MAX_ROTATION);
    }

    public CubicOverturnTransformer(float maxRotation) {
        this(maxRotation, DEF_MIN_SCALE);
    }

    public CubicOverturnTransformer(float maxRotation, float minScale) {
        mMaxRotation = maxRotation;
        this.mMinScale = minScale;
    }


    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    @Override
    public void transformPage(@NonNull View page, float position) {
        page.setPivotY(page.getHeight() / 2f);

        float distance = getCameraDistance();
        page.setCameraDistance(distance);//设置 View 的镜头距离，可以防止旋转大角度时出现图像失真或不显示。
        if (position < -1) { // [-Infinity,-1)
            page.setRotationY(-mMaxRotation);
            page.setPivotX(page.getWidth());
        } else if (position <= 1) { // [-1,1]

            page.setRotationY(position * mMaxRotation);
            if (position < 0) {//[0,-1]
                page.setPivotX(page.getWidth());
                float scale = DEF_MIN_SCALE + 4f * (1f - DEF_MIN_SCALE) * (position + 0.5f) * (position + 0.5f);
                page.setScaleX(scale);
                page.setScaleY(scale);
            } else {//[1,0]
                page.setPivotX(0);
                float scale = DEF_MIN_SCALE + 4f * (1f - DEF_MIN_SCALE) * (position - 0.5f) * (position - 0.5f);
                page.setScaleX(scale);
                page.setScaleY(scale);
            }
        } else { // (1,+Infinity]
            page.setRotationY(mMaxRotation);
            page.setPivotX(0);
        }
    }

    /**
     * 获得镜头距离（图像与屏幕距离）。参考{@link View#setCameraDistance(float)}，小距离表示小视角，
     * 大距离表示大视角。这个距离较小时，在 3D 变换（如围绕X和Y轴的旋转）时，会导致更大的失真。
     * 如果改变 rotationX 或 rotationY 属性，使得此 View 很大 （超过屏幕尺寸的一半），则建议始终使用
     * 大于此时图高度 （X 轴旋转）或 宽度（Y 轴旋转）的镜头距离。
     * @return  镜头距离 distance
     *
     * @see {@link View#setCameraDistance(float)}
     */
    private float getCameraDistance() {
        DisplayMetrics displayMetrics = VpsApplication.getAppContext().getResources().getDisplayMetrics();
        float density = displayMetrics.density;
        int widthPixels = displayMetrics.widthPixels;
        int heightPixels = displayMetrics.heightPixels;
        return 1.5f*Math.max(widthPixels, heightPixels)*density;
    }
}

使用：

mPageTransformer = new CubicOverturnTransformer(90f, 0.6f);
mVpImgs.setPageTransformer(reverseDrawingOrder, mPageTransformer);

最大旋转角度 90 度，最小缩放到 0.6 。

5、立方翻转-内
立方翻转-内

与上一个效果是同一套代码，绕 Y 轴旋转方向相反，使用时，让 最大旋转角度小于 0 即可，如下代码所示，最大旋转角度改为 -90f 就是内部翻转:

使用：

mPageTransformer = new CubicOverturnTransformer(-90f, 0.6f);
mVpImgs.setPageTransformer(reverseDrawingOrder, mPageTransformer);

最大旋转角度 90 度，最小缩放到 0.6 。

6、下沉效果
下沉效果

特殊的缩放效果，有最小缩放值，页面缩到最小值不再缩小，同时有透明度的变化（可以去掉透明度变化）。
旋转中心位置的调整主要是为了调整页面间隙。

/**
 * 下沉效果
 */
public class DipInTransformer implements ViewPager.PageTransformer {


    private static final float MIN_SCALE = 0.85f;
    private float mMinScale = MIN_SCALE;
    private static final float MIN_ALPHA = 0.5f;
    private float mMinAlpha = MIN_ALPHA;

    @Override
    public void transformPage(@NonNull View page, float position) {
        Log.i("DipInTransformer", "transformPage: id = " + page.getId() + ", position = " + position);
        int pageWidth = page.getWidth();
        int pageHeight = page.getHeight();
//        page.setPivotX(pageWidth * 0.5f);
        page.setPivotY(pageHeight * 0.5f);
        if (position < -1f) {//(-Infinity, -1]
            page.setAlpha(mMinAlpha);
            page.setScaleX(mMinScale);
            page.setScaleY(mMinScale);
            page.setPivotX(pageWidth*1f);
        } else if (position <= 1f) {//(-1, 1)
            float scaleFactor = Math.max(mMinScale, 1 - Math.abs(position));

            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
            if (position < 0) {
                page.setPivotX(pageWidth * (0.5f + 0.5f * scaleFactor));

            } else {
                page.setPivotX(pageWidth * (0.5f - 0.5f * scaleFactor));
            }

            page.setAlpha(mMinAlpha + (scaleFactor - mMinScale) / (1f - mMinScale) * (1f - mMinAlpha));
        } else {//(1, +Infinity)
            page.setAlpha(mMinAlpha);
            page.setScaleX(mMinScale);
            page.setScaleY(mMinScale);
            page.setPivotX(pageWidth * 0f);
        }
    }
}

7、淡入淡出效果（透明度）
淡入淡出（透明度）
不多作解释，就是透明度属性动画。代码如下：

/**
 * 淡入淡出
 */
public class FadeInOutTransformer implements ViewPager.PageTransformer {

    private static final float DEF_MIN_ALPHA =0.5f;
    private float mMinAlpha = DEF_MIN_ALPHA;

    @Override
    public void transformPage(@NonNull View page, float position) {
        if (position < -1f) {//[-Infinity, -1)
            page.setAlpha(mMinAlpha);
        } else if (position <= 1f) {//[-1, 1]
            if (position < 0f) {//[-1, 0)
                page.setAlpha(1f + (1f - mMinAlpha) * position);
            } else { //[0, 1]
                page.setAlpha(1f - (1f - mMinAlpha) * position);
            }
        } else {//(1, +Infinity]
            page.setAlpha(mMinAlpha);
        }
    }
}

8、水平翻转效果（左右翻转）
左右翻转

即以水平中心线为旋转中心，绕 Y 轴旋转。代码如下所示，同样要注意镜头距离：

/**
 * 水平翻转效果
 */
public class FlipHorizontalTransformer implements ViewPager.PageTransformer {

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

        page.setCameraDistance(getCameraDistance());
        page.setTranslationX(-page.getWidth() * position);

        float rotation = 180f * position;
        page.setAlpha(rotation > 90f || rotation < -90f ? 0f : 1f);
        page.setPivotX(page.getWidth() * 0.5f);
        page.setPivotY(page.getHeight() * 0.5f);
        page.setRotationY(rotation);

        if (position > -0.5f && position < 0.5f) {
            page.setVisibility(View.VISIBLE);
        } else {
            page.setVisibility(View.INVISIBLE);
        }
    }


    private float getCameraDistance() {
        DisplayMetrics displayMetrics = VpsApplication.getAppContext().getResources().getDisplayMetrics();
        float density = displayMetrics.density;
        int widthPixels = displayMetrics.widthPixels;
        int heightPixels = displayMetrics.heightPixels;
        return 1.5f * Math.max(widthPixels, heightPixels) * density;
    }
}

9、竖直翻转效果（上下翻转）
上下翻转

即以竖直中心线为旋转中心，绕 X 轴旋转。代码如下所示，同样要注意镜头距离：

/**
 * 竖直翻转效果
 */
public class FlipVerticalTransformer implements ViewPager.PageTransformer {

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

        page.setCameraDistance(getCameraDistance());
        page.setTranslationX(-page.getWidth() * position);

        float rotation = 180f * position;
        page.setAlpha(rotation > 90f || rotation < -90f ? 0f : 1f);

        page.setPivotX(page.getWidth() * 0.5f);
        page.setPivotY(page.getHeight() * 0.5f);
        page.setRotationX(rotation);

        if (position > -0.5f && position < 0.5f) {
            page.setVisibility(View.VISIBLE);
        } else {
            page.setVisibility(View.INVISIBLE);
        }
    }


    private float getCameraDistance() {
        DisplayMetrics displayMetrics = VpsApplication.getAppContext().getResources().getDisplayMetrics();
        float density = displayMetrics.density;
        int widthPixels = displayMetrics.widthPixels;
        int heightPixels = displayMetrics.heightPixels;
        return 1.5f * Math.max(widthPixels, heightPixels) * density;
    }
}

10、浮出效果
浮出效果

让所有右边页面都移动到 正中位置，从右向左滑动切换页面时，左边从右向左滑出，右边页面放大淡入。

/**
 * 浮出效果
 */
public class RiseInTransformer implements ViewPager.PageTransformer {

    private static final float DEF_MIN_SCALE = 0.72f;

    private float mMinScale = DEF_MIN_SCALE;

    private static final float DEF_MIN_ALPHA = 0.5f;

    public RiseInTransformer() {
    }

    public RiseInTransformer(float minScale) {
        this.mMinScale = minScale;
    }

    public float getMinScale() {
        return mMinScale;
    }

    public void setMinScale(float minScale) {
        this.mMinScale = minScale;
    }

    @Override

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

        if (position < 0f) {
            page.setTranslationX(0f);
        } else if (position <= 1) {
            page.setTranslationX(-position * page.getWidth());
            page.setScaleX(1f - (1f - mMinScale) * position);
            page.setScaleY(1f - (1f - mMinScale) * position);
            page.setAlpha(1f - (1f - DEF_MIN_ALPHA) * position);
        } else {
            page.setTranslationX(-position * page.getWidth());
            page.setScaleX(mMinScale);
            page.setScaleY(mMinScale);
            page.setAlpha(DEF_MIN_ALPHA);

        }

    }
}

调用时需要反转绘制顺序，即 reverseDrawingOrder = true，使左边页面先绘制，右边页面后绘制，否则效果无法实现。

int reverseDrawingOrder  = true;
mVpImgs.setPageTransformer(reverseDrawingOrder  , mPageTransformer);

11、下潜效果
下潜效果

让所有左边页面都移动到 正中位置，切换页面时，左边页面缩小淡出，右面页面从右向左滑入正中。

/**
 * 下潜效果
 */
public class DiveOutTransformer implements ViewPager.PageTransformer {

    private static final float DEF_MIN_SCALE = 0.72f;

    private float mMinScale = DEF_MIN_SCALE;

    private static final float DEF_MIN_ALPHA = 0.5f;

    public DiveOutTransformer() {
    }

    public DiveOutTransformer(float minScale) {
        this.mMinScale = minScale;
    }

    public float getMinScale() {
        return mMinScale;
    }

    public void setMinScale(float minScale) {
        this.mMinScale = minScale;
    }

    @Override

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

        if (position < -1f) {
            page.setScaleX(mMinScale);
            page.setScaleY(mMinScale);
            page.setAlpha(DEF_MIN_ALPHA);
            page.setTranslationX(-position * page.getWidth());
        } else if (position <= 0) {
            page.setTranslationX(-position * page.getWidth());
            page.setScaleX(1f + (1f - mMinScale) * position);
            page.setScaleY(1f + (1f - mMinScale) * position);
            page.setAlpha(1f + (1f - DEF_MIN_ALPHA) * position);
        } else {
            page.setTranslationX(0f);
        }

    }


}

调用时不需要反转绘制顺序，即 reverseDrawingOrder = false，使右边页面先绘制，左边页面后绘制，否则效果无法实现。

int reverseDrawingOrder  = false;
mVpImgs.setPageTransformer(reverseDrawingOrder  , mPageTransformer);

12、堆叠效果
堆叠效果

所有右边页面移动到正中位置，即 0 位置，滑动时，把最上面页面滑掉，代码如下所示：

/**
 * 堆叠效果
 */
public class StackTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(@NonNull View page, float position) {
        page.setTranslationX(position < 0 ? 0f : -page.getWidth() * position);
    }
}

调用时需要反转绘制顺序，即 reverseDrawingOrder = true，使左边页面先绘制，右边页面后绘制，否则效果无法实现。

int reverseDrawingOrder  = true;
mVpImgs.setPageTransformer(reverseDrawingOrder  , mPageTransformer);

13、缩放效果
缩放效果
比较简单，与淡入淡出效果类似，不多作解释：

/**
 * 缩放效果
 */
public class ZoomInOutTransformer implements ViewPager.PageTransformer {

    private static final float DEF_MIN_SCALE = 0.9f;
    private float mMinScale = DEF_MIN_SCALE;


    @Override
    public void transformPage(@NonNull View page, float position) {
        if (position < -1f) {//[-Infinity, -1)
            page.setScaleX(mMinScale);
            page.setScaleY(mMinScale);
        } else if (position <= 1f) {//[-1, 1]
            if (position < 0f) {//[-1, 0)
                page.setScaleX(1f + (1f - mMinScale) * position);
                page.setScaleY(1f + (1f - mMinScale) * position);
            } else { //[0, 1]
                page.setScaleX(1f - (1f - mMinScale) * position);
                page.setScaleY(1f - (1f - mMinScale) * position);
            }
        } else {//(1, +Infinity]
            page.setScaleX(mMinScale);
            page.setScaleY(mMinScale);
        }
    }
}

并行覆盖效果
并行覆盖效果

通过调用 View 的 setScrollX() 方法，使页面内容随着 position 移动。

public class ParallaxTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(@NonNull View page, float position) {
        int width = page.getWidth();
        if (position <= -1f) {
            page.setScrollX(0);
        } else if (position < 1f) {

            if (position < 0f) {
                page.setScrollX((int) (width * 0.75f * position));
            } else {
                page.setScrollX((int) (width * 0.75f * position));
            }

        } else {
            page.setScrollX(0);
        }
    }
}

调用时需要反转绘制顺序，即 reverseDrawingOrder = true，使左边页面先绘制，右边页面后绘制，否则效果无法实现。

int reverseDrawingOrder  = true;
mVpImgs.setPageTransformer(reverseDrawingOrder  , mPageTransformer);

项目地址

https://github.com/wangzhengyangNo1/ViewPagerSerialDemo

4. 参考

【1】巧用ViewPager 打造不一样的广告轮播切换效果
【2】ViewPager 超详解：玩出十八般花样
【3】关于ViewPager.PageTransformer的一些理解
【4】一个卡片式的ViewPager，带你玩转ViewPager的PageTransformer属性！

wandryoung
关注
  • 6
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android使用自定义PageTransformer实现个性的ViewPager动画切换效果
08-27
主要介绍了Android使用自定义PageTransformer实现个性的ViewPager切换动画，具有很好的参考价值，一起跟随小编过来看看吧
PagerTransformer
04-16
给ViewPager加上好看的动画效果
PageTransformer
05-19
PageTransformer private void initFanZhuan() { sensorMgr = (SensorManager) getSystemService(SENSOR_SERVICE); sensor = sensorMgr.getDefaultSensor(Sensor.TYPE_ACCELEROMETER); SensorEventListener lsn = new SensorEventListener() { public void onSensorChanged(SensorEvent e) { x = e.values[SensorManager.DATA_X]; y = e.values[SensorManager.DATA_Y];
ViewPager的PageTransformer和transformPage方法详解
ScottePerk的博客
03-04 2256
通过PageTransformer这个接口可以实现ViewPager在滑动的时候的一些动画效果。PageTransformer接口只有一个transformPage方法。 void transformPage(@NonNull View page, float position); 这个方法第一个参数表示当前正在滑动的页面，第二个参数就比较难以理解了。不过没关系，特地画了图来解释。 在我们第一次加载ViewPager没有滑动的情况下，page0是位于position0到position1之间。位于pos
Android-->ViewPager setPageTransformer的简单理解
<angcyo>菜鸟视角
11-12 9914
网上有很多文章关于setPageTransformer的使用, 个人认为篇幅太长,理解起来费劲.(勿喷)setPageTransformer多用于ViewPager的滑动动画,下面这个项目提供了11种切换效果: https://github.com/jfeinstein10/JazzyViewPager关于setPageTransformer的其他详细博文,传送门如下: http://blog.
ViewPage Fragment页面滑动切换
05-21
使用ViewPage以及Fragment进行页面滑动切换
android 自定义酷炫ViewPager切换效果带页面弹性指示器动画
09-02
自定义酷炫的ViewPager控件 在切换图片时，带页面弹性指示器动画效果
android viewpage 实现页面切换和点击事件
08-16
android viewpage 实现页面切换和点击事件
ActionBar +viewPage页面切换
12-14
ActionBar +viewPage页面切换，Android选项卡 TabLayout Fragment ViewPager
viewpage_fragment_多页面滑动效果.rar
09-28
viewpage_fragment_多页面滑动效果.rar
ViewPager通过PageTransformer实现切换时背景色的渐变
weixin_33726943的博客
02-14 276
定个小目标 我们要实现如下的效果，ViewPager正中的page显示为绿色，其余两边的显示为蓝色。中间page像左右两边切换时会从绿色慢慢过渡到蓝色，同理两边的page向中间切换时颜色也会慢慢过渡，而不是直接跳变。 PageTransformer 为了实现以上效果我们要借助PagerTransfromer，所以有必要简单介绍下 /** * A PageTransformer is invok...
ViewPager，OnPageChangeListener及PageTransformer
飞鸟
06-28 1553
ViewPager的adapter         该adapter除了明着要求重写的两个方法，还需要重写 public void destroyItem(ViewGroup container, int position, Object object)public Object instantiateItem(ViewGroup container, int position)
setPageTransformer几个特效
qq_34425670的博客
08-14 2084
1、DepthPageTransformer import android.support.v4.view.ViewPager; import android.view.View; /** * Created by Administrator on 2016/8/12. */ public class DepthPageTransformer implements ViewPager.P
ViewPager的PageTransformer用法
余生无须指教
03-21 743
没gif就看静态图了 ViewPager可以通过setPagerTranformer（）方法设置子view的过度动画，在接口PageTransformer中只有transformPage(View page,float position)，使用者需要实现该方法来展示动画,下面是一个实现实例。 public void transformPage(View page, float posit
Android使用自定义ViewPager实现个性的动画切换效果
Alex的博客
03-25 481
1、概述 1、介绍如何使用setPageTransformer设置切换动画； 2、自定义PageTransformer实现个性的切换动画； 官方示例地址：http://developer.android.com/training/animation/screen-slide.html 有兴趣的可以去看看~~ 好了，下面开始编写代码~~ 2、setPageTransformer的使用 首先我们迅速的实现一个传统的ViewPager效果~ 1、布局文件 1 2 3
fragment+viewpage实现页面切换
最新发布
06-08
使用Fragment和ViewPager实现页面切换的步骤如下： 1. 创建Fragment：创建需要显示的Fragment，并实现Fragment的布局和逻辑。 2. 创建ViewPager：在主界面布局中添加ViewPager，并创建一个PagerAdapter（适配器）用于管理Fragment。 3. 实现PagerAdapter：创建一个继承FragmentPagerAdapter或FragmentStatePagerAdapter的适配器，重写getItem()方法，返回对应位置的Fragment。 4. 设置ViewPager：将创建好的适配器设置给ViewPager，并添加TabLayout（选项卡）用于切换页面。 具体实现步骤如下： 1. 创建需要显示的Fragment： ``` public class Fragment1 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment1_layout, container, false); // TODO: 添加需要显示的布局和逻辑 return view; } } ``` 2. 创建ViewPager： ``` <androidx.viewpager.widget.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 3. 实现PagerAdapter： ``` public class MyPagerAdapter extends FragmentPagerAdapter { private List<Fragment> mFragments; private List<String> mTitles; public MyPagerAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) { super(fm); mFragments = fragments; mTitles = titles; } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } @Nullable @Override public CharSequence getPageTitle(int position) { return mTitles.get(position); } } ``` 4. 设置ViewPager： ``` ViewPager viewPager = findViewById(R.id.view_pager); List<Fragment> fragments = new ArrayList<>(); fragments.add(new Fragment1()); fragments.add(new Fragment2()); List<String> titles = new ArrayList<>(); titles.add("页面1"); titles.add("页面2"); MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager(), fragments, titles); viewPager.setAdapter(adapter); TabLayout tabLayout = findViewById(R.id.tab_layout); tabLayout.setupWithViewPager(viewPager); ``` 这样就可以使用ViewPager和Fragment实现页面切换了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值