CollectionView的详细使用(三)

本人小白,欢迎各位大佬补充指点

collectionView的基本使用-自定义布局

自定义布局有两种方式:

1. 继承自UICollectionViewLayout
2. 继承自UICollectionViewFlowLayout

控制器代码如下:

#import "ZHCircleLayout.h"
#import "ViewController.h"
#import "ZHLineLayout.h"
#import "ZHDefineLayout.h"
#import "ZHCollectionViewCell.h"
#import "CollectionViewController2.h"
@interface ViewController ()
@property (nonatomic,strong) UICollectionView *collectionView;
@property (nonatomic,strong) NSMutableArray *imageArray;
@end
static NSString *cellID = @"itemcell";
@implementation ViewController
-(NSMutableArray *)imageArray{
    if (_imageArray == nil) {
        _imageArray = [NSMutableArray array];
        for (int i = 0 ;i<20; i++) {
            [_imageArray addObject:[NSString stringWithFormat:@"%zd",i+1]];
        }
    }
    return _imageArray ;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    CGFloat collectionWH = [UIScreen mainScreen].bounds.size.width;
    CGRect frame = CGRectMake(0, 200, collectionWH, 300);
    ZHLineLayout *layout = [[ZHLineLayout alloc] init];
    layout.itemSize = CGSizeMake(150, 150);//设置item的尺寸
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    UICollectionView *collection = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:layout];
    //只能注册
    [collection registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellID];
    [collection registerNib:[UINib nibWithNibName:@"ZHCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:cellID];
    collection.dataSource = self;
    collection.delegate = self;
    [self.view addSubview:collection];
    self.collectionView = collection;
   
}
//布局间的切换
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
//    CollectionViewController2 *collectVC = [[CollectionViewController2 alloc] init];
//    [self presentViewController:collectVC animated:YES completion:nil];
    //看完自定义布局3之后在看下面这个!!切换布局
    if ([self.collectionView.collectionViewLayout isKindOfClass:[ZHLineLayout class]]) {
        [self.collectionView setCollectionViewLayout:[[ZHCircleLayout alloc] init] animated:YES];
    }else if([self.collectionView.collectionViewLayout isKindOfClass:[ZHCircleLayout class]]) {
         [self.collectionView setCollectionViewLayout:[[ZHDefineLayout alloc] init] animated:YES];
    }
    else if([self.collectionView.collectionViewLayout isKindOfClass:[ZHDefineLayout class]]) {
        ZHLineLayout *layout = [[ZHLineLayout alloc] init];
        layout.itemSize = CGSizeMake(150, 150);
        layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        [self.collectionView setCollectionViewLayout:layout animated:YES];
    }
}

#pragma mark - UICollectionViewDataSource
//必须实现@required:
//每个section里面有多少个item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return self.imageArray.count;
}

//每个cell
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    ZHCollectionViewCell *item = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    item.imageName = self.imageArray[indexPath.item];
//    item.backgroundColor = [UIColor redColor];
    //没有该方法,只能使用注册(sb不需要写)
//    if (!item) {
//        item = [UICollectionViewCell alloc] init...
//    }
    //精辟!!!防止重复添加!!!!
//    NSInteger  tag = 10;
//    UILabel *label = (UILabel *)[item.contentView viewWithTag:tag];
//    if (!label) {
//        label = [[UILabel alloc] init];
//        label.tag = tag;
//        [item.contentView addSubview:label];
//    }
//    label.text = [NSString stringWithFormat:@"%zd",indexPath.item];
//    [label sizeToFit];
    return item;
}
#pragma mark - UICollectionViewDeletegate
//点击图片删除图片
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    [self.imageArray removeObjectAtIndex:indexPath.item];
    [self.collectionView deleteItemsAtIndexPaths:@[indexPath]];
}
@end

自定义xib的cell:

#import 

@interface ZHCollectionViewCell : UICollectionViewCell
@property (nonatomic,copy) NSString *imageName;
@end

#import "ZHCollectionViewCell.h"

@interface ZHCollectionViewCell()

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end
@implementation ZHCollectionViewCell

- (void)awakeFromNib {
    [super awakeFromNib];
    //图片加边框
    self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;
    self.imageView.layer.borderWidth = 10;
}
-(void)setImageName:(NSString *)imageName{
    _imageName = imageName;
    _imageView.image = [UIImage imageNamed:imageName];
}
@end

