iOS 实现UICollectionView头部悬停效果
来源:互联网 发布:食品安全网络知识竞赛 编辑:程序博客网 时间:2024/06/06 06:47
最近领导提出一个奇葩的需求,要使用卡片形式展示商品而且还要头部悬停筛选,找了好长时间都是有关UITableview的悬停,因此自己写了一个flowlayout实现tableView效果的头部悬停效果,直接贴代码:
因为collectionViewd的具体布局是UICollectionViewFlowLayout 决定的 所以创建一个JHHeaderFlowLayout继承于UICollectionViewFlowLayout#具体的代码实现#pragma mark - 初始化-(instancetype)init{ self = [super init]; if (self) { _naviHeight = 0.0; } return self;}/* // 作用:返回指定区域的cell布局对象 // 什么时候调用:指定新的区域的时候调用 (<__kindof UICollectionViewLayoutAttributes *> iOS9之后的泛型 ) - (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect *//** iOS9 之前的写法 作用第24行代码有写*///UICollectionViewLayoutAttributes:我称它为collectionView中的item(包括cell和header、footer这些)的《结构信息》- (NSArray *) layoutAttributesForElementsInRect:(CGRect)rect{ //截取到父类所返回的数组(里面放的是当前屏幕所能展示的item的结构信息),并转化成不可变数组 NSMutableArray *superArray = [[super layoutAttributesForElementsInRect:rect] mutableCopy]; //创建存索引的数组,无符号(正整数),无序(不能通过下标取值),不可重复(重复的话会自动过滤) NSMutableIndexSet *noneHeaderSections = [NSMutableIndexSet indexSet]; //遍历superArray,得到一个当前屏幕中所有的section数组 for (UICollectionViewLayoutAttributes *attributes in superArray) { //如果当前的元素分类是一个cell,将cell所在的分区section加入数组,重复的话会自动过滤 if (attributes.representedElementCategory == UICollectionElementCategoryCell) { [noneHeaderSections addIndex:attributes.indexPath.section]; } } //遍历superArray,将当前屏幕中拥有的header的section从数组中移除,得到一个当前屏幕中没有header的section数组 //正常情况下,随着手指往上移,header脱离屏幕会被系统回收而cell尚在,也会触发该方法 for (UICollectionViewLayoutAttributes *attributes in superArray) { //如果当前的元素是一个header,将header所在的section从数组中移除 if ([attributes.representedElementKind isEqualToString:UICollectionElementKindSectionHeader]) { [noneHeaderSections removeIndex:attributes.indexPath.section]; } } //遍历当前屏幕中没有header的section数组 [noneHeaderSections enumerateIndexesUsingBlock:^(NSUInteger idx, BOOL *stop){ //取到当前section中第一个item的indexPath NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:idx]; //获取当前section在正常情况下已经离开屏幕的header结构信息 UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader atIndexPath:indexPath]; //如果当前分区确实有因为离开屏幕而被系统回收的header if (attributes) { //将该header结构信息重新加入到superArray中去 [superArray addObject:attributes]; } }]; //遍历superArray,改变header结构信息中的参数,使它可以在当前section还没完全离开屏幕的时候一直显示 for (UICollectionViewLayoutAttributes *attributes in superArray) { //如果当前item是header if ([attributes.representedElementKind isEqualToString:UICollectionElementKindSectionHeader]) { //得到当前header所在分区的cell的数量 NSInteger numberOfItemsInSection = [self.collectionView numberOfItemsInSection:attributes.indexPath.section]; //得到第一个item的indexPath NSIndexPath *firstItemIndexPath = [NSIndexPath indexPathForItem:0 inSection:attributes.indexPath.section]; //得到最后一个item的indexPath NSIndexPath *lastItemIndexPath = [NSIndexPath indexPathForItem:MAX(0, numberOfItemsInSection-1) inSection:attributes.indexPath.section]; //得到第一个item和最后一个item的结构信息 UICollectionViewLayoutAttributes *firstItemAttributes, *lastItemAttributes; if (numberOfItemsInSection>0) { //cell有值,则获取第一个cell和最后一个cell的结构信息 firstItemAttributes = [self layoutAttributesForItemAtIndexPath:firstItemIndexPath]; lastItemAttributes = [self layoutAttributesForItemAtIndexPath:lastItemIndexPath]; }else { //cell没值,就新建一个UICollectionViewLayoutAttributes firstItemAttributes = [UICollectionViewLayoutAttributes new]; //然后模拟出在当前分区中的唯一一个cell,cell在header的下面,高度为0,还与header隔着可能存在的sectionInset的top CGFloat y = CGRectGetMaxY(attributes.frame)+self.sectionInset.top; firstItemAttributes.frame = CGRectMake(0, y, 0, 0); //因为只有一个cell,所以最后一个cell等于第一个cell lastItemAttributes = firstItemAttributes; } //获取当前header的frame CGRect rect = attributes.frame; //当前的滑动距离 + 因为导航栏产生的偏移量,默认为64(如果app需求不同,需自己设置) CGFloat offset = self.collectionView.contentOffset.y + _naviHeight; //第一个cell的y值 - 当前header的高度 - 可能存在的sectionInset的top CGFloat headerY = firstItemAttributes.frame.origin.y - rect.size.height - self.sectionInset.top; //哪个大取哪个,保证header悬停 //针对当前header基本上都是offset更加大,针对下一个header则会是headerY大,各自处理 CGFloat maxY = MAX(offset,headerY); //最后一个cell的y值 + 最后一个cell的高度 + 可能存在的sectionInset的bottom - 当前header的高度 //当当前section的footer或者下一个section的header接触到当前header的底部,计算出的headerMissingY即为有效值 CGFloat headerMissingY = CGRectGetMaxY(lastItemAttributes.frame) + self.sectionInset.bottom - rect.size.height; //给rect的y赋新值,因为在最后消失的临界点要跟谁消失,所以取小 rect.origin.y = MIN(maxY,headerMissingY); //给header的结构信息的frame重新赋值 attributes.frame = rect; //如果按照正常情况下,header离开屏幕被系统回收,而header的层次关系又与cell相等,如果不去理会,会出现cell在header上面的情况 //通过打印可以知道cell的层次关系zIndex数值为0,我们可以将header的zIndex设置成1,如果不放心,也可以将它设置成非常大,这里随便填了个7 attributes.zIndex = 7; } } //转换回不可变数组,并返回 return [superArray copy];}//return YES;表示一旦滑动就实时调用上面这个layoutAttributesForElementsInRect:方法- (BOOL) shouldInvalidateLayoutForBoundsChange:(CGRect)newBound{ return YES;}
阅读全文
0 0
- iOS 实现UICollectionView头部悬停效果
- UICollectionView的头部悬停效果
- ListView实现头部悬停效果
- Listview 头部悬停效果的实现
- UICollectionView实现头部漂浮的效果
- UICollectionView实现头部漂浮的效果
- IOS开发UI篇--使用UICollectionView实现一个列表头部拉伸效果的案例
- iOS开发- tableView取消头部(section header)悬停效果
- 实现 iOS 头部拉伸效果
- **collecttionView实现头部视图悬停**
- (2)iOS用UICollectionView实现Gallery效果
- RecyclerView利用ItemDecoration实现头部悬停效果【类似微信通讯录效果】
- 使用UICollectionView实现一个列表头部拉伸效果(下拉放大)(OC 和 Swift)
- [iOS高级] UICollectionView实现瀑布流效果
- [iOS高级] UICollectionView实现瀑布流效果
- [iOS高级] UICollectionView实现瀑布流效果
- iOS开发之UICollectionView之悬浮效果实现
- js实现ios头部导航条模糊效果
- linux几种时间函数总结
- nginx常见配置
- 在eclipse中做HDFS java API调式遇到的问题
- SpringBoot+thymeleaf简单实现登陆注册及记账功能
- Win10关闭自动更新
- iOS 实现UICollectionView头部悬停效果
- springmvc+mybatis 构建cms内容发布系统
- 时间获取和转换TimeUtils
- 知道ip地址和子网掩码后可以算出网络地址、广播地址、地址范围、本网主机数
- 我的Java设计模式-策略模式
- 选择年月日控件YMDatePickerDialog
- Java方法概述
- 43 且听风吟之呆逼二三事
- SQL SERVER 导入.sql文件 出现SYSTEM.OUTOFMEMORY EXCEPTION 异常解决办法