LitePager轻量级ViewPager是什么？仿网易云歌单广场卡片轮播效果一站式解析-平芜编程栈

LitePager轻量级ViewPager是什么？仿网易云歌单广场卡片轮播效果一站式解析

【免费下载链接】LitePagerLitePager，一个轻量级的ViewPager，仿新版网易云歌单广场项目地址: https://gitcode.com/gh_mirrors/li/LitePager

LitePager 是一个轻量级的 Android ViewPager 开源库，专门用于快速实现仿新版网易云音乐"歌单广场"的卡片轮播效果：中间卡片放大、两侧卡片逐级缩小并半透明，滑动切换自然流畅。本文用大白话讲清楚它是什么、能做什么、怎么安装使用，并给出常用参数调优和自动轮播配置指南，新手也能照着做出同款效果。

🎯 LitePager是什么？核心特性一览

如果你刷过网易云音乐，一定见过歌单广场里那种"一叠卡片"的视觉：当前卡片最大最清晰，旁边两张卡片逐渐变小、变淡。自己从零实现这种层级缩放 + 透明度联动效果并不简单，而 LitePager 把它封装成了一个开箱即用的控件。

它的核心能力可以概括为 4 点：

特性	说明
🃏 卡片层级效果	顶层/中层/底层三层的缩放比例和透明度可独立调节
↔️ 双向滑动	支持水平、垂直两种滑动方向，运行时可切换
🔄 自动轮播	可开启定时自动轮播，方向、间隔均可配置
📡 状态监听	提供滚动状态监听（拖动/调整/静止）和子View选中监听

Demo 中的效果就是由 3 个卡片布局 layout_card_view_0.xml 到 layout_card_view_4.xml 组成的，卡片内容是仿歌单封面 + 歌单名（如《紫钗记》），整体由 act_main_view.xml 装配而成。

🚀 快速安装LitePager：3步完成依赖配置

LitePager 已通过 Maven 仓库发布，接入只需要两步：

第 1 步：添加依赖。打开模块的 build.gradle，在dependencies中添加：

implementation 'com.wuyr:litepager:1.3.1'

第 2 步：在布局文件中引入控件。

<com.wuyr.litepager.LitePager android:layout_width="match_parent" android:layout_height="wrap_content" />

第 3 步：添加子 View 并运行，见下一节。至此你就拥有了一个可滑动的卡片轮播容器。

📦 4种添加子View方法：从XML到适配器

LitePager 支持 4 种添加子 View 的方式，灵活度从简单到复杂递增：

方式1：XML 直接声明

把子 View 直接写在<com.wuyr.litepager.LitePager>标签内部，最直观。

方式2：批量添加 View 对象

代码中创建好 View 后，调用addViews(child1, child2, child3)一次性批量添加。

方式3：通过布局ID批量添加

addViews(R.layout.view_child1, R.layout.view_child2, ...)直接传布局资源 ID，内部自动 inflate，是最常用的写法。Demo 切换 3 张/5 张卡片就是用的这种方式，逻辑见 MainActivity.kt。

方式4：适配器（Adapter）模式

当卡片数量多、内容来自数据源时，推荐用setAdapter()。只需实现 3 个方法：

onCreateView(parent)：创建卡片根布局
onBindView(view, position)：绑定当前项数据
getItemCount()：返回数据条数

类似 RecyclerView.Adapter 的思路，写过的同学可以无缝上手。

🎛️ LitePager卡片轮播参数调优指南：三层缩放透明度速查

卡片"立体感"来自三层（顶层=当前卡片、中层=相邻卡片、底层=再外侧卡片）各自独立的缩放和透明度。常用参数及默认值如下：

参数	默认值	作用
`topScale`/`topAlpha`	1 / 1	顶层缩放比例 / 不透明度
`middleScale`/`middleAlpha`	0.8 / 0.4	中层缩放比例 / 不透明度
`bottomScale`/`bottomAlpha`	0.6 / 0.2	底层缩放比例 / 不透明度
`flingDuration`	—	滑动松手后的惯性动画时长（ms）
`orientation`	horizontal	滑动方向：`horizontal`或`vertical`

调优小经验：想让层次感更强，就拉大三层缩放差（如 1 / 0.75 / 0.5）并降低下层透明度；想让画面更"干净"，则提高各层透明度。Demo 中特意放了 6 个 SeekBar 实时调节这些值（见 MainActivity.kt），跑起来拖一拖，比看文档直观得多。

