iOS新闻类 内容界面设计思路

671 阅读1分钟

新闻内容页要考虑的问题

  • 发布者编辑文章是什么格式?简单文本?markdown? 富文本编辑器?
    • 为了图文混排和文本的丰富性(标题,段落,加粗),建议使用markdown或者富文本编辑器。不使用简单文本。
  • 如何适配多个平台?

方式1:

  • 源码构建,就是图文混排了。可以使用使用较低层的YYKit异步渲染将性能优化到极致。
  • 缺点:渲染引擎实现难度蛮大的。

方式2:

  • 使用webView,这种方式最简单。有适配多平台的天然属性。
  • 缺点:当多图时,性能较差;交互自定义程度不高。

方式3:

原生+webView配合实现。

  • 核心思想:webView渲染文本,并预留图片视频等耗时资源位置。使用原生组件加载图片等资源并显示。
  • 具体实现:
    • 对webView进行封装, 方便js和native调用
    • 在控制器中使用scrollView嵌入webView和tableView。webView展示内容,tableView负责展示广告,相关推荐,评论等内容。 代码控制webView,tableView的位置,高度,offset属性。
    • 将html中图片,video等替换成占位符。注意宽高。(使用js)
    • 在load加载完后,获取各item(图片,video)的数据(位置,寛高,类型,url等)
    • 使用原生组件进行替换
    • 优化原生组件(循环使用,避免内存过高)
    • gif在滑动时停止展示, 可以使用gif库

效果

Demo

github.com/hejunm/wkTe…