Material Design 中 NestedScrollView 的使用技巧

阅读时长 4 分钟读完

在 Material Design 设计风格中,ScrollView 是常用的列表显示方式,通常用于展示较长数据列表。但是,在一些场景中,我们可能需要更复杂的嵌套式 ScrollView,这种情况下,我们就需要用到 NestedScrollView。

NestedScrollView 的简介

NestedScrollView 继承自 ScrollView,并且在原有的基础上提供了额外的嵌套滚动行为,以支持嵌套 ScrollView 的场景。在Android 5.0及以上的版本中,Google 推出了 Material Design 设计风格,NestedScrollView 就是其中一个要素。

NestedScrollView 通常是被用来包含其他的可滑动组件,例如:RecyclerView, ListView 和 GridView 等,以实现更灵活的嵌套式滑动、平滑缩放等效果。

NestedScrollView 的使用示例

下面我们来看一个简单的示例,用 NestedScrollView 展示一组 RecyclerView 集合,并实现嵌套滚动(普通 ScrollView 实现此功能比较困难)。

  1. 在 XML 中添加 NestedScrollView 布局
-- -------------------- ---- -------
--------------------------------------
    -----------------------------------
    ------------------------------------
    -------------------------------------------------------------

    -------------
        -----------------------------------
        ------------------------------------
        -------------------------------

        --------- ------------ -----
        ------------------------------------------
            ------------------------------
            -----------------------------------
            --------------------------------------

    ---------------
----------------------------------------

注意:还需在外层嵌套的布局中指定 layout_behavior 属性,这里使用的是 appbar_scrolling_view_behavior。

  1. 在 Java 中找到 NestedScrollView,并设置其打开嵌套滚动开关

NestedScrollView 常用方法

  1. setNestedScrollingEnabled(boolean enabled): 在代码中开启或关闭 NestedScrollView 的嵌套滚动开关。

  2. onNestedScroll(View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed): 当嵌套式滑动时,回调此方法,以告诉 NestedScrollView 子View嵌套滑动了多少距离。target 表示发起嵌套式滚动的子 View, dxConsumed 和 dyConsumed 表示子 View 消费的嵌套滚动距离, dxUnconsumed 和 dyUnconsumed 表示子 View 未消费的嵌套滚动距离。

  3. onNestedPreScroll(View target, int dx, int dy, int[] consumed): 当 NestedScrollView 接收到子View 嵌套滚动之前,回调此方法。

  4. dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow): 派发父 View 消耗未消耗的 NestedScrollView 偏移量。

总结

在 Material Design 设计风格中,NestedScrollView 是常用的布局方式之一,它可以更灵活地实现一些嵌套式滚动和缩放等效果。

在使用 NestedScrollView 时,我们需要关注其打开嵌套滚动开关,而且在一些操作中,例如嵌套滑动、滚动区间的处理等,需要更加细心。从而更好地实现前端的功能需求。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64ee27dff6b2d6eab3842fb0

纠错
反馈