使用CSStickyHeaderFlowLayout实现头部固定的CollectionView
近期流行的一种界面效果,是瀑布流的header固定,也叫sticky header或者parallax。对于UITableView,能够比較方便地让table header固定,可是对于UICollectionView,原生的iOS API比較难以实现。
本文推荐一个开源组件。专门用于实现这样的效果:CSStickyHeaderFlowLayout
总体效果
贴个总体示意图
配合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
使用CSStickyHeaderFlowLayout实现头部固定的CollectionView的更多相关文章
- 手机页面关于头部固定定位与input出现的问题
前些天写了一个页面,要求头部导航进行固定定位position:fixed.内容区域有输入框input.在大多数手机上都是显示正常的,可偏在一些低版本的手机却出现问题了. 把我给苦恼的不行. 问题:头部 ...
- Android StickHeaderRecyclerView - 让recyclerview头部固定
介绍在项目中有时会需要recyclerview滑动式时某个view滑出后会固定在头部显示,比较常用的比如手机联系人界面.地区选择界面等. StickHeaderRecyclerView就是实现这个功能 ...
- 网页制作中在头部固定悬浮table表头(thead)的方法
这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...
- 头部固定下面滑动&&获取手机屏高
height(){ //获取屏高 let phone_height = document.documentElement.clientHeight; let group = this.refs.sea ...
- jQuery仿百度帖吧头部固定不随滚动条滚动效果
<style> *{margin:0px;padding:0px;} div.nav{background:#000000;height:57px;line-height:57px;col ...
- css 表单头部固定
原创 https://blog.csdn.net/q3585914/article/details/69946478 table表头和首列的表格固定-CSS实现的Table表头固定 原创 2017年0 ...
- ionic 最简单的路由形式,头部固定,下面tab切换-------一个简单的单页切换起飞了
<ion-header-bar class="bar-dark" align-title="left"> <h1 class="ti ...
- 网站滚动n个像素后,头部固定
//固顶 $(window).scroll(function() { var top = $(window).scrollTop(); if(top>=1200){ $(".x_men ...
- table头部固定,内容滚动
可以设置两个table,th,td得设置宽度: <table> <thead> <tr><th></th&g ...
随机推荐
- luogu1920 成功密码
题目大意:给出x∈(0,1)以及n∈(0,1e18),求sum foreach i(1<=i<=n) (x^i/i)保留四位小数的值. 用快速幂暴力求.考虑到题目只要求保留四位小数,而随着 ...
- navicat数据库同步
10.168.95.246
- Spring MVC简介 2.5 Spring MVC执行的流程
package org.fkit.controller; import javax.servlet.http.HttpServletRequest; import javax.servlet.http ...
- vmware笔试题目
http://discuss.acmcoder.com/topic/58db8e2ebb0f44ba0e94e670 上面是完整的题目,下面一下我自己的想法. http://discuss.acmco ...
- SQL使用总结——集合操作函数
Oracle中集合操作符专门用于合并多条select 语句的结果,包括:UNION, UNION ALL, INTERSECT, MINUS.当使用集合操作符时,必须确保不同查询的列个数和数据类型匹配 ...
- RAR 5.50 控制台使用记录
copy from WinRAR用户手册,备忘 用户手册 ~~~~~~~~ RAR 5.50 控制台版本 ~~~~~~~~~~~~~~~~~~~ =-=-=-=-=-=-=-=-=-=-=-=-=- ...
- JavaScript的switch循环
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
- Android 自定义控件之圆形扩散View(DiffuseView)
实现效果 使用 属性方法 代码 源码下载 参考链接 实现效果 使用 XML中: <com.airsaid.diffuseview.widget.DiffuseView android:id=&q ...
- 模拟试题A
模拟试题A 一.单项选择题(2′*12=24′) 1.下面各种坐标变换中,会产生变换前后维度的改变的是( ) A)建模变换 B)观察变换 C)投影变换 D)视口变换 2.下列描述深度缓冲消隐算法的特点 ...
- bootstrap初用新得2
##具体实现 1. 宽度无限的背景和始终居中的主题内容: 首先是背景要用一个div1来做out-background,然后div1的兄弟元素div2来做container.对out-backgro ...