告别卡顿！用ViewPager2和Fragment打造流畅的Android题库App（附完整源码）

用ViewPager2重构题库应用：从卡顿到丝滑的实战指南

当用户在你的驾考App中反复滑动题目时，突然出现的卡顿或页面错位可能直接导致差评。传统ViewPager在复杂场景下的性能瓶颈已成为Android开发的"历史遗留问题"。本文将带你用ViewPager2彻底解决这些问题，并实现以下进阶功能：

• 流畅的垂直/水平双向滑动：支持驾考题干的纵向阅读和题目间的横向切换
• 智能数据更新：通过DiffUtil实现题目变化的动画过渡
• 生命周期安全：内置的Fragment懒加载机制避免资源浪费
• RV特性继承：复用RecyclerView的缓存池提升内存效率

1. 为什么ViewPager2是必然选择

在2019年之前，Android开发者不得不忍受ViewPager的诸多限制：不支持垂直滑动、数据更新时全量刷新、嵌套滚动冲突频发。ViewPager2作为Jetpack组件库的新成员，在底层用RecyclerView彻底重构，带来了三大架构级改进：

1. 现代化架构：基于RecyclerView实现，自动继承其所有优化特性
2. 双向滑动支持：通过android:orientation属性即可切换滑动方向
3. Fragment生命周期优化：内置的FragmentStateAdapter自动处理Fragment的存活状态

对比实验数据显示，在加载100道驾考题目的场景下：

2. 构建题库核心架构

2.1 项目依赖配置

首先确保在build.gradle中添加最新依赖：

dependencies { implementation "androidx.viewpager2:viewpager2:1.0.0" implementation "androidx.fragment:fragment-ktx:1.5.5" }

2.2 布局文件优化

使用ConstraintLayout实现题目卡片和操作按钮的精准定位：

<androidx.viewpager2.widget.ViewPager2 android:id="@+id/question_pager" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toTopOf="@id/answer_group" android:orientation="horizontal"/> <RadioGroup android:id="@+id/answer_group" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent"> <!-- 选项按钮 --> </RadioGroup>

2.3 适配器实现技巧

继承FragmentStateAdapter时需要注意的优化点：

class QuestionAdapter( fragment: Fragment, private val lifecycle: Lifecycle ) : FragmentStateAdapter(fragment) { override fun getItemCount() = questions.size override fun createFragment(position: Int): Fragment { return QuestionFragment().apply { arguments = bundleOf(QUESTION_ID to questions[position].id) } } fun submitList(newList: List<Question>) { val diff = DiffUtil.calculateDiff( QuestionDiff(questions, newList) ) questions = newList diff.dispatchUpdatesTo(this) } }

提示：使用androidx.lifecycle中的SavedStateHandle保存Fragment状态，比传统的Bundle更可靠

3. 性能调优实战

3.1 预加载策略控制

// 在Activity中设置预加载数量 question_pager.offscreenPageLimit = 2 // 精确控制Fragment的加载时机 class QuestionFragment : Fragment() { override fun onResume() { super.onResume() if (isVisibleToUser) { loadQuestionData() } } override fun onPause() { super.onPause() releaseMediaPlayer() } }

3.2 滑动冲突解决方案

当题目包含可滚动内容时，需要自定义嵌套滚动逻辑：

question_pager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() { override fun onPageSelected(position: Int) { (currentFragment as? QuestionFragment)?.let { it.resetScrollState() } } }) // 在Fragment中处理嵌套滚动 question_content.setOnTouchListener { v, event -> when (event.action) { MotionEvent.ACTION_DOWN -> { parent.requestDisallowInterceptTouchEvent(true) } MotionEvent.ACTION_UP -> { parent.requestDisallowInterceptTouchEvent(false) } } false }

3.3 内存优化技巧

1. 图片加载策略：在Fragment的onViewCreated中加载图片，在onDestroyView中释放
2. 视图复用：对复杂题目类型使用ViewType区分
3. 数据缓存：实现ViewModel级别的题目缓存池

4. 高级交互实现

4.1 题目跳转动画

val transformer = CompositePageTransformer().apply { addTransformer(MarginPageTransformer(10)) addTransformer { page, position -> val scale = 1 - (0.25f * abs(position)) page.scaleY = scale } } question_pager.setPageTransformer(transformer)

4.2 答题状态同步

使用共享ViewModel实现题目间的状态同步：

class QuestionViewModel : ViewModel() { private val _answers = mutableMapOf<String, Int>() val answers: Map<String, Int> get() = _answers fun saveAnswer(questionId: String, option: Int) { _answers[questionId] = option } } // 在Fragment中 private val vm: QuestionViewModel by activityViewModels() vm.saveAnswer(question.id, selectedOption)

4.3 夜间模式适配

<style name="QuestionCard" parent="Widget.MaterialComponents.CardView"> <item name="cardBackgroundColor">?attr/colorSurface</item> <item name="android:textColor">?attr/colorOnSurface</item> </style>

在项目实践中，我们发现ViewPager2的FragmentStateAdapter在处理包含视频的题目时，需要额外注意onDestroyView中的资源释放。一个常见的优化是在Fragment中重写onDestroyView时暂停媒体播放，但保留已加载的数据模型。