Android 原生 ViewPager 实现卡片翻动效果 | 极客日志

Kotlin大前端java

Android 原生 ViewPager 实现卡片翻动效果

Android 原生 ViewPager 控件通过自定义 PageTransformer 接口实现卡片翻动动画效果。主要涉及卡片布局设计、PagerAdapter 适配器的无限循环逻辑配置、以及 ViewPager 容器的间距调整。核心变换逻辑基于页面位置计算缩放比例与平移距离，使中心页面保持最大尺寸，两侧页面缩小并偏移。此外，需合理设置预加载页数以平衡性能与流畅度。文章详细讲解了从 XML 布局到 Kotlin 代码实现的完整流程，并对 ViewPager2 迁移及性能优化提供了建议。

SparkGeek发布于 2025/2/70 浏览

Android 原生 ViewPager 实现卡片翻动效果

Android 原生 ViewPager 实现卡片翻动效果

概述

在 Android 开发中，ViewPager 是常用的页面切换组件。通过自定义 PageTransformer，可以实现丰富的页面过渡动画，例如卡片翻动效果。本文将详细介绍如何通过 ViewPager 配合 PageTransformer 实现卡片缩放与位移的视觉效果。

第一步：创建卡片 View 布局

首先定义单个卡片的布局文件 home_viewpage_item.xml。该布局用于展示卡片内容，包含背景图和中心图标。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bitmap"
    android:gravity="center">

    <ImageView
        android:id="@+id/home_viewpage_item_img"
        android:paddingBottom="@dimen/dp_82"
        android:paddingTop="@dimen/dp_82"
        android:paddingLeft="@dimen/dp_44"
        android:paddingRight="@dimen/dp_44"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />
</RelativeLayout>

注意：确保资源文件路径正确，dp_XX 等维度值需在 values/dimens.xml 中定义。

第二步：创建适配器

创建一个继承自 PagerAdapter 的适配器类 CardAdapter。为了实现无限循环滑动效果，通常将数据量设置为一个较大的数值，并在获取资源时取模。

更多推荐文章

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

class CardAdapter(var context: Context) : PagerAdapter() {
    // 模拟数据源，实际项目中可从网络或数据库加载
    val horoscopestrImgs = intArrayOf(
        R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher,
        R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher,
        R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher,
        R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher
    )

    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        return view === `object`
    }

    override fun getCount(): Int {
        // 设置一个足够大的数量以实现视觉上的无限循环
        return 12 * 30
    }

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        val view = LayoutInflater.from(context).inflate(R.layout.home_viewpage_item, null)
        
        // 使用取模运算循环显示图片
        view.findViewById<ImageView>(R.id.home_viewpage_item_img).setImageResource(
            horoscopestrImgs[position % 12]
        )

        container.addView(view)
        return view
    }

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as View)
    }
}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:overScrollMode="never"
        android:paddingBottom="@dimen/dp_240"
        android:paddingLeft="50dp"
        android:paddingRight="50dp"
        android:paddingTop="@dimen/dp_60" />
</RelativeLayout>

class CardTransformer(var context: Context) : ViewPager.PageTransformer {
    private val MAX_SCALE = 1.0f
    private val MIN_SCALE = 0.85f

    override fun transformPage(page: View, position: Float) {
        // 修正偏移量，使中心页面更精准
        var pos = position - 0.15f

        if (pos <= 1) {
            // 计算缩放因子：越靠近中心越大
            val scaleFactor = MIN_SCALE + (1 - Math.abs(pos)) * (MAX_SCALE - MIN_SCALE)

            page.scaleX = scaleFactor
            page.scaleY = scaleFactor

            // 根据位置决定平移方向
            if (pos > 0) {
                // 右侧页面左移
                page.translationX = -scaleFactor * 2
            } else if (pos < 0 && pos > -1) {
                // 左侧页面右移
                page.translationX = scaleFactor * 2
            }
        } else {
            // 超出范围则保持最小缩放
            page.scaleX = MIN_SCALE
            page.scaleY = MIN_SCALE
        }
    }
}

class MainActivity : AppCompatActivity() {
    private lateinit var viewPager: ViewPager

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewPager = findViewById(R.id.viewpager)

        // 设置自定义页面变换器
        // 第二个参数 false 表示不使用反向变换
        viewPager.setPageTransformer(false, CardTransformer(this))
        
        // 设置预加载页数，影响性能和流畅度
        viewPager.offscreenPageLimit = 5
        
        // 设置初始位置，通常设为中间值以体验无限滚动
        viewPager.currentItem = 12 * 15
        
        // 绑定适配器
        viewPager.adapter = CardAdapter(this)
    }
}