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];}