基本设置UICollectionView

自定义单元格UICollectionViewCell

自定义布局UICollectionViewFlowLayout//流式布局

1. 创建

//多行多列的表格视图在创建的时候，必须指定单元格的布局
[[HARFirstCVC alloc]initWithCollectionViewLayout:[[HARMylayout alloc]init]];

- (instancetype)init

{

    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

    // cell的大小

    layout.itemSize = CGSizeMake(305, 305);

    return [self initWithCollectionViewLayout:layout];

}

2. 属性

//设置backgroundView属性

self.backgroundView=self.bgImageView;

//设置单元格大小

self.itemSize=CGSizeMake(80, 80);

//设置单元格间距

self.minimumInteritemSpacing=10;

//设置单元格行间距

self.minimumLineSpacing=10;

//设置区间隔 上左下右

self.sectionInset=UIEdgeInsetsMake(110, 30, 110, 30);

//设置滚动方向为水平滚动

self.scrollDirection=UICollectionViewScrollDirectionHorizontal;

//设置竖直方向的弹簧效果

self.collectionView.alwaysBounceVertical=YES;

3. 方法

// 往contentView中添加label

[self.contentView addSubview:label];

// 获得第一个区的行数

[self.collectionView numberOfItemsInSection:0]

// 通过cell获取坐标

[self.collectionView indexPathForCell:sender];

3.1 设置标头

//设置大小

flowLayout.headerReferenceSize=CGSizeMake(200, 20);

//注册

[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];

//写代理方法

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{

    UICollectionReusableView *reusableView=[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];

    reusableView.backgroundColor=[UIColor blueColor];

    return reusableView;

}

4. 代理方法

UICollectionViewDelegateFlowLayout

//四周边距

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{

    return UIEdgeInsetsMake(10, 10, 10, 10);

}

//行间距

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{

    return 10;

}

//列间距

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{

    return 10;

}

//每个Cell的大小

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

    CGFloat width = (self.view.bounds.size.width - 4*10)/3;

//    220 * 365 宽*高

    CGFloat height = width * 365.0/220.0;

    return CGSizeMake(width, height);

}

5. 
UICollectionViewFlowLayout

6. 常用自定义布局

6.1 滚动到屏幕中点位置放大，原理则缩小

// 将父类原本生成的用于对各个项进行定位的attributes属性，按照我们指定的变化规则，修改attributes中与放大缩小有关的那个属性

// 返回一个矩形区域中的所有小秘书

-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{

   //通过父类方法，得到小秘书数组

   NSArray *array=[super layoutAttributesForElementsInRect:rect];

   //获取可视化区域的fram

   CGRect visibleRect=CGRectZero;    visibleRect.origin=self.collectionView.contentOffset;               

    visibleRect.size=self.collectionView.bounds.size;
   //获取可视化区域的横向中点

   CGFloat visibleRectCenterX=CGRectGetMidX(visibleRect);

   //遍历数组，得到小秘书

   for (UICollectionViewLayoutAttributes *attributes in array) {

      //得到小秘书中，中点的横向坐标

      CGFloat itemCenterX=attributes.center.x;

      //计算得到可见区域中点与该小秘书中点的横向差值

      CGFloat distance=visibleRectCenterX-itemCenterX;

      //如果横向距离小于200，进行变形

      if (ABS(distance)<200) {

         //变形值为1-1.5，距离200是，不变形，0时放大1.5倍

         CGFloat zoomFactor=1+0.5*(1-ABS(distance)/200);

         //设置小秘书的3D属性中宽高的变形比         

         attributes.transform3D=CATransform3DMakeScale(zoomFactor, zoomFactor, 1);

      }

   }

   return array;

}

//当对象大小发生改变时，是否显示

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{

    return YES;

}

6.2 瀑布流

//设置内容区域的大小

-(CGSize)collectionViewContentSize{

    return CGSizeMake(self.collectionView.bounds.size.width, ([self.collectionView numberOfItemsInSection:0]/3+1)*200);

}

//根据item的indexPah返回具体的布局属性对象

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{}

-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{}

6.3 弹簧特效

-(void)prepareLayout{

    if (_animator==nil) {

        _animator=[[UIDynamicAnimator alloc]initWithCollectionViewLayout:self];

        
//得到整个collectionView的尺寸
        CGSize 
contentSize=self.collectionViewContentSize;
        //获得区域内的所有对象的attributes

        NSArray *layoutAttributes=[super layoutAttributesForElementsInRect:CGRectMake(0, 0, contentSize.width, contentSize.height)];

        //遍历，为所有的sttributes添加吸附特效

        for (UICollectionViewLayoutAttributes *attributes in layoutAttributes) {

            UIAttachmentBehavior *attach=[[UIAttachmentBehavior alloc]initWithItem:attributes attachedToAnchor:attributes.center];

            attach.damping=0.6;

            attach.frequency=0.8;

            [self.animator addBehavior:attach];

        }

    }

}

-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{

    //返回经过处理的attributes的数组

    return [self.animator itemsInRect:rect];    

}

//当边界发生变化时，不更新边界，针对用户的本次滚动距离，修改吸附效果的锚点位置，以此产生弹簧效果

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{

    
//获得移动的距离    
    CGFloat distance=self.collectionView.bounds.origin.y-newBounds.origin.y;

    
//获得触点的坐标
    CGPoint touchLocation=[self.collectionView.panGestureRecognizer locationInView:self.collectionView];

    
//遍历特效场所，获得特效
    for (UIAttachmentBehavior *attach in self.animator.behaviors) {

        
//通过特效，获得特效绑定的那个对象，也就是attributes
        UICollectionViewLayoutAttributes *attributes=[attach.items firstObject];

        CGPoint center=attributes.center;//获得中心店坐标

        CGPoint anchorPoint=attach.anchorPoint;//获得描点坐标

        CGFloat distance2=fabsf(touchLocation.y-anchorPoint.y);//获得触点到描点的距离

        center.y+=distance*distance2/500;

        attributes.center=center;

        [self.animator updateItemUsingCurrentState:attributes];

    }

    return NO;

}