这不是框架,只是3个示例程序,给大家提供一个实现这种布局的思路
前不久腾讯Bugly发布过一篇文章特斯拉组件,这个组件跟我要实现的界面是相同的,但是这文章写得很简单,也没有贡献出demo,也没有封装框架,反正我看完后还是一脸懵逼。如果你能看懂,或者看完后有了灵感,你足够自信的话,你可以去封装,我是自认菜鸟,封装这玩意儿难度真不是盖的,我写这3个程序都花了整整5天,而且后期还有过改动,不断的试,只要思路一错,就得重来。
这种界面在不少app上都有出现,比如微博、美团、饿了么、爱奇艺等,我实现的过程中没有一句高深莫测的代码,难就难在思路,层级结构上; 这种界面有3样控件是最为显眼的:头视图,分页菜单,若干个子tableView
// 这个方法是支持多手势,当滑动子控制器中的scrollView时,MyTableView也能接收滑动事件
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
return [gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]] && [otherGestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]];
}
爱奇艺难就难在头部的处理上,如果像美团一样,将头视图添加在父控制器的view上,当先添加横向scrollView,再添加头视图时,那么头视图会遮挡横向滑动的scrollView,从而滑动头部的时候就不能上下滑动,只能通过添加手势,但是手势很难达到scrollView的弹性效果,滑动起来很僵硬;当先添加头视图,再添加横向scrollView时,横向scrollView又会把头视图遮挡,从而导致头视图不具备任何事件.
当滑动其中一个子tableView时(我叫它主动tableView),发出一个通知,该通知由父控制器监听,在父控制器中遍历每个子tableVeiw(除去主动tableView之外的其余tableView叫被动tableView),让被动tableView跟随主动tableView滑动,当滑动到顶部,让分页菜单悬停。
题外话:爱奇艺的demo和爱奇艺原app的效果几乎完全一致,原app在刷新的时候切换tableView时,刷新文字不会消失,这也是爱奇艺的一个bug,我的demo在刷新时禁止scrollView滑动了。想要看爱奇艺原app的效果,你可以点击爱奇艺app的第5个tabBar:"泡泡",然后找一个明星或者其他头像点进去就能看到。
大家在参考这3个demo的时候,分页菜单尽量使用SPPageMenu,这是我自己封装的一个框架