文章详情页的实现——WebView和RecyclerView混合

近日接到一个需求,需要在一个页面上方用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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,692评论 25 709
  • 简介: 提供一个让有限的窗口变成一个大数据集的灵活视图。 术语表: Adapter:RecyclerView的子类...
    酷泡泡阅读 10,615评论 0 16
  • 2017年 12.月5日 晴 相机再好也美化不了父母年迈,皱纹的脸庞,爸妈,辛苦了 这几天回来简简单单陪伴你们,足...
    黄晓来阅读 1,683评论 0 0
  • 人所谓入世者,七窍玲珑滑而不实。心思剔透不易与之,视为正常的社会个体。而活的放荡不羁,不拘泥于人情世故。 什么叫适...
    布衣天心阅读 1,456评论 0 0
  • 下午的舞蹈课被罚蹲着跳50个还好坚持住了。 下自修课回社团看看,大家都还好吧。看着自己的照片有点开心。 晚上和大家...
    逆风追梦人阅读 773评论 0 0