android 带有缩放动画的露边ViewPager

最新推荐文章于 2025-03-12 11:11:07 发布

叽哩叽哩鸡

最新推荐文章于 2025-03-12 11:11:07 发布

阅读量1.3k

点赞数

分类专栏： Android知识文章标签： android viewpager 切换动画

本文链接：https://blog.youkuaiyun.com/j550341130/article/details/84303493

版权

Android知识专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何通过重写ViewPager.PageTransformer的transformPage方法，实现自定义的滑动缩放效果。通过计算view的左右偏移，实现随滑动进行等比例缩放，并展示如何设置布局属性以展现缩放动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

这标题想了半天, 也不知道描述得清不清楚, 还是放张图吧
在这里插入图片描述

完整代码可以看下我的github: https://github.com/YouCii/LearnApp/blob/master/app/src/main/java/com/youcii/mvplearn/widget/ZoomViewPager.kt
转载请标明出处:
https://blog.youkuaiyun.com/j550341130/article/details/84303493

核心代码

其实代码很简单, 其核心是ViewPager.PageTransformer, 通过重写transformPage方法来实现自定义的切换效果.
ViewPager滑动时, 每个pager均会调用transformPage方法.
上面动图的这个效果我们可以根据各个view的左右偏移即offsetX来计算缩放比例, 使view随着左右滑动进行等比例缩放即可.

	private class CustomPagerTransformer : ViewPager.PageTransformer {
        private var viewPager: ViewPager? = null

        override fun transformPage(view: View, position: Float) {
            if (viewPager == null) {
                viewPager = view.parent as ViewPager
            }

            // 当前page的左坐标
            val leftInScreen = view.left - viewPager!!.scrollX
            // 当前page的中间位置
            val centerXInViewPager = leftInScreen + view.measuredWidth / 2
            // 当前page与viewPager的相对距离(可能是正的, 也可能是负的)
            val offsetX = centerXInViewPager - viewPager!!.measuredWidth / 2

            // 缩放比例
            val offsetRate = offsetX.toFloat() * 0.15f / viewPager!!.measuredWidth
            val scaleFactor = 1 - Math.abs(offsetRate)
            if (scaleFactor > 0) {
                view.scaleX = scaleFactor
                view.scaleY = scaleFactor

                // 间距
                view.translationX = 60 * offsetRate
            }
        }
    }

然后给 viewpager.setPageTransformer(true, CustomPagerTransformer()) 即可, 动画效果就出现了.

不过此时仅有缩放动画, 界面里还是仅展示当前页面, 左右两边还是露不出来的. 这里我们需要在布局文件中给viewpager设置margin或者较小的宽度, 然后给viewpager的父布局设置此属性: android:clipChildren="false". 这条属性可以令其子view超出本身宽高限制, 展现出躲在后面的内容.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:fitsSystemWindows="true">

    <com.youcii.mvplearn.widget.ZoomViewPager
        android:id="@+id/vp_zoom"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:overScrollMode="never"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="600:1033"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.75" />

</android.support.constraint.ConstraintLayout>