recyclerview 滚动冲突_NestedScrollView 解决 Android 嵌套滚动问题

本文揭示了在Android开发中,错误将RecyclerView嵌套在ScrollView会导致滚动冲突。通过阅读官方文档并实践,作者介绍了NestedScrollView作为替代方案,解决了布局层级滚动问题,确保了良好的用户体验。
摘要由CSDN通过智能技术生成

滚动是所有客户端都很常用的交互,毕竟屏幕就这么大,显示的内容往往非常多。

Android 开发中,新手常常会使用 ScrollView 来实现滚动的效果 —— Which is not wrong。

随着需求的增加,可能会需要做一个能滚动的列表,你马上就能反应过来,RecyclerView 或者 ListView —— Which is also correct。

需求再增加,需要做一个如同各电商平台一样,上半部分是某种固定形式的布局,下方是列表的可滚动的效果:

88f96187751aabc1ffed2b7e5f923828.png

新手的直觉是:ScrollView 内嵌套 RecyclerView 或者 ListView —— Which might be able to work —— But definitely not right。

我用 ScrollViewRecyclerView 简单写一下上面这个布局:

<ScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent">

    <LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical">

        
        <GridLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:columnCount="3"android:rowCount="2">
            ...
        GridLayout>

        
        <androidx.recyclerview.widget.RecyclerViewandroid:layout_width="match_parent"android:layout_height="wrap_content" />
    LinearLayout>
ScrollView>

实际上会得到下面这种效果:

d8b5c758214c2e7bd237fbb619707657.gif

不难看出,RecyclerView 上方的网格布局在跟随 ScrollView 滚动,但 RecyclerView 却由于自身能够滚动的特性,只能在自己所处的位置滚动,而不能跟随 ScrollView 一起滚动。

这其实是一个滚动冲突的问题,解决办法也有很多,初学者遇到这个问题的时候往往是因为不知应如何描述问题而找不到答案。

其实关于 ScrollView 的 Android 官方文档中有专门提到这个问题:

Never add a RecyclerView or ListView to a scroll view. Doing so results in poor user interface performance and a poor user experience.

同时,文档还提供了解决方案:

For vertical scrolling, consider NestedScrollView instead of scroll view which offers greater user interface flexibility and support for the material design scrolling patterns.

NestedScrollView 是 Android 提供的专门解决嵌套滚动的容器,「Nested」其实就是嵌套的意思,它的使用方式和 ScrollView 基本没什么差别,但它能够支持嵌套滚动的父 View 或子 View

因此,我们只要简单替换,就可以解决上面的问题:

<androidx.core.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:fillViewport="true">

    <LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical">

        
        <GridLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:columnCount="3"android:rowCount="2">
            ...
        GridLayout>

        
        <androidx.recyclerview.widget.RecyclerViewandroid:layout_width="match_parent"android:layout_height="wrap_content" />
    LinearLayout>
androidx.core.widget.NestedScrollView>

效果如下:

9c472ebfbf44bfda5528b0c1603f3b57.gif

虽然本文使用 RecyclerView 作为讲解,但如同文档中所说,这种方法同时还支持解决 ListView 的嵌套滚动问题。

前面提到了这个问题有很多解决方式,后续文章也会继续讲解,敬请期待。

22e2ed6932c6418855f377af1aa2a5c7.png

c95a6d809b7fb9a3c983718c01bb1e60.png 88389083ec4f7ab0740b6484bf679c61.png

Like it or not
I am here

da0790338ff84f6b68dff4168156f67d.png 55d4bc372965d2171207b4cb5cfee3de.png

f8704a9d863780dc0d614ae3e60d914d.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值