2017最新白帽子教程,持续更新中~~~

类似简书个人页多方案实现分析

Uncategorized toy 22℃ 0评论

我尽量用语言清楚描述,这个常用页面吧。

该页面分为3部分,上中下。整个页面可以上下滑动,当滑到中部分时候,中部分固定到顶端,下部分可继续滑动。下部分可以左右滑动,切换下部分视图。也支持,中部分,点击切换,下部分视图。

总体来说,主要的手势交互,

1、整个页面上下滑动
2、下部分支持左右滑动切换,下部分视图

主流的实现方案:

通过设置下部分的contentinset空出上中部分

通过设置下部分tableviewhead空出上中部分,然后调整导航滑条contentinset

实现效果最完整,也是通过设置tableviewhead实现,封装完善,可直接使用

我主要详细阅读了前2个方案,基本的思想都差不多,做出大致效果很容易,优化是费时费力的工作。

这里用文字概述下

布局

1、最底层是一个view(整屏),然后在view上放一个collectionView(frame整屏),这样就实现了下部分左右切换。
2、1中的collectionView的每个item都是一个tableView,其frame也是整屏,这样就实现了主页面上下滑动。
3、在最底层的view上,放上head和bar,然后监听tableview的contentoffset,控制其frame移动和悬停。
4、由于head和bar是所有tableview共用的,所以每个tableview都要空出这个部分,不同方案实现不一样,有的是contentinset偏移,有的是设置headview。

基于上述第4点,引出几个容易混淆的概念

contentoffset contentinset frame

为什么会提到frame这个东西呢,主要是滚动视图,都存在一个可滑动的区域,frame就是滚动视图,可滑动的范围

contentoffset是视图的内容区域,相对于frame左上角点的偏移距离

contentinset可以看做是添加给内容区域,额外的空间,可近似的理解为内边距,嗯嗯,仔细想了下,的确是内边距,不能是外边距,这个添加到内容区域的空间,是算在frame之类的,所以,这个添加,会导致内容区域的移动,从而导致contentoffset变化

网上很多的文章,说的都是错误的,比如这个错误的图解,误导不少人。

刷新

前几天,看了mjrefresh的源码,其实现,主要是控制contentinset的偏移,该框架,使用了较为深的继承关系,我觉得不是很好,看起来,很困难,而且,也容易有很深的耦合,容易出错。

转载请注明:链圈一盏灯 » 类似简书个人页多方案实现分析

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址