前言：各大電商平臺都有此類頁面，在你選擇要購買的商品時候，除了默認(rèn)的商品規(guī)格外，你可以自由選擇可供選擇的規(guī)格，有的商品有多中規(guī)格供選擇，今天分享的是當(dāng)前項目中使用的一種方法，僅供參考，不足之處，歡迎指出。
先看效果圖
image.png
看到這種多選的規(guī)格，第一反應(yīng)就是
collectionview，這個時候關(guān)鍵問題就出來了，規(guī)格的內(nèi)容長度并不是一樣的，但是系統(tǒng)默認(rèn)的cell的寬度卻只能設(shè)置成一樣的，這個時候大家都知道接下來我要說的了，自定義CollectionviewFlowLayout,是的。
@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;
// 內(nèi)邊距
- (UIEdgeInsets)LeeIrregularCollectionViewFlowLayout:(UICollectionViewLayout*)layout edgeInsetsInWaterflowLayoutForIndexPath:(NSIndexPath *)indexPath;
@end
@interface LeeIrregularCollectionViewFlowLayout : UICollectionViewFlowLayout
@property (nonatomic,weak) id<LeeIrregularCollectionViewFlowLayoutDelegate> leeFlowLayoutdelegate; //-> 代理
@property (nonatomic,strong) NSMutableArray *attrsArray; //-> 存放所有 cell headerview footer 的數(shù)組
@property (nonatomic,assign) CGFloat contentHeight; //-> 當(dāng)前高度
@property (nonatomic,assign) CGFloat currentX; //-> 當(dāng)前cell 右邊
@property (nonatomic,assign) CGFloat formerMaxY; //-> 前一個attr Y 軸 達(dá)到的最大位置
@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;
}
/*!
* 多次調(diào)用 只要滑出范圍就會 調(diào)用
* 當(dāng)CollectionView的顯示范圍發(fā)生改變的時候，是否重新發(fā)生布局
* 一旦重新刷新 布局，就會重新調(diào)用
* 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;
}
在代理方法中使用
- (CGSize)LeeIrregularCollectionViewFlowLayout:(UICollectionViewLayout *)layout itemSizeForIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake([self widthForString:self.dataArray[indexPath.section][@"list"][indexPath.row][@"name"] fontSize:15 andHeight:50]+20, 50);
}
/** 頭部視圖Size */
- (CGSize)LeeIrregularCollectionViewFlowLayout:(UICollectionViewLayout *)layout headerViewSizeForIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake([UIScreen mainScreen].bounds.size.width, 50);
}
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:HEADVIEW_ID forIndexPath:indexPath];
UILabel *label = [[UILabel alloc]init];
label.textAlignment = NSTextAlignmentLeft;
label.textColor = [UIColor blackColor];
label.font = [UIFont systemFontOfSize:15];
[headerView addSubview:label];
[label mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(headerView.mas_left).offset(10);
make.top.bottom.equalTo(headerView);
make.right.equalTo(headerView.mas_right).offset(-10);
}];
label.text = self.dataArray[indexPath.section][@"title"];
return headerView;
}
return nil;
}
在collectionview 懶加載方法中使用
LeeIrregularCollectionViewFlowLayout *flowLaout = [[LeeIrregularCollectionViewFlowLayout alloc]init];
flowLaout.scrollDirection = UICollectionViewScrollDirectionVertical;
_baseCollectionView = [[UICollectionView alloc]initWithFrame:CGRectZero collectionViewLayout:flowLaout];
flowLaout.leeFlowLayoutdelegate = self;
大功告成 效果如下
image.png
