最近流行的一种界面效果,是瀑布流的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
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul/>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li/>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>
版权声明:本文为博主原创文章,未经博主允许不得转载。
分享到:
相关推荐
CSStickyHeaderFlowLayout贡献者对于任何想成为存储库贡献者的人,请阅读 在一个UICollectionViewLayout中就完成了视差,粘页眉,图像标题的增长。安装椰子足CSStickyHeaderFlowLayout可通过,要安装它,只需添加到...
该源码实现了可伸缩设计的布局效果,源码CSStickyHeaderFlowLayout,CSStickyHeaderFlowLayout是UITableView的替代选择,可实现图片的滚动视差和可伸缩设计。 测试环境:Xcode 5.0,iOS 6.0以上
8.CSStickyHeaderFlowLayout-master 9.DatePickerAlertView-时间选择器 10.Demo_AttributedLable-master 11.DLRadioButton-master 12.HWPopController 13.KVCDemo 14.NSDate-Extensions-master 15.ScrollViewDemo 16...
高分设计源码,详情请查看资源内容中使用说明 高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明
SpringBoot2.0快速开发框架权限.rarSpringBoot2.0快速开发框架权限.rarSpringBoot2.0快速开发框架权限.rar
详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;
基于Qt开发的汽车车机系统上位机 & 常见类型汽车传感器信号模拟发生器 任务和要求: 任务: 根据发动机测控系统信号需求,设计一套发动机信号模拟器人机交互系统,能够根据需要向下位机输出控制信号,使其输出发动机测控系统需要的传感器模拟信号,给发动机测控系统的开发提供方便。 要求: 1.设计应包含上位机与下位机的交互程序及人机交互界面的设计,与下位机设计相结合,使其能够实现全部类型发动机传感器信号的模拟输出及显示。 2.设计中需要采用模块化开发程序。 3.所设计的人机交互界面简洁合理。 4.应考虑所设计系统的实用性。 具体工作内容: 1.根据设计目标,查阅相关设计标准和设计方法资料,对发动机信号模拟器设计中的关键工程原理和工程方法进行提炼,并围绕关键问题进行国内外设计现状调研,开展分析、评价与总结,确定主要研究内容,制定设计技术路线,制定设计计划(周进度),撰写开题报告,并进行开题答辩,开题报告参考文献应不少于15篇(其中外文文献不少于 4 篇,近五年文献不少于三分之一)。 2.根据设计要求和技术指标,进行满足功能原理需求的多方案拟定,考虑安全、 标准等多因素进行技术性与经济性评价
实验-三、数据库安全性(目的、要求和模板).doc
文件为第二天视频教程 在毕业设计的挑战中,有时我们需要以极短的时间完成一个相对复杂的项目,比如一个商城系统。虽然时间紧迫,但只要我们合理规划、高效执行,完全有可能在4天内完成一个基础且功能完备的商城系统。 商城系统,也被称为网上商城系统或Online Mall system,是一种功能完善的网上销售系统。该系统主要包括产品发布、在线订购、在线支付、在线客服等功能模块,旨在为企业或个人提供一个在线销售平台,实现商品的展示、交易和客户服务。 商城系统具有多种核心功能,如商品管理、订单管理、用户管理和营销管理。商品管理功能支持商品的添加、编辑、删除、分类和搜索,满足商家对商品信息的全面管理需求。订单管理功能则涵盖订单的生成、支付、发货、退款和评价等环节,确保交易流程的顺畅进行。用户管理功能包括用户的注册、登录、个人信息管理和收货地址管理等,提升用户体验。而营销管理功能则通过促销活动的设置、优惠券的发放和积分兑换等手段,帮助商家提升销售业绩。 商城系统的特点主要体现在功能性、易用性和安全性上。商城系统注重功能性的开发,每个功能都有其发挥作用的地方,满足商家的实际需求。
PPT模板,答辩PPT模板,毕业答辩,学术汇报,母校模板,我给母校送模板作品,周会汇报,开题答辩,教育主题模板下载。PPT素材下载。
小型餐饮管理系统-数据库设计报告.doc
本资源中的源码都是经过本地编译过可运行的,下载后按照文档配置好环境就可以运行。资源项目的难度比较适中,内容都是经过助教老师审定过的,应该能够满足学习、使用需求,如果有需要的话可以放心下载使用。有任何问题也可以随时私信博主,博主会第一时间给您解答!!! 本资源中的源码都是经过本地编译过可运行的,下载后按照文档配置好环境就可以运行。资源项目的难度比较适中,内容都是经过助教老师审定过的,应该能够满足学习、使用需求,如果有需要的话可以放心下载使用。有任何问题也可以随时私信博主,博主会第一时间给您解答!!! 本资源中的源码都是经过本地编译过可运行的,下载后按照文档配置好环境就可以运行。资源项目的难度比较适中,内容都是经过助教老师审定过的,应该能够满足学习、使用需求,如果有需要的话可以放心下载使用。有任何问题也可以随时私信博主,博主会第一时间给您解答!!
PPT模板,答辩PPT模板,毕业答辩,学术汇报,母校模板,我给母校送模板作品,周会汇报,开题答辩,教育主题模板下载。PPT素材下载。
2024年中国中空纤维膜行业研究报告
PPT模板,答辩PPT模板,毕业答辩,学术汇报,母校模板,我给母校送模板作品,周会汇报,开题答辩,教育主题模板下载。PPT素材下载。
实验三、数据库安全性实验报告.doc
PPT模板,答辩PPT模板,毕业答辩,学术汇报,母校模板,我给母校送模板作品,周会汇报,开题答辩,教育主题模板下载。PPT素材下载。
java电子相册源码.rarjava电子相册源码.rarjava电子相册源码.rarjava电子相册源码.rar
玉米脱粒机设计及其总装配图(论文、dwg图)
studyopencv2