继承自UICollectionViewFlowLayout-相册浏览器

为何选择继承自UICollectionViewFlowLayout,因为流水布局本身具有一些特性,在相册浏览器中我们需要,比如横向滚动功能等功能
实现主要步骤:
1.cell的放大缩小
2.停止滚动时:cell的居中

ZHLineLayout代码如下

UICollectionViewLayoutAttributes:布局属性
一个cell就对应一个UICollectionViewLayoutAttributes对象
UICollectionViewLayoutAttributes对象决定了cell的展示样式(frame等其他)

#import "ZHLineLayout.h"

@implementation ZHLineLayout
/**
 //所有的初始化操作都要放在这里面,不要放在上面init中,因为调用init方法时,self还没有添加到collectionView里面,因此self.collectionView为nil,itemsize也不能拿到,拿到的只是系统默认的50,50
 */
-(void)prepareLayout{
    [super prepareLayout];
    //设置contentView的内边距,为了让第一个和最后一个cell显示在最中间
    CGFloat margin = (self.collectionView.frame.size.width - self.itemSize.width)*0.5;
    self.sectionInset = UIEdgeInsetsMake(0, margin, 0, margin);
}
/**
 当collectionView的显示范围发生改变的时候(就是contentsize显示那部分),是否需要重新布局
 一旦刷新布局,就会重新调用layoutAttributesForElementsInRect方法和prepareLayout方法
 即:只要滚动,就回改变contentsize的显示rect,那么就会调用layoutAttributesForElementsInRect重新布局
 */
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
    return YES;
}
/**
 1.cell的放大缩小
 通过这个方法返回所有的attributes,去展示cell
 这个方法返回值是一个数组(数组里面存放着rect范围内所有元素的布局属性)
 这个方法返回值决定了rect范围内所有元素的排布(frame)
 */
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
    //获得super已经计算好的布局属性
    NSArray *array = [super layoutAttributesForElementsInRect:rect];
    //在原有布局属性基础上,进行微调
    //设置缩放
    //思路:当cell的中心点x距离collectionView的中心线越来越近时应该放大,重合时最大,越来越远时应该缩小,注意这个距离是相对于contentsize的!!
    //1.计算collectionView最中心点的x值,注意是相对于contentsize的! 偏移量+宽度的一半
    CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
    for (UICollectionViewLayoutAttributes *attri in array) {
        //每一个cell中心点的x,注意是相对于collectionView的contentsize的
//        NSLog(@"%f",attri.center.x );
        //2.拿到cell中心点x与cellectionview中心点的距离
        CGFloat delta = ABS(attri.center.x - centerX);
        //3.根据间距值计算出cell的缩放比例
        CGFloat scale = 1 - delta/self.collectionView.frame.size.width;
        attri.transform = CGAffineTransformMakeScale(scale, scale);
        NSLog(@"%f",delta);
    }
    NSLog(@"%zd",array.count );
    NSLog(@"%f",self.collectionView.frame.size.width );
    return array;
}

/**
 2.停止滚动时:cell的居中
 这个方法就决定了,collectionview停止滚动时的偏移量contentsize的offset(x,y)
 换句话说,返回值point是啥,contenview就在哪地方停下来,注意,point是相对于contentsize而言的
 调用时刻:手一松开就会调用,但是注意此时collectionView可能任然在滚动!
 //因此这个参数
 proposedContentOffset:真正停止那一刻的偏移量
 self.collectionView.contentOffset.x:手停那一刻的偏移量
 参数velocity:速度描述量,velocity.x水平方向上的速率,velocity.y竖直方向上的速率
 注意:如果将下面的proposedContentOffset全部改为self.collectionView.contentOffset的话,结果是手一旦松开就回停止滚动,但是仍然会居中显示
 思路:
 1.拿到哪个cell距离collectionView中心线最近距离
 2.改变这个contentView的偏移量即可
 */
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{
    //1.拿到所有cell的中心点x
    //用super,否者会调用上面的那个方法
    //注意这里要传的当然也是真正停止后矩形的x
    CGRect rect;
    rect.origin.x = proposedContentOffset.x;
    rect.origin.y = 0;
    rect.size = self.collectionView.frame.size;
    NSArray *array = [super layoutAttributesForElementsInRect:rect];
   //计算collectionView最中心点的x值
   //self.collectionView.contentOffset.x此时就不能用这个了
   CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
   CGFloat mindelta = MAXFLOAT;
   for (UICollectionViewLayoutAttributes *attri in array) {
       if (ABS(mindelta) > ABS(attri.center.x - centerX)) {
           mindelta = attri.center.x - centerX;
       } ;
    }
   NSLog(@"%f-------%f=======%f",self.collectionView.contentOffset.x,velocity.x,proposedContentOffset.x);
    //2.修改contentView原有的偏移量
    proposedContentOffset.x += mindelta;
   return proposedContentOffset;
}
@end

