对嵌套RecyclerView的优化

2019-05-21 12:44:31

参考地址 对嵌套RecyclerView的优化


英文原文:Optimizing Nested RecyclerView 

RecyclerView 是一个更高级的 ListView ,它可以重用view避免额外创建太多的view从而带来流畅的滚动性能。RecyclerView通过叫做 View pool 的东西持有不再可见的 view ,让它可被回收。

有时我们需要使用嵌套的RecyclerView来创建某些布局。比如在一个垂直的RecyclerView中嵌套水平的RecyclerView。

从图中可以看到一个带横向滚动列表的垂直滚动列表。这是通过在一个recyclerView中嵌套另一个recyclerView来实现的。

当用户滚动横向列表的时候,inner RecyclerView可以流畅的滚动。但是当垂直滚动的时候, inner RecyclerView 中的每个view再次inflated了一遍,从而感觉很卡顿。这是因为每个嵌套的 RecyclerViews 都有各自的 view pool。

我们可以为所有 inner RecyclerView 设置一个单一的 view pool ,从而解决这个问题。

使用RecyclerView.setRecycledViewPool(RecycledViewPool) 方法可以帮助你设置一个自定义的 view pool,代码如下:

public OuterRecyclerViewAdapter(List<Item> items) {    //Constructor stuff    viewPool = new RecyclerView.RecycledViewPool();}
@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {    //Create viewHolder etc    holder.innerRecyclerView.setRecycledViewPool(viewPool);    }

现在所有的 inner RecyclerView都是同一个 view pool了。这样就大大的减少了view的创建,提高了滚动性能。


  • 2020-03-22 21:16:07

    用vue做的跟随鼠标移动的div

    最近接到一个任务,就是在既存用electron-vue开发的桌面端程序上追加随鼠标移动的动画效果,之前一直使用angular和react,没怎么接触过vue,先做一个vue的简单例子,然后再整合。

  • 2020-03-23 15:16:30

    import,require具体用法

    import 和 require 是JS模块化编程使用的,是前端开发者们在性能探索中的又一大进步。

  • 2020-03-30 15:37:12

    PM2下使用 npm run 命令

    npm run xxxx 是 node常用的启动方式之一,本文介绍下如何用PM2来实现该方式的启动。 下面是项目的package.json文件部分代码:

  • 2020-04-01 10:15:11

    vue-cli3.0中vue.config.js的基本配置(去除esLint提示和解决build后静态文件路径报错)

    vue-cli是开发vue项目必不可少的脚手架工具,3.0版本之前的目录结构是由config目录的,关于webpack配置的文件都放在该目录里面,而3.0版本之后做了一个大更新,webpack相关的默认配置都帮你集成到webpack的npm 包里面去了,官方提供的一种修改配置的方式就是开发者自己在项目的根目录(与src同层级的目录)下建立一个vue.config.js的文件,然后去覆盖自定义的配置,达到你想要的效果,下面写一个基本的默认配置