ZLCollectionViewiOS APP 自定义布局
ZLCollectionview 为应对类似淘宝首页，京东首页，国美首页等复杂布局而写。基于UICollectionView实现，目前支持标签布局，列布局，百分比布局，定位布局，填充式布局，瀑布流布局等。支持纵向布局和横向布局，可以根据不同的 section 设置不同的布局，支持拖动cell，头部悬浮，设置section背景色和自定义section背景view，向自定义背景view传递自定义方法。实现了电影选座等高难度的布局。
导入
支持cocoapod导入，最新版本 1.4.4
pod 'ZLCollectionViewFlowLayout'
注意事项：
版本1.0开始加入了横向布局，有升级到1.0的，原来的类ZLCollectionViewFlowLayout提示找不到，请更换成ZLCollectionViewVerticalLayout即可，其余不变。如果不想升级可用 pod 'ZLCollectionViewFlowLayout','0.8.7.1'
- ZLCollectionViewVerticalLayout ==== 纵向布局
- ZLCollectionViewHorzontalLayout ==== 横向布局(暂时先做了标签页布局和瀑布流，其余的后续增加)
如果遇到以下错误， Unable to find a specification for ZLCollectionViewFlowLayout 请使用pod update命令来安装。
参数列表
| 可配置参数 | 类型 | 作用 |
|---|---|---|
| isFloor | BOOL | 宽度是否向下取整，默认为YES，该参数一般不用改 |
| canDrag | BOOL | 是否允许拖动cell，默认为NO |
| header_suspension | BOOL | 头部是否悬浮，默认为NO |
| layoutType | ZLLayoutType | 设置布局类型，适用于只有单一布局可省去写代理的代码 |
| columnCount | columnCount | 在列布局中设置列数，适用于单一布局可省去写代理的代码 |
| fixTop | CGFloat | header距离顶部的距离 |
| 布局名称 | 布局类型 | 作用 |
|---|---|---|
| LabelLayout | 标签页布局 | |
| ColumnLayout | 列布局 | 瀑布流，单行布局，等分布局 |
| PercentLayout | 百分比布局 | |
| FillLayout | 填充式布局 | |
| AbsoluteLayout | 绝对定位布局 |
用法
//在UICollectionView创建之前加入ZLCollectionViewFlowLayout
- (UICollectionView*)collectionViewLabel {
if (!_collectionViewLabel) {
ZLCollectionViewFlowLayout *flowLayout = [[ZLCollectionViewFlowLayout alloc] init];
flowLayout.delegate = self;
_collectionViewLabel = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
_collectionViewLabel.dataSource = self;
_collectionViewLabel.delegate = self;
_collectionViewLabel.backgroundColor = [UIColor whiteColor];
[_collectionViewLabel registerClass:[SEMyRecordLabelCell class] forCellWithReuseIdentifier:[SEMyRecordLabelCell cellIdentifier]];
[_collectionViewLabel registerClass:[SEMyRecordHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:[SEMyRecordHeaderView headerViewIdentifier]];
}
return _collectionViewLabel;
}
//实现代理，如果不实现也可以自己直接设置self.sectionInset，self.minimumLineSpacing，self.minimumInteritemSpacing。但是这种设置不支持不同section不同数值
//指定section用的样式。LabelLayout是标签样式，ClosedLayout用于tableviewcell或者瀑布流，九宫格之类的。
- (ZLLayoutType)collectionView:(UICollectionView *)collectionView layout:(ZLCollectionViewFlowLayout *)collectionViewLayout typeOfLayout:(NSInteger)section {
switch (section) {
case 0:
return LabelLayout;
case 1:
case 2:
return FillLayout;
case 3:
case 4:
return AbsoluteLayout;
case 5:
case 6:
return PercentLayout;
default:
return ClosedLayout;
}
}
//如果是ClosedLayout样式的section，必须实现该代理，指定列数
- (NSInteger)collectionView:(UICollectionView *)collectionView layout:(ZLCollectionViewFlowLayout*)collectionViewLayout columnCountOfSection:(NSInteger)section {
switch (section) {
case 7:
return 4;
case 8:
return 2;
case 9:
return 1;
default:
return 0;
}
}
//如果是百分比布局必须实现该代理，设置每个item的百分比，如果没实现默认比例为1
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(ZLCollectionViewFlowLayout*)collectionViewLayout percentOfRow:(NSIndexPath*)indexPath; {
switch (indexPath.section) {
case 5: {
switch (indexPath.item) {
case 0:
return 1.0/3;
case 1:
return 2.0/3;
case 2:
return 1.0/3;
case 3:
return 1.0/3;
case 4:
return 1.0/3;
case 5:
return 1.0/4;
case 6:
return 1.0/4;
case 7:
return 1.0/2;
case 8:
return 3.0/5;
case 9:
return 2.0/5;
default:
break;
}
}
case 6: {
if (indexPath.item % 2==0) {
return 3.0/4;
} else {
return 1.0/4;
}
}
default:
return 1;
}
}
//如果是绝对定位布局必须是否该代理，设置每个item的frame
- (CGRect)collectionView:(UICollectionView *)collectionView layout:(ZLCollectionViewFlowLayout*)collectionViewLayout rectOfItem:(NSIndexPath*)indexPath {
switch (indexPath.section) {
case 3: {
CGFloat width = (collectionView.frame.size.width-200)/2;
CGFloat height = width;
switch (indexPath.item) {
case 0:
return CGRectMake(0, 0, width, height);
case 1:
return CGRectMake(width, 0, width, height);
case 2:
return CGRectMake(0, height, width, height);
case 3:
return CGRectMake(width, height, width, height);
case 4:
return CGRectMake(width/2, height/2, width, height);
default:
return CGRectZero;
}
}
break;
case 4: {
switch (indexPath.item) {
case 0:
return CGRectMake((collectionView.frame.size.width-20)/2-100, 0, 200, 30);
default: {
NSInteger column = (collectionView.frame.size.width-20)/30;
return CGRectMake(((indexPath.item-1)%column)*30, 100+((indexPath.item-1)/column)*30, 20, 20);
}
}
}
break;
default:
return CGRectZero;
}
return CGRectZero;
}
评论