自定义flowLayout
- 首先要做的就是重写UICollectionviewFlowLayout这个类, 自定义一个布局.
1.创建一个UICollectionviewFlowLayout的类
在这个类当中写几条属性.
@interface WFCollectionViewLayout : UICollectionViewLayout
/** 指定有多少列. */
@property (nonatomic, assign) NSInteger columnCounts;
/** 设置距离屏幕四周的边界. */
@property (nonatomic, assign) UIEdgeInsets edgeInsets;
/** 列间距. */
@property (nonatomic, assign) NSInteger columnSpace;
/** 行间距. */
@property (nonatomic, assign) NSInteger rowSpace;
@property (nonatomic, assign)id<WFCollectionLayoutDelegate>delegate;
@end
2.为这个类新建一个协议方法
@class WFCollectionViewLayout;
@protocol WFCollectionLayoutDelegate <NSObject>
- (CGFloat)layout:(WFCollectionViewLayout *)layout
heightFroItenAtIndexPath:(NSIndexPath *)indexPath
Width:(CGFloat)widthh;
@end
这个协议方法在创建uicollectionview的界面中实现, 因为在抓取的数据中通常都会有图片的宽度和高度属性. 当我们在collectionView的界面中获取到数据的时候,可以通过这两个属性将每layout的高度返回到自定义的UICOllectionviewFlowLayout类中.通过返回的高度来判断layout的高度.
3.可以在.m文件中再写连个属性
@property (nonatomic, retain) NSMutableDictionary *columnDic; /** 用来存储每一列的Y值. */
@property (nonatomic, retain) NSMutableArray *attributesArray; /** 用来存储layout的属性的数组. */
4.重写自定义方法
- (instancetype)init {
self = [super init];
if (self) {
self.columnDic = [NSMutableDictionary dictionary];
self.attributesArray = [NSMutableArray array];
}
return self;
}
在初始化方法中初始化数组.
5.重写prepareLayout方法, 当collectionView布局layout的时候会调用到这个方法.
- (void)prepareLayout {
[super prepareLayout];
/** 清空属性数组. */
if (self.attributesArray != nil) {
[self.attributesArray removeAllObjects];
}
/** 根据列数进行遍历, 给骑士的每列都加上边界的距离. */
/** 数据列数进行遍历. */
for (NSInteger i = 0; i < self.columnCounts; i++) {
NSString *key = [NSString stringWithFormat:@"%ld", i];
self.columnDic[key] = @(self.edgeInsets.top);
}
/** 遍历每个item. */
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i < count; i++) {
[self setItemFrame:i];
}
}
当我们要对瀑布流添加下拉,上拉刷新的时候一定要将存储布局属性的数组进行清空.否则程序会crash.
- (void)setItemFrame:(NSInteger)index {
__block NSString *minColumn = @"0";
[self.columnDic enumerateKeysAndObjectsUsingBlock:^(id _Nonnull key, id _Nonnull obj, BOOL * _Nonnull stop) {
if ([obj floatValue] < [self.columnDic[minColumn] floatValue]) {
minColumn = key;
}
}];
CGFloat width = ((WIDTH - self.edgeInsets.left - self.edgeInsets.right - (self.columnCounts - 1) * self.columnSpace)) / self.columnCounts;
/** x坐标 = 左间距 + (列间距 + 宽) * 列的下标. */
/** 列的小标对应的是最短下标. */
CGFloat x = _edgeInsets.left + (width + _columnSpace) * [minColumn floatValue];
/** 创建一个indexPath. */
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:index inSection:0];
/** 高. */
CGFloat height = [self.delegate layout:self heightFroItenAtIndexPath:indexPath Width:width];
/** 先找到当前最短一列的Y值. */
CGFloat minY = [self.columnDic[minColumn] floatValue];
/** 为最短的一列更新Y周的高度 = minY + 高 + 行间距 */
self.columnDic[minColumn] = @(minY + height + self.rowSpace);
/** 这个类用来设置 item 的 frame , bounds 等属性的. */
UICollectionViewLayoutAttributes *layoutAttributed = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
layoutAttributed.frame = CGRectMake(x, minY, width, height);
[self.attributesArray addObject:layoutAttributed];
}
6.第四个方法: 把所有的样式返回, 告诉系统如何布局item
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
return self.attributesArray;
}
7.设置滚动范围
- (CGSize)collectionViewContentSize {
/** 滚动范围最长作为依据. */
__block NSString *maxY = @"0";
[self.columnDic enumerateKeysAndObjectsUsingBlock:^(id _Nonnull key, id _Nonnull obj, BOOL * _Nonnull stop) {
if ([obj floatValue] > [self.columnDic[maxY] floatValue]) {
maxY = key;
}
}];
CGFloat h = [self.columnDic[maxY] floatValue] + self.edgeInsets.bottom;
return CGSizeMake(0, h);
}
在viewController里调用
#pragma mark - 创建瀑布流
- (void)createCollectionView {
WFCollectionViewLayout *layout = [[WFCollectionViewLayout alloc] init];
layout.columnCounts = 2;
layout.columnSpace = 20;
layout.rowSpace = 15;
layout.edgeInsets = UIEdgeInsetsMake(10, 10, 10, 10);
layout.delegate = self;
_picCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 20, SCREEN_WIDTH, SCREEN_HEIGHT - 68-44) collectionViewLayout:layout];
[self.view addSubview:_picCollectionView];
[_picCollectionView release];
_picCollectionView.delegate = self;
_picCollectionView.dataSource = self;
[_picCollectionView registerClass:[WFPIcsCell class] forCellWithReuseIdentifier:@"picsCell"];
协议方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.picArray.count;// 装数据的数组
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
WFPIcsCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"picsCell" forIndexPath:indexPath];
WFPhotosModel *photoModel = self.picArray[indexPath.row];
cell.photoModel = photoModel;
return cell;
}
- (CGFloat)layout:(WFCollectionViewLayout *)layout heightFroItenAtIndexPath:(NSIndexPath *)indexPath Width:(CGFloat)widthh {
WFPhotosModel *model = self.picArray[indexPath.row];
CGFloat height = widthh * model.height / model.width;
return height;
}
