zoukankan      html  css  js  c++  java
  • UICollectionView 04

    一,概述

      基于单section设计布局下实现的UICollectionView Header悬浮功能,多section的思路类似。

    二,思路

      在UITableView中,Header悬浮功能只需设置TableView的style即可实现,但在UICollectionView中由于布局分离出来了,需要在布局中自己计算实现。使用UICollectionView的supplementaryView来作为HeaderView,在方法

    //计算rect内的元素的UICollectionViewLayoutAttributes
    - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;

      中添加上计算SupplementaryView的UICollectionViewLayoutAttributes的逻辑,即可实现此功能。

    三,修改自定义的布局

        在自定义的布局类中需要处理的方法有3个:

    • 在上面的第一个方法中,除了计算item的UICollectionViewLayoutAttributes外,加上计算SupplementaryView的UICollectionViewLayoutAttributes的逻辑。
      /// 当CollectionView开始刷新后,会调用此方法并传递rect参数(即当前可视区域)
      /// @param rect 我们需要利用rect参数判断出在当前可视区域中有哪几个indexPath会被显示(无视rect而全部计算将会带来不好的性能)
      /// 最后计算相关indexPath的layoutAttributes,加入数组中并返回
      - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
          NSMutableArray *attributesArray = self.attributesArray;
          NSArray<NSIndexPath *> *indexPaths;
          //1、计算rect中出现的items
          indexPaths = [self p_indexPathForItemsInRect:rect];
          for(NSIndexPath *indexPath in indexPaths){
              //计算对应的LayoutAttributes
              UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
              [attributesArray addObject:attributes];
          }
          
          //2、计算rect中出现的SupplementaryViews
          //这里只计算了kSupplementaryViewKindHeader
          indexPaths = [self p_indexPathForSupplementaryViewsOfKind:kSupplementaryViewKindHeader InRect:rect];
          for(NSIndexPath *indexPath in indexPaths){
              //计算对应的LayoutAttributes
              UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForSupplementaryViewOfKind:kSupplementaryViewKindHeader atIndexPath:indexPath];
              [attributesArray addObject:attributes];
          }
          return attributesArray;
      }
      
      ///计算目标rect中含有的某类SupplementaryView
      - (NSMutableArray<NSIndexPath *> *)p_indexPathForSupplementaryViewsOfKind:(NSString *)kind InRect:(CGRect)rect {
          NSMutableArray<NSIndexPath *> *indexPaths = [NSMutableArray array];
          if([kind isEqualToString:kSupplementaryViewKindHeader]){
              //在这个瀑布流自定义布局中,只有一个位于列表顶部的SupplementaryView
              NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:0];
              
              //如果当前区域可以看到SupplementaryView,则返回
              //CGFloat height = [self.delegate collectionViewLayout:self heightForSupplementaryViewAtIndexPath:indexPath];
              //if(CGRectGetMinY(rect) <= height + _insets.top){
              //Header默认总是需要显示
              [indexPaths addObject:indexPath];
              //}
          }
          return indexPaths;
      }

      用kSupplementaryViewKindHeader来分辨不同的SupplementaryView。indexPathForSupplementaryViewsOfKind: InRect:方法用于计算在rect内需要展示那些指定kind的SupplementaryView

    • 重写父类的 -layoutAttributesForSupplementaryViewOfKind:atIndexPath:方法,计算指定kind和indexPath上的SupplementaryView的LayoutAttributes

      ///MARK:根据kind、indexPath,计算对应的LayoutAttributes
      - (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath {
          UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:elementKind withIndexPath:indexPath];
          
          //计算LayoutAttributes
          if([elementKind isEqualToString:kSupplementaryViewKindHeader]){
              CGFloat w = self.collectionView.bounds.size.width;
              CGFloat h = [self.delegate lx_collectionViewLayout:self heightForSupplementaryViewAtIndexPath:indexPath];
              CGFloat x = 0;
              //根据offset计算kSupplementaryViewKindHeader的y
              //y = offset.y-(header高度-固定高度)
              CGFloat offsetY = self.collectionView.contentOffset.y;
              CGFloat y = MAX(0,offsetY-(h-kSupplementaryViewKindHeaderPinnedHeight));
              attributes.frame = CGRectMake(x, y, w, h);
              attributes.zIndex = 1024;
          }
          return attributes;
      }

      为了显示HeaderView并让其悬浮在列表顶部,需要知道它的高度,所以添加代理方法collectionViewLayout:heightForSupplementaryViewAtIndexPath:来获取高度,同时设置zIndex让其保持在所有视图的最前方。在这个方法中,主要计算HeaderView在CollectionView中的y坐标,保证在CollectionView的滚动过程中,HeaderView始终在CollectionView的顶部露出固定高度。


    • InvalidateLayout 最后需要覆盖父类的shouldInvalidateLayoutForBoundsChange方法,让其返回YES,使UICollectionView在滑动时不断刷新Layout

       ///每当offset改变时,是否需要重新布局,newBounds为offset改变后的rect
       ///瀑布流中不需要,因为滑动时,cell的布局不会随offset而改变
       ///如果需要实现悬浮Header,需要改为YES
      - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
          //return [super shouldInvalidateLayoutForBoundsChange:newBounds];
          return YES;
      }

    四,最后

      最后创建我们的自定义headerView,在collectionView初始化的时候注册,并在UICollectionViewDataSource的代理方法中创建相应的HeaderView就大功告成啦。




  • 相关阅读:
    2020/11/15助教一周小结(第十一周)
    神经网络--理解
    案例一:鸢尾花数据的分类
    TF2基础知识
    软件工程助教工作总结
    软工课程改进建议
    2020-12-27 助教一周小结(第十七周)
    2020-12-20 助教一周小结(第十六周)
    2020-12-13 助教一周小结(第十五周)
    2020-12-06 助教一周小结(第十四周)
  • 原文地址:https://www.cnblogs.com/lxlx1798/p/13403427.html
Copyright © 2011-2022 走看看