iOS UICollectionViewFlowLayout流式布局

新年第一发、先来个iOS温习温习

iOS UICollectionViewFlowLayout流式布局_第1张图片
042ec9e15de70b28500fa5b9e06883be.jpg
//
//  KCLLayout.m
//  ReactiveCocoaDemo
//
//  Created by kcl on 2018/2/25.
//  Copyright © 2018年 KCL. All rights reserved.
//

#import "KCLLayout.h"

@implementation KCLLayout

- (void)prepareLayout
{
    [super prepareLayout];
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    CGFloat insert = (self.collectionView.frame.size.width - self.itemSize.width)*0.5;
    self.itemSize = CGSizeMake(150, 150);
    self.sectionInset = UIEdgeInsetsMake(0, insert, 0, insert);
}

/**
 UICollectionViewLayoutAttributes *attrs;
 1.一个cell对应一个UICollectionViewLayoutAttributes对象
 2.UICollectionViewLayoutAttributes对象决定了cell的frame
 */
/**
 * 这个方法的返回值是一个数组(数组里面存放着rect范围内所有元素的布局属性)
 * 这个方法的返回值决定了rect范围内所有元素的排布(frame)
 */

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    // 获得super已经计算好的布局属性,返回的素组包括所有cell的布局属性
    NSArray *array = [super layoutAttributesForElementsInRect:rect];
    // 计算collectionView最中心点的x值
    CGFloat centerX = self.collectionView.contentOffset.x+self.collectionView.frame.size.width*0.5;

    // 遍历所有cell的属性,在原有布局属性的基础上,进行微调
    for (UICollectionViewLayoutAttributes *attrs in array){
        // cell的中心点x 和 collectionView最中心点的x值 的间距
        CGFloat delta = ABS(attrs.center.x - centerX);
        // 根据间距值 计算 cell的缩放比例
        CGFloat scale = 1 - delta/self.collectionView.frame.size.width;
        // 设置缩放比例
        attrs.transform = CGAffineTransformMakeScale(scale, scale);
    }
    return array;
}

/**
 * 这个方法的返回值,就决定了collectionView停止滚动时的偏移量
 */
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    // 计算出最终显示的矩形框
    CGRect rect;
    rect.origin.y = 0;
    rect.origin.x = proposedContentOffset.x;
    rect.size = self.collectionView.frame.size;

    // 计算collectionView最中心点的x值
    CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
    // 获得super已经计算好的布局属性
    NSArray *array = [super layoutAttributesForElementsInRect:rect];

    // 存放最小的间距值
    CGFloat minDelta = MAXFLOAT;

    for (UICollectionViewLayoutAttributes *attrs in array){
        if (ABS(minDelta) > ABS(attrs.center.x-centerX)) {
            minDelta = attrs.center.x - centerX;
        }
    }
    // 修改原有的偏移量
//    proposedContentOffset.x += minDelta;
    return CGPointMake(proposedContentOffset.x + minDelta, proposedContentOffset.y);
}

/**
 * 当collectionView的显示范围发生改变的时候,是否需要重新刷新布局
 * 一旦重新刷新布局,就会重新调用下面的方法:
 1.prepareLayout
 2.layoutAttributesForElementsInRect:方法
 */
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}
@end

  • 实现瀑布流
    这个瀑布流是16年写的了、那个时候没怎么玩 。现在把代码粘贴过来
//
//WaterflowLayout.m
//瀑布流
//
//Created by mac on 16/5/17.
//Copyright © 2016年孔晨亮. All rights reserved.
//
#import"WaterflowLayout.h"
#import"ViewController.h"
@interfaceWaterflowLayout()
/**
*cell高度数组
*/
@property(nonatomic,strong)NSMutableArray *Heightarray;
/**
*cell属性数组
*/
@property(nonatomic,strong)NSMutableArray *Attrsarray;

@end

@implementationWaterflowLayout

-(NSMutableArray *)Heightarray
{
    if(!_Heightarray) {

        _Heightarray = [[NSMutableArray alloc]init];
    }
    return_Heightarray;
}

- (NSMutableArray *)Attrsarray
{
    if(!_Attrsarray) {
        _Attrsarray = [[NSMutableArray alloc]init];
    }
    return_Attrsarray;
}
/**
*取出最小值下表
*
*@return <#return value description#>
*/
- (NSInteger)minIndex
{
    __blockNSInteger minIndex =0;
    __blockCGFloat minValue = MAXFLOAT;
    [self.Heightarray enumerateObjectsUsingBlock:^(id_Nonnullobj, NSUInteger idx,BOOL*_Nonnullstop) {
    if([obj floatValue] < minValue) {
            minValue = [obj floatValue];
            minIndex = idx;
        }
    }];
    returnminIndex;
}
/**
*取出最大值下标
*
*@return <#return value description#>
*/
- (NSInteger)maxIndex
{
    __blockNSInteger maxIndex =0;
    __blockCGFloat maxValue =0;
    [self.Heightarray enumerateObjectsUsingBlock:^(id_Nonnullobj, NSUInteger idx,BOOL*_Nonnullstop) {

        if([obj floatValue] > maxValue) {
            maxValue = [obj floatValue];
            maxIndex = idx;
            }
    }];
    returnmaxIndex;
}

- (void)prepareLayout
{
    self.delegate = (id)self.collectionView.delegate;

    for(inti =0; i

你可能感兴趣的:(iOS UICollectionViewFlowLayout流式布局)