ZLCollectionViewiOS APP 自定義布局
ZLCollectionview 為應(yīng)對(duì)類(lèi)似淘寶首頁(yè),京東首頁(yè),國(guó)美首頁(yè)等復(fù)雜布局而寫(xiě)。基于UICollectionView實(shí)現(xiàn),目前支持標(biāo)簽布局,列布局,百分比布局,定位布局,填充式布局,瀑布流布局等。支持縱向布局和橫向布局,可以根據(jù)不同的 section 設(shè)置不同的布局,支持拖動(dòng)cell,頭部懸浮,設(shè)置section背景色和自定義section背景view,向自定義背景view傳遞自定義方法。實(shí)現(xiàn)了電影選座等高難度的布局。
導(dǎo)入
支持cocoapod導(dǎo)入,最新版本 1.4.4
pod 'ZLCollectionViewFlowLayout'
注意事項(xiàng):
版本1.0開(kāi)始加入了橫向布局,有升級(jí)到1.0的,原來(lái)的類(lèi)ZLCollectionViewFlowLayout提示找不到,請(qǐng)更換成ZLCollectionViewVerticalLayout即可,其余不變。如果不想升級(jí)可用 pod 'ZLCollectionViewFlowLayout','0.8.7.1'
- ZLCollectionViewVerticalLayout ==== 縱向布局
- ZLCollectionViewHorzontalLayout ==== 橫向布局(暫時(shí)先做了標(biāo)簽頁(yè)布局和瀑布流,其余的后續(xù)增加)
如果遇到以下錯(cuò)誤, Unable to find a specification for ZLCollectionViewFlowLayout 請(qǐng)使用pod update命令來(lái)安裝。
參數(shù)列表
| 可配置參數(shù) | 類(lèi)型 | 作用 |
|---|---|---|
| isFloor | BOOL | 寬度是否向下取整,默認(rèn)為YES,該參數(shù)一般不用改 |
| canDrag | BOOL | 是否允許拖動(dòng)cell,默認(rèn)為NO |
| header_suspension | BOOL | 頭部是否懸浮,默認(rèn)為NO |
| layoutType | ZLLayoutType | 設(shè)置布局類(lèi)型,適用于只有單一布局可省去寫(xiě)代理的代碼 |
| columnCount | columnCount | 在列布局中設(shè)置列數(shù),適用于單一布局可省去寫(xiě)代理的代碼 |
| fixTop | CGFloat | header距離頂部的距離 |
| 布局名稱(chēng) | 布局類(lèi)型 | 作用 |
|---|---|---|
| LabelLayout | 標(biāo)簽頁(yè)布局 | |
| ColumnLayout | 列布局 | 瀑布流,單行布局,等分布局 |
| PercentLayout | 百分比布局 | |
| FillLayout | 填充式布局 | |
| AbsoluteLayout | 絕對(duì)定位布局 |
用法
//在UICollectionView創(chuàng)建之前加入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; } //實(shí)現(xiàn)代理,如果不實(shí)現(xiàn)也可以自己直接設(shè)置self.sectionInset,self.minimumLineSpacing,self.minimumInteritemSpacing。但是這種設(shè)置不支持不同section不同數(shù)值 //指定section用的樣式。LabelLayout是標(biāo)簽樣式,ClosedLayout用于tableviewcell或者瀑布流,九宮格之類(lèi)的。 - (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,必須實(shí)現(xiàn)該代理,指定列數(shù) - (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; } } //如果是百分比布局必須實(shí)現(xiàn)該代理,設(shè)置每個(gè)item的百分比,如果沒(méi)實(shí)現(xiàn)默認(rèn)比例為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; } } //如果是絕對(duì)定位布局必須是否該代理,設(shè)置每個(gè)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; }
評(píng)論
圖片
表情
