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

新闻内容页要考虑的问题

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

方式1&＃xff1a;

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

方式2&＃xff1a;

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

方式3&＃xff1a;

原生&＃43;webView配合实现。

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

效果

Demo

github.com/hejunm/wkTe…