近期流行的一种界面效果,是瀑布流的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的更多相关文章

  1. 手机页面关于头部固定定位与input出现的问题

    前些天写了一个页面,要求头部导航进行固定定位position:fixed.内容区域有输入框input.在大多数手机上都是显示正常的,可偏在一些低版本的手机却出现问题了. 把我给苦恼的不行. 问题:头部 ...

  2. Android StickHeaderRecyclerView - 让recyclerview头部固定

    介绍在项目中有时会需要recyclerview滑动式时某个view滑出后会固定在头部显示,比较常用的比如手机联系人界面.地区选择界面等. StickHeaderRecyclerView就是实现这个功能 ...

  3. 网页制作中在头部固定悬浮table表头(thead)的方法

    这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...

  4. 头部固定下面滑动&&获取手机屏高

    height(){ //获取屏高 let phone_height = document.documentElement.clientHeight; let group = this.refs.sea ...

  5. jQuery仿百度帖吧头部固定不随滚动条滚动效果

    <style> *{margin:0px;padding:0px;} div.nav{background:#000000;height:57px;line-height:57px;col ...

  6. css 表单头部固定

    原创 https://blog.csdn.net/q3585914/article/details/69946478 table表头和首列的表格固定-CSS实现的Table表头固定 原创 2017年0 ...

  7. ionic 最简单的路由形式,头部固定,下面tab切换-------一个简单的单页切换起飞了

    <ion-header-bar class="bar-dark" align-title="left"> <h1 class="ti ...

  8. 网站滚动n个像素后,头部固定

    //固顶 $(window).scroll(function() { var top = $(window).scrollTop(); if(top>=1200){ $(".x_men ...

  9. table头部固定,内容滚动

    可以设置两个table,th,td得设置宽度:     <table>       <thead>          <tr><th></th&g ...

随机推荐

  1. Linux - 控制台界面,虚拟界面,字符界面

    tty控制台终端. pts虚拟终端. tty1 图形界面. tty2 字符界面. Ctrl+Alt+F2-6 在字符界面下,通过Alt+F2 切换回来.或者切换到其他的字符界面. Alt+F2 pts ...

  2. HDU 1257(最小拦截系统)

    Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不 能超过前一发的高度.某天,雷达 ...

  3. 【SDOI 2010】 计算器

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2242 [算法] 第一问用快速幂解决 第二问用exgcd解决 第三问用BSGS算法解决 ...

  4. 谈谈cookie的弊端

    一.cookie虽然在数据在客户端持久存储提供了方便,但是分担了服务器数据传输的负担,还是存在很大的局限性的. 局限性: (1)在特定的域名下最多存储20个cookie. 浏览器版本          ...

  5. OCC 矩阵变换

    在OpenCADCADE中, 通过gp_Trsf类来进行矩阵变换操作, 采用矩阵在左的方式: 新点 = 变换矩阵 * 点 基本原理如下: //! Defines a non-persistent tr ...

  6. Redis五种数据类型及应用场景

    MySql+Memcached架构的问题 实际MySQL是适合进行海量数据存储的,通过Memcached将热点数据加载到cache,加速访问,很多公司都曾经使用过这样的架构,但随着业务数据量的不断增加 ...

  7. Nginx介绍及知识点(摘抄)

    正向代理是把自己的网络环境切换成代理的网络 反向代理是代理机器返回给我要我的资源 本文借鉴参考于http://tengine.taobao.org/book/chapter_02.html. 属于纯干 ...

  8. 自制滑杆slider

    一.效果图 二.HTML结构 <div id="d2"> <p>自制可拖动滑块:</p> <div id="out"& ...

  9. 实现model中的文件上传FTP(一)

    由于在django的model中配置了filefield或者imagefield配置了upload_to参数只能将用户上传的文件上传到项目本地,就算重定向到项目外也只是直接读取文件系统,这样对未来的项 ...

  10. Oracle"TNS监听程序找不到符合协议堆栈要求的可用处理程序"解决方案

    问题描述:在使用ETL工具通过odbc方式连接Oracle进行数据抽取的过程中,Oracle 监听日志报错如下: 根本原因就是Oracle的process和session已经达到了甚至超过了最大值,解 ...