第一步:创建UICollectionViewFlowLayout,并且将创建出来的对象赋值给UICollectionView。
+(id)imageCollectViewWithFrame:(CGRect)frame
{
UICollectionViewFlowLayout *flowLayout=[[UICollectionViewFlowLayout alloc] init];
/******设置UICollectionView的滚动方向*******/
flowLayout.scrollDirection=UICollectionViewScrollDirectionVertical;
ImageCollectionView *imageCollectionView=[[ImageCollectionView alloc] initWithFrame:frame collectionViewLayout:flowLayout];
return imageCollectionView;
}
第二步:初始化UICollectionView:
-(id)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout
{
if (self=[super initWithFrame:frame collectionViewLayout:layout]) {
self.showsVerticalScrollIndicator=NO;
self.showsHorizontalScrollIndicator=NO;
self.backgroundColor=[UIColor clearColor];
self.dataSource=self;
self.delegate=self;
[self registerClass:[ImageCollectionViewCell class] forCellWithReuseIdentifier:identifer];
[self initData];
}
return self;
}
在这个初始化的方法里面要做的有这几件事:设置好delegate和dataSource以及注册UICollectionViewCell。
第三步:实现UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout这三个协议里面的方法。其中在自定义UICollectionViewCell的时候,只需要重写的它的initWithFrame方法就可以了。
#pragma mark UICollectionViewDataSource
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return self.allImages.count/column+1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
if (section==(self.allImages.count/column)) {
return self.allImages.count%column;
}else{
return column;
}
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
ImageCollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:identifer forIndexPath:indexPath];
id image=self.allImages[indexPath.section*column+indexPath.item];
if ([image isKindOfClass:[NSString class]]) {
cell.imageStr=image;
}
if ([image isKindOfClass:[UIImage class]]) {
cell.image=image;
}
return cell;
}
#pragma mark UICollectionViewDelegate
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
__block ImageCollectionView *weakSelf=self;
if (((indexPath.section*column+indexPath.item)==(weakSelf.allImages.count-1))&&(!_reachMaxImageCount)) {
/******点击了最后一个item,添加图片按钮*******/
[WTManager PresentPhotoControllerMaxImagesCount:9 andDidSelectImageBlock:^(NSArray<UIImage *> *photos, NSArray *assets, BOOL isSelectOriginalPhoto) {
[weakSelf.allImages removeLastObject];
for (int i=0; i<photos.count; i++) {
UIImage *image=[photos objectAtIndex:i];
[weakSelf.allImages addObject:image];
}
if (weakSelf.allImages.count<maxImageCount) {
/******最多上传九张图片,达到九张图片隐藏添加按钮*******/
[weakSelf.allImages addObject:@"addPhoto@2x"];
_reachMaxImageCount=NO;
}else{
NSArray *tempArray=[weakSelf.allImages subarrayWithRange:NSMakeRange(0, 9)];
[weakSelf.allImages removeLastObject];
weakSelf.allImages=[NSMutableArray arrayWithArray:tempArray];
_reachMaxImageCount=YES;
}
[weakSelf reloadData];
}];
}else{
/******进入放大后的图片浏览器,可以进行删除*******/
ImageDetailController *imageDetailVC=[[ImageDetailController alloc] init];
[[WTManager CurrentController] pushViewController:imageDetailVC animated:YES];
}
}
#pragma mark UICollectionViewDelegateFlowLayout
/******定义每个cell的大小*******/
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
CGFloat width=(kScreenWidth-MarginToBound*2-(column-1)*MarginToBound)/column;
CGFloat height=width;
return CGSizeMake(width, height);
}
/******定义每个section的四边间距*******/
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(0, margin, margin, margin);
}
/******两行cell之间的间距(上下行cell的间距,同一组的)*******/
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
return margin;
}
/******两个cell之间的间距(同一行的cell间距,同一组的)*******/
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return margin;
}
这几个方法的执行顺序依此为:
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;(获取组数)
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;(获取每组的item数)
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;(获取每个cell的大小)
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;(获取每个section的四边间距)
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;(获取同一组,同一行的cell的之间的间距)
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;(获取同一组上下行cell的间距)
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;(获取对应的cell)