使用CSStickyHeaderFlowLayout实现头部固定的CollectionView
2015-07-21 01:20
645 查看
最近流行的一种界面效果,是瀑布流的header固定,也叫sticky header或者parallax。对于UITableView,可以比较方便地让table header固定,但是对于UICollectionView,原生的iOS API比较难以实现。本文推荐一个开源组件,专门用于实现这种效果:CSStickyHeaderFlowLayout
这样的话就无法获得预期的效果,因为虽然整个Supplementary的height缩小了,但是subview的坐标却是固定的,所以不会随着header被推到顶部。正确的做法是使用autolayout,我这里用的是masonry
整体效果
贴个整体示意图配合autolayout使用
首先需要注意的是,这个组件必须配合autolayout来使用。比如整个header分为4个部分,我想固定的是其中下面的2个subview,一开始我的代码是写死这2个subview的坐标UILabel *header1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 375, 50)]; header1.backgroundColor = [UIColor yellowColor]; header1.text = @"1111"; UILabel *header2 = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, 375, 50)]; header2.backgroundColor = [UIColor blueColor]; header2.text = @"2222";
这样的话就无法获得预期的效果,因为虽然整个Supplementary的height缩小了,但是subview的坐标却是固定的,所以不会随着header被推到顶部。正确的做法是使用autolayout,我这里用的是masonry
UILabel *header1 = [UILabel new]; header1.backgroundColor = [UIColor yellowColor]; header1.text = @"1111"; UILabel *header2 = [UILabel new]; header2.backgroundColor = [UIColor blueColor]; header2.text = @"2222"; [self addSubview:header1]; [self addSubview:header2]; [header1 mas_makeConstraints:^(MASConstraintMaker *make) { make.bottom.equalTo(header2.mas_top); make.left.equalTo(@0); make.height.equalTo(@50); make.width.equalTo(@375); }]; [header2 mas_makeConstraints:^(MASConstraintMaker *make) { make.bottom.equalTo(@0); make.left.equalTo(@0); make.height.equalTo(@50); make.width.equalTo(@375); }];
切换cell类型时,注意处理offset
当切换“投票”和“排行榜”的时候,并没有替换Layout,但是切换了不同的cell实现,所以2边的contentOffset是不同的,有可能出现某一组cell已经向下滚动了很多,而另外一组cell在这个位置上无法正确的显示。处理的办法是,如果offset已经超过某个值,则滚动到顶部// 如果已经超过顶部,则滚动到顶部 if(myView.contentOffset.y >= 70){ [myView setContentOffset:CGPointMake(0, 70)]; }
与MJRefresh的冲突解决
MJRefresh是另一个流行的下拉刷新组件,当CSStickyHeaderFlowLayout和它一起使用的时候,在下拉刷新时会出现2次奇怪的动画效果。原因是MJRefresh的实现是修改了UICollectionView的contentInset,而CSStickyHeaderFlowLayout在0.2.7版本没有正确处理这种情况。作者已经在0.2.8修复了此问题。issue的具体现象和处理过程在ghost image issue#85相关文章推荐
- html+css基础课程总结1
- CSS小记(持续更新......)
- CSS小注意(初级)
- 如何将一个Activity设置成窗口的样式
- Web前端开发基础 第四课(CSS元素模型)
- 操作外部样式表中的样式
- Web前端开发基础 第四课(CSS元素分类)
- 水晶易表 四种标签式菜单样式
- [Phonegap+Sencha Touch] 移动开发34 gem安装compass,不编译scss,怎么办?
- MVC4新功能...压缩和合并js文件和样式文件
- CSS选择器中类和ID选择器的区别
- CSS 伪元素 伪类
- 漂亮的登录界面
- CSS - 内联元素span 强制换行失败的可能原因
- css+html 制作三角形
- 总结CSS3新特性(Transform篇)
- 总结CSS3新特性(Transform篇)
- CSS + DIV 使用方法总结
- css
- CSS3 学习总结