IOS实现自定义布局瀑布流

- (void)prepareLayout{  //通常在该方法中完成布局的初始化操作}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{  //默认返回YES}

- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{  //该方法需要返回rect区域中所有元素布局属性的数组}- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{  //该方法返回indexPath位置的元素的布局属性}

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{  //返回值是，UICollectionView最终停留的点}

- (void)prepareLayout{  [super prepareLayout];  //设置滚动方向  self.scrollDirection = UICollectionViewScrollDirectionHorizontal;  //设置内边距  CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;  self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{  return YES;}

- (nullable NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{  //获取rect区域中所有元素的布局属性  NSArray *array = [super layoutAttributesForElementsInRect:rect];  //获取UICollectionView的中点，以contentView的左上角为原点  CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;  //重置rect区域中所有元素的布局属性，即基于他们距离UICollectionView的中点的剧烈，改变其大小  for (UICollectionViewLayoutAttributes *attribute in array)  {    //获取距离中点的距离    CGFloat delta = ABS(attribute.center.x - centerX);    //计算缩放比例    CGFloat scale = 1 - delta / self.collectionView.bounds.size.width;    //设置布局属性    attribute.transform = CGAffineTransformMakeScale(scale, scale);  }  //返回所有元素的布局属性  return [array copy];}

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{  //计算最终显示的矩形框  CGRect rect;  rect.origin.x = proposedContentOffset.x;  rect.origin.y = 0;  rect.size = self.collectionView.frame.size;  //获取最终显示在矩形框中的元素的布局属性  NSArray *array = [super layoutAttributesForElementsInRect:rect];  //获取UICollectionView的中点，以contentView的左上角为原点  CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;  //获取所有元素到中点的最短距离  CGFloat minDelta = MAXFLOAT;  for (UICollectionViewLayoutAttributes *attribute in array)  {    CGFloat delta = attribute.center.x - centerX;    if (ABS(minDelta) > ABS(delta))    {      minDelta = delta;    }  }  //改变UICollectionView的偏移量  proposedContentOffset.x += minDelta;  return proposedContentOffset;}

@property (nonatomic, strong) NSMutableArray *attrsArray;

- (NSMutableArray *)attrsArray{  if (_attrsArray == nil)  {    _attrsArray = [NSMutableArray array];  }  return _attrsArray;}

- (void)prepareLayout{  [super prepareLayout];  //移除所有旧的布局属性  [self.attrsArray removeAllObjects];  //获取元素的个数  NSInteger count = [self.collectionView numberOfItemsInSection:0];  //布局所有的元素  for (NSInteger i = 0; i<count; i++)  {    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];    //设置并获取indexPath位置元素的布局属性    UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];    //将indexPath位置元素的布局属性添加到所有布局属性数组中    [self.attrsArray addObject:attrs];  }}

- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(nonnull NSIndexPath *)indexPath{  //获取元素的个数  NSInteger count = [self.collectionView numberOfItemsInSection:0];  /**设置圆心布局*/  //设置圆形的半径  CGFloat radius = 70;  //圆心的位置  CGFloat oX = self.collectionView.frame.size.width * 0.5;  CGFloat oY = self.collectionView.frame.size.height * 0.5;  //获取indexPath位置的元素的布局属性  UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];  //设置尺寸  attrs.size = CGSizeMake(50, 50);  //设置位置  if (count == 1)  {    attrs.center = CGPointMake(oX, oY);  }  else  {    CGFloat angle = (2 * M_PI / count) * indexPath.item;    CGFloat centerX = oX + radius * sin(angle);    CGFloat centerY = oY + radius * cos(angle);    attrs.center = CGPointMake(centerX, centerY);  }  //返回indexPath位置元素的布局属性  return attrs;}

- (nullable NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{  //返回所有元素的布局属性  return self.attrsArray;}

@property (nonatomic, copy) NSString *imageName;

- (void)awakeFromNib{  //通过Layer设置边框  self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;  self.imageView.layer.borderWidth = 6;  self.imageView.layer.cornerRadius = 3;}

- (void)setImageName:(NSString *)imageName{  _imageName = [imageName copy];  self.imageView.image = [UIImage imageNamed:imageName];}

/**所有的图片*/@property (nonatomic, strong) NSMutableArray *imageNames;

- (NSMutableArray *)imageNames{  if (_imageNames == nil)  {    NSMutableArray *imageNames = [NSMutableArray array];    for (NSInteger i = 0; i<20; i++)    {      NSString *imageName = [NSString stringWithFormat:@"%zd", i + 1];      [imageNames addObject:imageName];    }    _imageNames = imageNames;  }  return _imageNames;}

@property (nonatomic, weak) UICollectionView *collectionView;

- (void)setupCollectionView{  //设置frame  CGFloat collectionViewW = self.view.bounds.size.width;  CGFloat collectionViewH = 200;  CGRect frame = CGRectMake(0, 150, collectionViewW, collectionViewH);  //创建布局  LYPCircleLayout *layout = [[LYPCircleLayout alloc] init];  //创建collectionView  UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:layout];  self.collectionView = collectionView;  //设置collectionView的数据源和代理  collectionView.dataSource = self;  collectionView.delegate = self;  //添加collectionView到控制器的view中  [self.view addSubview:collectionView];}

/**设置重用表示*/static NSString *const ID = @"photo";- (void)viewDidLoad{  [super viewDidLoad];  [self setupCollectionView];  //注册cell  [self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([LYPPhotoCell class]) bundle:nil] forCellWithReuseIdentifier:ID];}

- (NSInteger)collectionView:(nonnull UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{  return self.imageNames.count;}

- (UICollectionViewCell *)collectionView:(nonnull UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath{  //根据重用标示从缓存池中取出cell，若缓存池中没有，则自动创建  LYPPhotoCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];  //设置cell的imageName属性  cell.imageName = self.imageNames[indexPath.item];  //返回cell  return cell;}

- (void)collectionView:(nonnull UICollectionView *)collectionView didSelectItemAtIndexPath:(nonnull NSIndexPath *)indexPath{  //将图片名从数组中移除  [self.imageNames removeObjectAtIndex:indexPath.item];  //删除collectionView中的indexPath位置的元素  [self.collectionView deleteItemsAtIndexPaths:@[indexPath]];}

- (void)touchesBegan:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event{  //判断当前布局的种类  if ([self.collectionView.collectionViewLayout isKindOfClass:[LYPLineLayout class]])  {    //流水布局，切换至圆形布局    [self.collectionView setCollectionViewLayout:[[LYPCircleLayout alloc] init] animated:YES];  } else  {    //圆形布局，切换至流水布局    LYPLineLayout *layout = [[LYPLineLayout alloc] init];    //设置元素的尺寸，若不设置，将使用自动计算尺寸    layout.itemSize = CGSizeMake(130, 130);    [self.collectionView setCollectionViewLayout:layout animated:YES];   }}