继承自UICollectionViewLayout

普通布局

本次使用布局完全用自定义布局UICollectionViewLayout,不再继承自流水布局UICollectionViewFlowLayout
继承自最根本的布局UICollectionViewLayout注意以下几点:
1.cell的所有的attribute对象需要自己创建
需要重写:layoutAttributesForElementsInRect方法
为了只计算一次,那么就可以把计算放在prepareLayout方法中
如果数据量非常大,那么可以把计算放在子线程中,当计算完成回到主线程刷新布局即可
2.collectionView的contentsize需要你重新告诉他,否则不滚动
需要重写:collectionViewContentSize方法
3.重写返回每一个cell的布局属性layoutAttributesForItemAtIndexPath
要是切换布局的话这个方法必须实现,否则报错
不切换可以不实现

ZHDefineLayout代码如下

#import "ZHDefineLayout.h"
@interface ZHDefineLayout()
@property (nonatomic,strong) NSMutableArray *attriArray;
@end
@implementation ZHDefineLayout
-(NSMutableArray *)attriArray{
    if (_attriArray == nil) {
        _attriArray = [NSMutableArray array];
    }
    return _attriArray ;
}
-(void)prepareLayout{
    [super prepareLayout];
    //计算出所有cell的UICollectionViewLayoutAttributes
    [self.attriArray removeAllObjects];
    //拿到collectionView的所有的cell个数,这里只考虑一个section,多组两重for循环
    //多少组
    NSInteger sectoncount = [self.collectionView numberOfSections];
    //那一组多少个
    NSInteger rowcount = [self.collectionView numberOfItemsInSection:0];
    for (int i = 0 ; i *)layoutAttributesForElementsInRect:(CGRect)rect{
    //继承自最根本的布局,因此就不用调用该方法了
//    NSArray *array = [super layoutAttributesForElementsInRect:rect];
    //既然没有,那就需要我们自己创建了
    return self.attriArray;
}
//因为你是空白继承,需要告诉他collectionView的contentsize才能滚动
-(CGSize)collectionViewContentSize{
    //那一组多少个
    NSInteger rowcount = [self.collectionView numberOfItemsInSection:0];
    CGSize size;
    size.width = self.collectionView.frame.size.width;
    CGFloat height =(rowcount + 2)/3 *self.collectionView.frame.size.width * 0.5 ;
    size.height = height;
    return size;
}

/**
 返回每一个cell的布局属性
 要是切换布局的话这个方法必须实现,否则报错
 不切换可以不实现
 */
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
    return self.attriArray[indexPath.item];
}
@end

环形布局
代码如下:

//注意:这里不需要滚动,因此不用重写:-(CGSize)collectionViewContentSize
#import "ZHCircleLayout.h"
@interface ZHCircleLayout()
@property (nonatomic,strong) NSMutableArray *attriArray;
@end
@implementation ZHCircleLayout
-(NSMutableArray *)attriArray{
    if (_attriArray == nil) {
        _attriArray = [NSMutableArray array];
    }
    return _attriArray ;
}
-(void)prepareLayout{
    [super prepareLayout];
    //计算出所有cell的UICollectionViewLayoutAttributes
    [self.attriArray removeAllObjects];
    //那一组多少个
    NSInteger rowcount = [self.collectionView numberOfItemsInSection:0];
    //假设分布在半径100的圆上
    CGFloat radus = 100;
    //圆心的x,y
    CGFloat ocenterx = self.collectionView.frame.size.width * 0.5;
    CGFloat ocentery = self.collectionView.frame.size.height * 0.5;
    
    for (int i = 0 ; i *)layoutAttributesForElementsInRect:(CGRect)rect{
    return self.attriArray;
}
/**
 返回每一个cell的布局属性
 要是切换布局的话这个方法必须实现,否则报错
 不切换可以不实现
 */
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
    return self.attriArray[indexPath.item];
}
@end

效果图如下:

1.gif