美文网首页
iOS | 关于瀑布流附带悬停的简易实现

iOS | 关于瀑布流附带悬停的简易实现

作者: 夏浩文 | 来源:发表于2019-09-30 18:34 被阅读0次

流式布局过去也玩很多种,今天来总结一下瀑布流,市面上应该是不那么流行了,不过无奈产品经理喜欢呀~


自定义布局

  • 其实需要使用到UICollectionViewLayout
    a、其决定UICollectionView如何将单元格显示

  • 实现流程
    1、 - (void)prepareLayout; 运算所有单元格位置
    2、 - (CGSize)collectionViewContentSize; 返回运算后视图的总大小
    3、 - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect; 返回运算后的单元格布局属性(包含悬停的实现部分)
    4、 - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath; 单元格进行布局时,返回的是要获取的布局属性
    5、 (nullable UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath; 同上,不同在于,非单元格、是头尾视图
    6、 - (nullable UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString*)elementKind atIndexPath:(NSIndexPath *)indexPath; 同上,是装饰视图,若没有不需要重载
    7、 - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds; 当边界发生变化时,决定是否刷新

  • ok,流程介绍完毕,可以开始有作为了😆~


悬停关键点

  • 在于流程3中,保持y坐标对齐顶部
CGFloat headerHeight = CGRectGetHeight(attriture.frame);
CGRect frame = attriture.frame;
frame.origin.y = MIN(MAX(self.collectionView.contentOffset.y, CGRectGetMinY(itemAttribute.frame)-headerHeight-contentInsetOfSection.top),
                      CGRectGetMinY(itemAttribute.frame)+[_heightOfSections[section] floatValue]);
attriture.frame = frame;
attriture.zIndex = (NSIntegerMax/2)+section;
  • 在于流程7中,需要刷新视图,保证对齐
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
    if (_sectionHeadersPinToVisibleBounds) {
        return YES;
    }
    return [super shouldInvalidateLayoutForBoundsChange:newBounds];
}

预览图

玉兰图🌶

也可以下载项目查看~
# [WaterHoverLayout]

相关文章

  • iOS | 关于瀑布流附带悬停的简易实现

    流式布局过去也玩很多种,今天来总结一下瀑布流,市面上应该是不那么流行了,不过无奈产品经理喜欢呀~ 自定义布局 其实...

  • iOS 悬停瀑布流

    https://juejin.im/post/5d8881326fb9a06b1a56c994

  • iOS使用UICollectionView实现瀑布流

    UICollectionView实现瀑布流 在iOS中可以实现瀑布流的目前已知的有2种方案: 使用UIScroll...

  • iOS瀑布流

    瀑布流 因为iOS提供UICollectionViewLayout的布局类不能实现瀑布流的效果,所以需要自定义一个...

  • iOS瀑布流

    最新研究了下iOS中瀑布流的实现方法,一般瀑布流都采用ScrollView + UITableView,或者是使用...

  • 如何 布局一个collectionView瀑布流

    ios UICollectionView实现瀑布流 通过自定义collectionViewCell和重写colle...

  • iOS 瀑布流的实现

    三种方法实现 一、scrollView做垫子,上面添加多个tableView(不可取); 效率低下,cell不能循...

  • iOS瀑布流的实现

    背景 近期公司启动了Pad项目,项目中大部分的功能实现都是基于CollectionView实现的,并且cell的高...

  • 【iOS】瀑布流的实现

    1、效果演示 2、实现思路 根据瀑布流的列数,创建记录maxY的字典,例如两列的瀑布流,就创建两个Key去记录左右...

  • 2018-06-21 项目2:实现UICollectionVie

    一.项目需求 二.实现列表 本次列表展示参考博客为ios - 用UICollectionView实现瀑布流详解具体...

网友评论

      本文标题:iOS | 关于瀑布流附带悬停的简易实现

      本文链接:https://www.haomeiwen.com/subject/xcjhpctx.html