随着 Material Design 风格在移动应用界面设计中的广泛应用，实现滚动效果成为了许多应用的必要功能。本文将介绍在 Android Studio 中如何使用 Material Design 实现滚动效果的详细指南，包括使用 RecyclerView 和 NestedScrollView 两种常见方式。
RecyclerView 实现滚动效果
RecyclerView 是在 Android Lollipop 版本中引入的新组件，用于简化 ListView 的替代方案。除了在显示列表数据方面具有更好的性能和灵活性优势外，RecyclerView 还可以通过设置 LayoutManager，并使用 ItemDecoration 和动画等辅助特性，实现滚动效果。
实现步骤
- 在布局文件中添加 RecyclerView 组件。
<androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" />
- 创建 Adapter 类，并重写 onCreateViewHolder 和 onBindViewHolder 两个方法实现数据绑定。这里为了展示滚动效果，将每个列表 item 的高度设置为 200dp。
-- -------------------- ---- ------- ----- ----------------- --- ----- ------------- - -------------------------------------------- - ----- ----- -------------------- ----- - --------------------------------- - --- --------- -------- - ----------------------------------------- - -------- --- -------------------------- ---------- --------- ----- ---------- - --- ---- - -------------------------------------------------------------------------------- ------- ------ ------------------------ - -------------------------- ------ ---------------- - -------- --- ------------------------ ----------- --------- ---- - -------------------- - -------------- - -------- --- -------------- - --------- ------- --- ------------------- -------- - ------------------------------------------------------ --------------- ----------------------------------------- -展开代码
- 在 Activity 或 Fragment 中设置 RecyclerView 的 LayoutManager 和 Adapter，并自定义 ItemDecoration 实现 item 之间的分割线效果。
-- -------------------- ---- ------- ------------------ - ------------- - -------------------------------------- ------- - ------------------ - ----- ---- -- -------------------------- - ------- --- ------- - ------ - ----------------------------- - -------- --- ----------------------- ----- ----- ----- ------- ------------- ------ ------------------- - -------------- - ---------------------- - -------- --- --------- ------- ------- ------------- ------ ------------------- - --- ------- - ------------- - ----- - ------------ ----------- - ---------------------------------- - --- -- -- - ----- ----------------- - -- - --- ----- - -------------------- -------------------------------- ------------- - ------------- ---------------------- ------------- - ------------- -------- - - -展开代码
至此，一个带有滚动效果的 RecyclerView 就已经实现了。代码中使用到了 dpToPx 的扩展函数，方便将 dp 转换成像素值。
学习和指导意义
RecyclerView 的使用已经成为了现代 Android 应用开发中的标准做法，它不仅具有更好的性能，还提供了更灵活的视觉效果的展现方式。掌握 RecyclerView 的应用技巧，能够快速实现高质量的滚动效果。此外，使用 Kotlin 扩展函数可以大大简化代码的书写过程，提高开发效率。
NestedScrollView 实现滚动效果
如果我们需要在一个布局中实现多个滑动功能组合， RecyclerView 的功能就不足够了。除了 ScrollView 组件之外，Android 在版本 21 引入了 NestedScrollView，它为 ScrollView 增加了嵌套滚动的功能，能够与其他具有滑动功能的组件一起工作，通过实现 APPBarLayout 和 CollapsingToolbarLayout 实现更为复杂的滑动效果。
实现步骤
- 在布局文件中添加 NestedScrollView 组件，并在其中添加其他需要滑动的组件。这里将 TabLayout 和 ViewPager2 组件添加到 NestedScrollView 中。
-- -------------------- ---- ------- -------------------------------------- ----------------------------------- ------------------------------------ - -------------------------------------------- ----------------------------------- ------------------------------------ - ---------------------------------- ----------------------------------------- --- -- ------------------------------------------- ------------------------------------------------- --- -- -------------------------------------- --------------------------------------------------- --- -- ---------------------------------------------- ----------------------------------------展开代码
- 在 Activity 或 Fragment 中给 ViewPager2 添加 Adapter 和数据源，同时将 TabLayout 和 ViewPager2 进行绑定。
viewPager.adapter = MyAdapter(this) TabLayoutMediator(tabLayout, viewPager) { tab, position -> tab.text = "Tab $position" }.attach()
- 在布局文件中添加 APPBarLayout 和 CollapsingToolbarLayout 组件，并将其包裹在 NestedScrollView 外面。
-- -------------------- ---- ------- ------------------------------------------------ ----------------------------------- ------------------------------------ ------------------------------------------------------------ - ----------------------------------------------------------- ----------------------------------- ------------------------------------ -------------------------------------------------- - ---------------------------------- ----------------------------- --- -- --- ------------------------------------------------------------- --------------------------------------------------展开代码
- 最后，如果需要自定义 Toolbar 的外观和行为，则需要在这之后添加计算和设置 CollapsingToolbarLayout 高度和 Toolbar 外边距的代码。
val height = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 200f, resources.displayMetrics).toInt() val params = appbar_layout.layoutParams as CoordinatorLayout.LayoutParams params.height = height + resources.getDimensionPixelSize(R.dimen.abc_action_bar_default_height_material) + resources.getDimensionPixelSize(R.dimen.status_bar_height) appbar_layout.layoutParams = params val toolbarParams = collapsing_toolbar.getChildAt(0).layoutParams as CollapsingToolbarLayout.LayoutParams toolbarParams.marginTop = resources.getDimensionPixelSize(R.dimen.status_bar_height) collapsing_toolbar.getChildAt(0).layoutParams = toolbarParams
至此，一个带有 AppBarLayout 和 CollapsingToolbarLayout 的滚动效果就已经实现了。
学习和指导意义
NestedScrollView 可以方便地实现多个组件的嵌套滚动，而 CollapsingToolbarLayout 则为工具栏和视觉效果提供了更为复杂和多样化的实现方式。深入理解 ScrollView、NestedScrollView、APPBarLayout 和 CollapsingToolbarLayout 的原理和使用技巧，有助于应对更为复杂和具有高要求的界面设计需求。
代码示例
完整的 Android Studio 代码示例可以在 GitHub 仓库 中获取。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cec76ae46428fe9e96fbc6
