上面webview 下边评论

2018-10-16 11:50:49

近日接到一个需求,需要在一个页面上方用webview显示网页的内容,下半部分用原生实现一个评论列表。

初步想法有两个:

1、Header模式:用RecyclerView显示原生的评论列表,把WebView作为RecyclerView的第0项。

ViewGroup.LayoutParams lp =newViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);

WebView web =newWebView(parent.getContext());

web.setLayoutParams(lp);

需要把WebView撑开,保证WebView的内容完全展示。

2、ScrollView模式:最外层用NestedScrollView容器,内层放一个LinearLayout,从上到下依次是WebView和RecyclerView;

布局上没有什么大的问题,就是滚动会觉得有点卡,没有关系,设置一下就好了。

LinearLayoutManager layoutManager =newLinearLayoutManager(this);

layoutManager.setSmoothScrollbarEnabled(true);

layoutManager.setAutoMeasureEnabled(true);

recyclerView.setLayoutManager(layoutManager);

recyclerView.setHasFixedSize(true);

recyclerView.setNestedScrollingEnabled(false);

recyclerView.setLayoutManager(layoutManager);

Pros and Cons:

总的来说,优缺点非常明显,在评论列表条数特别多(实验时用了500条)的时候:

页面初始化结束时:Header模式申请的内存为25.77m;ScrollView模式申请的内存为37.87m

列表滚动到底时:Header模式申请的内存为28.09m; ScrollView模式申请的内存为40.63m

gc后:Header模式申请的内存为25.05m; ScrollView模式申请的内存为27.77m

Example: https://github.com/bobbySpace/WebviewAndList

  • 2020-03-03 09:51:38

    写一个可插入自定义标签的 Textarea 组件

    为了实现这个功能,我最先想的是改造一个 <textarea> 然后我想到了 contenteditable (链接指向 mozilla.org) 这一属性 这是一个 html5 的属性,可以让元素内容可编辑

  • 2020-03-03 20:18:21

    Vuepress如何做到在 Markdown 中使用 Vue 语法

    在 vuepress 刚出时,我就觉得这是个很值得追更的开源项目。果不其然,里面众多的前端编程技巧让我受益良多。 于是在周末这种日子里,人家追剧我追码。 今天,我就和大家分享下 vuepress 是如何做到在 Markdown 中使用 Vue 语法的。

  • 2020-03-03 21:35:57

    PWA:安装 Web 应用

    要完整介绍 PWA 是什么,需要扯一堆名词,毫无意义。 以改造公羊阅读的过程为例,简要的说明什么是 PWA。

  • 2020-03-04 13:00:23

    NPM酷库:minimist,命令行参数解析

    昨天我们了解的dotenv库用于从文件中加载环境变量。环境变量用于程序运行时动态加载参数,除了环境变量,我们还可以在启动Node.js 程序时直接指定命令行参数: