前言
目前iOS 移动端开发搜索，或者标签都喜欢用自适应宽度的设计模式，节约布局。目前大多开发都是利用 tableiview 嵌套各种 view 或者嵌套collectionView。使用控件太多，而且问题也太多，维护使用都特别费事。
所以考虑利用UICollectionViewFlowLayout 重写布局，来达到要求效果。
为了充分考虑适用广泛性，增加了 section 中有 header 和 footer 的情况。
先上图看效果
自适应宽度
代码奉上
LeeIrregularCollectionViewFlowLayout.h
//
// LeeIrregularCollectionViewFlowLayout.h
// LiberFashion
//
// Created by gt_leemiao on 2017/12/12.
// Copyright © 2017年 GTLand. All rights reserved.
//
#import <UIKit/UIKit.h>
@protocol LeeIrregularCollectionViewFlowLayoutDelegate <NSObject>
@required
// cell size
- (CGSize)LeeIrregularCollectionViewFlowLayout:(UICollectionViewLayout *)layout itemSizeForIndexPath:(NSIndexPath *)indexPath;
@optional
// headerview size
- (CGSize)LeeIrregularCollectionViewFlowLayout:(UICollectionViewLayout *)layout headerViewSizeForIndexPath:(NSIndexPath *)indexPath;
// footerview size
- (CGSize)LeeIrregularCollectionViewFlowLayout:(UICollectionViewLayout *)layout FooterViewSizeForIndexPath:(NSIndexPath *)indexPath;
// 横向间距
- (CGFloat)LeeIrregularCollectionViewFlowLayout:(UICollectionViewLayout*)layout itemMinimumLineSpacingForIndexPath:(NSIndexPath *)indexPath;
// 竖向间距
- (CGFloat)LeeIrregularCollectionViewFlowLayout:(UICollectionViewLayout*)layout ItemMinimumInteritemSpacingForIndexPath:(NSIndexPath *)indexPath;
// 内边距
- (UIEdgeInsets)LeeIrregularCollectionViewFlowLayout:(UICollectionViewLayout*)layout edgeInsetsInWaterflowLayoutForIndexPath:(NSIndexPath *)indexPath;
@end
@interface LeeIrregularCollectionViewFlowLayout : UICollectionViewFlowLayout
@property (nonatomic,weak) id<LeeIrregularCollectionViewFlowLayoutDelegate> leeFlowLayoutdelegate; //-> 代理
@end
LeeIrregularCollectionViewFlowLayout.m
//
// LeeIrregularCollectionViewFlowLayout.m
// LiberFashion
//
// Created by gt_leemiao on 2017/12/12.
// Copyright © 2017年 GTLand. All rights reserved.
//
#import "LeeIrregularCollectionViewFlowLayout.h"
@interface LeeIrregularCollectionViewFlowLayout ()
@property (nonatomic,strong) NSMutableArray *attrsArray; //-> 存放所有 cell headerview footer 的数组
@property (nonatomic,assign) CGFloat contentHeight; //-> 当前高度
@property (nonatomic,assign) CGFloat currentX; //-> 当前cell 右边
@property (nonatomic,assign) CGFloat formerMaxY; //-> 前一个attr Y 轴 达到的最大位置
@end
@implementation LeeIrregularCollectionViewFlowLayout
#pragma mark - override super method
/**
* 第一步： 初始化
*/
- (void)prepareLayout{
[super prepareLayout];
self.contentHeight = 0.0f;
self.currentX = 0.0f;
self.formerMaxY = 0.0f;
[self.attrsArray removeAllObjects];
// 如果collectionview 的section == 0 直接returen
NSInteger sectionNumber = [self.collectionView numberOfSections];
if (sectionNumber == 0) {
return;
}
// section > 0
for (int i = 0; i < sectionNumber; i++) {
NSIndexPath *headerFooterIndexPath = [NSIndexPath indexPathForItem:0 inSection:i];
UICollectionViewLayoutAttributes *sectionHeaderAttri = [self layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader atIndexPath:headerFooterIndexPath];
if (sectionHeaderAttri.frame.size.height > 0) {
[self.attrsArray addObject:sectionHeaderAttri];
}
NSInteger itemNumber = [self.collectionView numberOfItemsInSection:i];
for (int j = 0; j < itemNumber; j++) {
NSIndexPath *itemIndexPath = [NSIndexPath indexPathForItem:j inSection:i];
UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:itemIndexPath];
NSAssert(attrs.frame.size.height > 0 && attrs.frame.size.width > 0 , @"item size 的高度 或 宽度 为0，这里不允许为0 ");
if (attrs.frame.size.height > 0 && attrs.frame.size.width > 0) {
}
[self.attrsArray addObject:attrs];
}
UICollectionViewLayoutAttributes *sectionFooterAttri = [self layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter atIndexPath:headerFooterIndexPath];
if (sectionFooterAttri.frame.size.height > 0) {
[self.attrsArray addObject:sectionFooterAttri];
}
}
}
/**
* 第二步： 决定cell的排布
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
return self.attrsArray;
}
/*!
* 多次调用 只要滑出范围就会 调用
* 当CollectionView的显示范围发生改变的时候，是否重新发生布局
* 一旦重新刷新 布局，就会重新调用
* 1.layoutAttributesForElementsInRect：方法
* 2.preparelayout方法
*/
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
return YES;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath{
CGSize supplementaryViewSize = CGSizeZero;
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:elementKind withIndexPath:indexPath];
if ([elementKind isEqualToString:UICollectionElementKindSectionHeader]) {
if (self.leeFlowLayoutdelegate && [self.leeFlowLayoutdelegate respondsToSelector:@selector(leeIrregularCollectionViewFlowLayout:headerViewSizeForIndexPath:)]) {
supplementaryViewSize = [self.leeFlowLayoutdelegate leeIrregularCollectionViewFlowLayout:self headerViewSizeForIndexPath:indexPath];
}
}else if ([elementKind isEqualToString:UICollectionElementKindSectionFooter]){
if (self.leeFlowLayoutdelegate && [self.leeFlowLayoutdelegate respondsToSelector:@selector(leeIrregularCollectionViewFlowLayout:footerViewSizeForIndexPath:)]) {
supplementaryViewSize = [self.leeFlowLayoutdelegate leeIrregularCollectionViewFlowLayout:self footerViewSizeForIndexPath:indexPath];
}
}
CGRect frame = attrs.frame;
frame.size = supplementaryViewSize;
frame.origin.y = self.contentHeight;
attrs.frame = frame;
self.contentHeight += supplementaryViewSize.height;
return attrs;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
CGFloat collectionViewW = self.collectionView.frame.size.width;
CGSize itemSize = [self.leeFlowLayoutdelegate leeIrregularCollectionViewFlowLayout:self itemSizeForIndexPath:indexPath];
CGFloat itemLineSpacing = 10.0f;
if (self.leeFlowLayoutdelegate && [self.leeFlowLayoutdelegate respondsToSelector:@selector(leeIrregularCollectionViewFlowLayout:itemMinimumLineSpacingForIndexPath:)]) {
itemLineSpacing = [self.leeFlowLayoutdelegate leeIrregularCollectionViewFlowLayout:self itemMinimumLineSpacingForIndexPath:indexPath];
}
CGFloat interItemSpacing = 10.0f;
if (self.leeFlowLayoutdelegate && [self.leeFlowLayoutdelegate respondsToSelector:@selector(leeIrregularCollectionViewFlowLayout:ItemMinimumInteritemSpacingForIndexPath:)]) {
interItemSpacing = [self.leeFlowLayoutdelegate leeIrregularCollectionViewFlowLayout:self ItemMinimumInteritemSpacingForIndexPath:indexPath];
}
UIEdgeInsets sectionEdge =UIEdgeInsetsMake(10.f, 10.f, 10.f, 10.f);
if (self.leeFlowLayoutdelegate && [self.leeFlowLayoutdelegate respondsToSelector:@selector(leeIrregularCollectionViewFlowLayout:edgeInsetsInWaterflowLayoutForIndexPath:)]) {
sectionEdge = [self.leeFlowLayoutdelegate leeIrregularCollectionViewFlowLayout:self edgeInsetsInWaterflowLayoutForIndexPath:indexPath];
}
NSInteger itemNumber = [self.collectionView numberOfItemsInSection:indexPath.section];
if (itemNumber == 0) {
attrs.frame = CGRectZero;
return attrs;
}
CGRect currentFrame = attrs.frame;
currentFrame.size = itemSize;
CGFloat maxWidth = MIN(currentFrame.size.width, collectionViewW - sectionEdge.left - sectionEdge.right);
currentFrame.size.width = maxWidth;
if (indexPath.row == 0) {
self.contentHeight += sectionEdge.top;
currentFrame.origin.x = sectionEdge.left;
currentFrame.origin.y = self.contentHeight;
}else{
if (self.currentX + itemLineSpacing + itemSize.width + sectionEdge.right <= collectionViewW) { //本行
currentFrame.origin.x = self.currentX + itemLineSpacing;
currentFrame.origin.y = self.contentHeight;
}else{ //下一行
self.contentHeight = self.formerMaxY + interItemSpacing;
currentFrame.origin.x = sectionEdge.left;
currentFrame.origin.y = self.contentHeight;
}
}
attrs.frame = currentFrame;
self.currentX = CGRectGetMaxX(attrs.frame);
self.formerMaxY = MAX(CGRectGetMaxY(attrs.frame), self.formerMaxY);
if (indexPath.row == (itemNumber -1) ) {
self.contentHeight = MAX(CGRectGetMaxY(attrs.frame) + sectionEdge.bottom, self.formerMaxY + sectionEdge.bottom);
}
return attrs;
}
- (CGSize)collectionViewContentSize{
return CGSizeMake(self.collectionView.frame.size.width, self.contentHeight);
}
#pragma mark - setter $ getter
- (NSMutableArray *)attrsArray{
if (!_attrsArray) {
_attrsArray = [NSMutableArray arrayWithCapacity:1];
}
return _attrsArray;
}
@end
如何使用？
第一步：创建flowLayout 设置代理为自己，遵守代理方法
LeeIrregularCollectionViewFlowLayout *flowLayout = [[LeeIrregularCollectionViewFlowLayout alloc] init];
flowLayout.leeFlowLayoutdelegate = self;
第二步：collectionView 初始化使用 LeeIrregularCollectionViewFlowLayout
第三步：使用代理方法。
如使用过程中有任何问题 请留言，基本一天之内就会回复。
2019-03-26 22:16:48 更新
代码有更新
// 初始化方法中需要重置初始值
self.contentHeight = 0.0f;
self.currentX = 0.0f;
self.formerMaxY = 0.0f;