以上参数既可以在 XML 里用自定义属性静态配置，也可以在代码中调用对应的setXxx()方法动态修改，二者完全等价。

⏱️ 自动轮播配置：间隔、方向与滑动方向设置

想让卡片像 Banner 一样自己动起来，只需在布局中开启：

<com.wuyr.litepager.LitePager app:autoScroll="true" app:autoScrollInterval="2000" app:flingDuration="500" />

autoScroll：是否开启自动轮播，默认false
autoScrollInterval：轮播间隔，默认 5000ms
autoScrollOrientation：轮播方向，支持left（向左）/right/up/down
代码中对应setAutoScrollEnable()、setAutoScrollInterval()、setAutoScrollOrientation()

Demo 默认配置是每 2 秒自动切换一次、动画时长 500ms，见 act_main_view.xml。

📡 滚动状态监听与选中回调：实时掌握滑动状态

LitePager 提供两个监听接口，方便做埋点、联动 UI 等：

1. 滚动状态监听setOnScrollListener()，回调 9 种状态：

静止：STATE_IDLE
拖动中：STATE_DRAGGING_LEFT / RIGHT / TOP / BOTTOM
松手调整中：STATE_SETTLING_LEFT / RIGHT / TOP / BOTTOM

2. 选中监听setOnItemSelectedListener()，当前卡片变化时回调被选中的 View；配合getSelectedChild()可随时获取当前选中项。

Demo 里就用状态监听在界面上实时显示"向左拖动""向上调整"等中文状态文案（文案见 values-zh-rCN/strings.xml），选中时弹出 Toast 提示卡片名。

🔍 网易云歌单广场效果的实现原理小结

为什么 LitePager 能"仿"得那么像？拆开看就是三件事的组合：

层级布局：所有卡片重叠居中排布，按"距离当前选中项的远近"划分顶层、中层、底层；
属性联动：滑动的位移实时映射为每层的scale（缩放）和alpha（透明度）插值，产生"推开一叠卡片"的视差感；
惯性动画：松手后按flingDuration做补间动画，把当前卡片"推"到顶层中心位置。

卡片本身（封面图 + 歌单标题 + 圆角阴影 CardView）则完全由你自己的布局决定，参考 layout_card_view_1.xml 即可复刻歌单广场样式。

📂 核心模块路径参考

文件	说明
app/src/main/java/com/wuyr/litepagertest/MainActivity.kt	Demo 主逻辑：监听、切换、参数调节
app/src/main/res/layout/act_main_view.xml	LitePager 容器配置与自动轮播属性
app/src/main/res/layout/layout_card_view_0.xml	卡片布局（封面 + 歌单名）
app/src/main/res/values-zh-rCN/strings.xml	中文状态文案（拖动/调整等）
settings.gradle、gradle.properties	工程配置入口

❓ 常见问题FAQ

Q1：LitePager 和系统 ViewPager 有什么区别？LitePager 不追求通用分页，而是专注"卡片堆叠 + 层级缩放"这一种视觉效果，参数少、体积极轻，做歌单广场、Banner 堆叠这类场景比自行改造 ViewPager 省事得多。

Q2：支持垂直滑动吗？支持。XML 中设置app:orientation="vertical"，或代码中调用setOrientation(ORIENTATION_VERTICAL)，Demo 里用开关实时切换了方向。

Q3：子 View 能动态增删吗？可以。调用removeAllViews()清空后再addViews()重新填充即可，Demo 中 3 张/5 张卡片切换就是这样的实现；选中指定卡片用setSelection(index)。

Q4：自动轮播会影响手势滑动吗？不会冲突。用户拖动时轮播计时会被打断，松手后按惯性动画落位，随后继续按设定间隔轮播。

LitePager 用极小的体积把"网易云歌单广场"这一标志性动效封装成了几行配置，对需要卡片轮播效果的项目来说，是一个值得直接拿起来的轻量级 ViewPager 方案。

【免费下载链接】LitePagerLitePager，一个轻量级的ViewPager，仿新版网易云歌单广场项目地址: https://gitcode.com/gh_mirrors/li/LitePager

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

LitePager轻量级ViewPager是什么？仿网易云歌单广场卡片轮播效果一站式解析