iOS学习笔记之各种UICollectionViewLayout展示

收集一些 Collection view 的效果 .集成到自己的Demo中.侵立删. 有帮助到大家的,记得 start 。 点start的人最帅了 ~ 

先理解UICollectionView 和 UICollectionViewLayout
UICollectionView 基础
UICollectionViewLayout 属性和方法

1. 圆形布局
   圆形布局Demo地址

   实现要点:

   • 确定一个中心点.一般都是collection view 的center
   • 根据中心点得到每个item的位置. 根据半径*正弦和余弦分别得到y和x

     /* 返回指定indexPath的item的布局信息 */
     - (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
     {
       UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
       /* 设置item的size */
       attributes.size = CGSizeMake(ITEM_SIZE, ITEM_SIZE);
       /* 设置item的中心点.根据半径*正弦和余弦分别得到y和x */
       attributes.center = CGPointMake(_center.x + _radius * cosf(2 * indexPath.item * M_PI / _cellCount),
                                   _center.y + _radius * sinf(2 * indexPath.item * M_PI / _cellCount));
       return attributes;
     }

     
     

2. 水平分屏滑动
   水平分屏滑动Demo地址

   实现要点:

   • 确定每页显示多少个,和一共分几页
   • 得到每个item在每一页的位置，确保一页的数据不会超出屏幕

   • 设置collection view 分屏显示 collection.pagingEnabled = YES

     - (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
     {
       UICollectionViewLayoutAttributes *attributes = [super layoutAttributesForItemAtIndexPath:indexPath];
       /* 第几页 */
       NSUInteger curPage = indexPath.row / self.numberOfItemsInPage;
       // 当前cell所在当页的index
       NSUInteger curIndex = indexPath.row - curPage * self.numberOfItemsInPage;
       // 当前cell所在当页的行
       NSUInteger curColumn = curIndex % self.columnsInPage;
       // 当前cell所在当页的列
       NSUInteger curRow = curIndex / self.columnsInPage;
       // 调整attributes（大小不变，位置改变）
       CGRect rect = attributes.frame;
       CGFloat point_x = self.collectionView.bounds.size.width * curPage + self.pageInset.left + curColumn * self.itemSize.width + curColumn * self.minimumLineSpacing;
       CGFloat point_y = self.pageInset.top + curRow * self.itemSize.height + curRow * self.minimumInteritemSpacing;
       attributes.frame = CGRectMake(point_x,  point_y, rect.size.width, rect.size.height);
     
       return attributes;
     }

     
     

     效果图

3. 标签云
   标签云Demo地址

   实现要点:

   • 初始化数据的时候得到item的宽度

   • 在布局类中确定一行显示多少个和换行显示的问题.

     - (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
     {
      UICollectionViewLayoutAttributes *attributes = [super layoutAttributesForItemAtIndexPath:indexPath];
      /** 得到item的size */
      CGSize itemSize = [self.delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:indexPath];
      /** 得到下一个item的x */
      nextOffset += (self.minimumInteritemSpacing + itemSize.width);
     
      /** 换行 */
      //当x轴减去item行间距大于 collection width - 内容右边距的时候换行,否则继续排列
      if (nextOffset - self.minimumInteritemSpacing  > self.collectionView.bounds.size.width - self.sectionInset.right)
      {
          xOffset = self.sectionInset.left;
          nextOffset = (self.sectionInset.left + self.minimumInteritemSpacing + itemSize.width);
          yOffset += (itemSize.height + self.minimumLineSpacing);
      }else{
          xOffset = nextOffset - (self.minimumInteritemSpacing + itemSize.width);
      }
      attributes.frame = CGRectMake(xOffset, yOffset, itemSize.width, itemSize.height);
     
      /** 计算出collectionview 的可滑动高度(全屏就省略) */
      _contentHeight = MAX(_contentHeight, CGRectGetMaxY(attributes.frame));
      if (_cellCount == indexPath.item + 1) {
          _contentHeight += self.sectionInset.bottom;
      }
      return attributes;
     }

     
     

     效果图

4. 卡片吸顶布局
   卡片吸顶布局Demo地址

   实现要点:

   • 行间距minimumLineSpacing 设置一个负数,实现下item依附在上item的效果
   • 当item的y值小于顶部的y值时,就将item的y值等于顶部的y值.让item停留在顶部
   • 层级关系. attributes.zIndex

     //获取悬停处的y值
     CGFloat minY = CGRectGetMinY(self.collectionView.bounds) + self.collectionView.contentInset.top;
     //拿到布局属性应该出现的位置
     CGFloat finalY = MAX(minY, attributes.frame.origin.y);
     CGPoint origin = attributes.frame.origin;
     origin.y = finalY;
     attributes.frame = (CGRect){origin, attributes.frame.size};
     //根据IndexPath设置zIndex能确立顶部悬停的cell被后来的cell覆盖的层级关系
     attributes.zIndex = attributes.indexPath.row;

     
     

     效果图

5. Header悬浮效果
   Header悬浮效果Demo地址

   主要实现代码:

            //获取当前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;

   
   

6. UICollectionView 单选,多选
   单选,多选Demo地址

   实现要点:

   我这里只是简单的实现了下功能

   • model类中设置一个isSelectedItem属性
   • 点击cell或点击右上角图标时,改变isSelectedItem的值.多选刷新当前的Item, 单选先把所有状态变成未选中,选中的变成选中状态

     //多选点击
     - (void)didSelectItemCellWithIndexPath:(NSIndexPath*)indexPath
     {
       RadioModel *model = self.dataSoure[indexPath.item];
       model.isSelectedItem = !model.isSelectedItem;
       [self.collectionView reloadItemsAtIndexPaths:@[indexPath]];
     }
     //单选点击
     - (void)didRadioSelectItemWithIndexPath:(NSIndexPath*)indexPath
     {
        [self emptyAllSelectState];
        RadioModel *model = self.dataSoure[indexPath.item];
        model.isSelectedItem = YES;
        [self.collectionView reloadData];
     }