UICollectionView相关

#import "ZFNewVersionViewController.h"

@interface ZFNewVersionViewController ()

@end

@implementation ZFNewVersionViewController

static NSString *cellId = @"cell";

- (instancetype)init
{
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
    /**
     @property (nonatomic) CGFloat minimumLineSpacing;
     @property (nonatomic) CGFloat minimumInteritemSpacing;
     @property (nonatomic) CGSize itemSize;
     @property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0); // defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -preferredLayoutAttributesFittingAttributes:
     @property (nonatomic) UICollectionViewScrollDirection scrollDirection; // default is UICollectionViewScrollDirectionVertical
     @property (nonatomic) CGSize headerReferenceSize;
     @property (nonatomic) CGSize footerReferenceSize;
     @property (nonatomic) UIEdgeInsets sectionInset;

     // Set these properties to YES to get headers that pin to the top of the screen and footers that pin to the bottom while scrolling (similar to UITableView).
     @property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
     @property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
     */
    layout.itemSize = CGSizeMake(100, 100);
    layout.minimumLineSpacing = 1.0;
    layout.minimumInteritemSpacing = 1.0;

    /*
     UICollectionViewScrollDirectionVertical,
     UICollectionViewScrollDirectionHorizontal
     */
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    return [super initWithCollectionViewLayout:layout];
}

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.frame = [UIScreen mainScreen].bounds;
    self.collectionView.backgroundColor = [UIColor redColor];

    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellId];
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 100;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellId forIndexPath:indexPath];

    if(cell == nil)
    {
        cell = [[UICollectionViewCell alloc]init];
    }
    cell.backgroundColor = [UIColor blueColor];
    return cell;
}

@end

如何通过代码创建一个CollectionView

先创建一个Collection的Cell

CollectionViewCell.h

#import <UIKit/UIKit.h>

@interface CollectionViewCell : UICollectionViewCell

@property(nonatomic ,strong)UIImageView *imgView;
@property(nonatomic ,strong)UILabel *text;
@property(nonatomic ,strong)UIButton *btn;

@end

CollectionViewCell.m

#import "CollectionViewCell.h"

@implementation CollectionViewCell

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.backgroundColor = [UIColor purpleColor];

        self.imgView = [[UIImageView alloc]initWithFrame:CGRectMake(5, 5, CGRectGetWidth(self.frame)-10, CGRectGetWidth(self.frame)-10)];
        self.imgView.backgroundColor = [UIColor groupTableViewBackgroundColor];
        [self addSubview:self.imgView];

        self.text = [[UILabel alloc]initWithFrame:CGRectMake(5, CGRectGetMaxY(self.imgView.frame), CGRectGetWidth(self.frame)-10, 20)];
        self.text.backgroundColor = [UIColor brownColor];
        self.text.textAlignment = NSTextAlignmentCenter;
        [self addSubview:self.text];

        self.btn = [UIButton buttonWithType:UIButtonTypeCustom];
        self.btn.frame = CGRectMake(5, CGRectGetMaxY(self.text.frame), CGRectGetWidth(self.frame)-10,30);
        [self.btn setTitle:@"按钮" forState:UIControlStateNormal];
        self.btn.backgroundColor = [UIColor orangeColor];
        [self addSubview:self.btn];
    }
    return self;
}

@end

ViewController.h

#import <UIKit/UIKit.h>
#import "AdvertisingColumn.h"//头部滚动的，不需要可以去掉

@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate>{
    AdvertisingColumn *_headerView; //广告栏
    NSMutableArray *_cellArray;     //collectionView数据
}

@property (nonatomic, strong) UICollectionView *collectionView;

@end

ViewController.m

#import "ViewController.h"
#import "CollectionViewCell.h"

#define fDeviceWidth ([UIScreen mainScreen].bounds.size.width)
#define fDeviceHeight ([UIScreen mainScreen].bounds.size.height)
static float AD_height = 150;//广告栏高度

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    //导航栏背景颜色
    [self.navigationController.navigationBar setBarTintColor:[UIColor orangeColor]];
    [self.navigationController.navigationBar setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor blackColor],NSForegroundColorAttributeName,[UIFont boldSystemFontOfSize:20.0f],NSFontAttributeName, nil]];
    self.navigationItem.title = @"自定义collectionView";

    /**
     *  创建collectionView self自动调用setter getter方法
     */
    [self.view addSubview:self.collectionView];

    /**
     *  广告栏
     */
    _headerView = [[AdvertisingColumn alloc]initWithFrame:CGRectMake(5, 5, fDeviceWidth-10, AD_height)];
    _headerView.backgroundColor = [UIColor blackColor];

    /**
     *  加载的数据
     */
    NSArray *imgArray = [NSArray arrayWithObjects:@"cat.png",@"cat.png",@"cat.png",@"cat.png",@"cat.png",@"cat.png", nil];
    [_headerView setArray:imgArray];

    //collectionView数据
    _cellArray = [imgArray mutableCopy];
}

#pragma mark - 创建collectionView并设置代理
- (UICollectionView *)collectionView
{
    if (_collectionView == nil) {

        UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

        flowLayout.headerReferenceSize = CGSizeMake(fDeviceWidth, AD_height+10);//头部大小

        _collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, fDeviceWidth, fDeviceHeight) collectionViewLayout:flowLayout];

        //定义每个UICollectionView 的大小
        flowLayout.itemSize = CGSizeMake((fDeviceWidth-20)/2, (fDeviceWidth-20)/2+50);
        //定义每个UICollectionView 横向的间距
        flowLayout.minimumLineSpacing = 5;
        //定义每个UICollectionView 纵向的间距
        flowLayout.minimumInteritemSpacing = 0;
        //定义每个UICollectionView 的边距距
        flowLayout.sectionInset = UIEdgeInsetsMake(0, 5, 5, 5);//上左下右

        //注册cell和ReusableView（相当于头部）
        [_collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
        [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"ReusableView"];

        //设置代理
        _collectionView.delegate = self;
        _collectionView.dataSource = self;

        //背景颜色
        _collectionView.backgroundColor = [UIColor whiteColor];
        //自适应大小
        _collectionView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    }
    return _collectionView;
}

#pragma mark - 定时滚动scrollView
-(void)viewDidAppear:(BOOL)animated {//显示窗口
    [super viewDidAppear:animated];
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [_headerView openTimer];//开启定时器
    });
}
-(void)viewWillDisappear:(BOOL)animated {//将要隐藏窗口
    [super viewWillDisappear:animated];
    if (_headerView.totalNum>1) {
        [_headerView closeTimer];//关闭定时器
    }
}
#pragma mark - scrollView也是适用于tableView的cell滚动 将开始和将要结束滚动时调用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    [_headerView closeTimer];//关闭定时器
}
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
    if (_headerView.totalNum>1) {
        [_headerView openTimer];//开启定时器
    }
}

#pragma mark - UICollectionView delegate dataSource
#pragma mark 定义展示的UICollectionViewCell的个数
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return [_cellArray count];
}

#pragma mark 定义展示的Section的个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

#pragma mark 每个UICollectionView展示的内容
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *identify = @"cell";
    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identify forIndexPath:indexPath];
    [cell sizeToFit];

    cell.imgView.image = [UIImage imageNamed:_cellArray[indexPath.item]];
    cell.text.text = [NSString stringWithFormat:@"Cell %ld",indexPath.item];
    //按钮事件就不实现了……
    return cell;
}

#pragma mark 头部显示的内容
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:
                                            UICollectionElementKindSectionHeader withReuseIdentifier:@"ReusableView" forIndexPath:indexPath];

    [headerView addSubview:_headerView];//头部广告栏
    return headerView;
}

#pragma mark UICollectionView被选中时调用的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"选择%ld",indexPath.item);
}

@end

通过XIB加载UICollectionViewCell

[self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([PhotoCollectionCell class])  bundle:nil] forCellWithReuseIdentifier:cellId];

用UICollectionView实现的一个照片墙效果

先定义一个自定义UICollectionViewCell

PhotoCollectionCell.h

#import <UIKit/UIKit.h>

@interface PhotoCollectionCell : UICollectionViewCell

@property (strong,nonatomic)UIImage *image;

@end

PhotoCollectionCell.m

#import "PhotoCollectionCell.h"

@interface PhotoCollectionCell()

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

@end

@implementation PhotoCollectionCell

- (void)awakeFromNib {
    [super awakeFromNib];
    // Initialization code
}

- (void)setImage:(UIImage *)image
{
    _image = image;

    NSLog(@"%@",image);

    self.imageView.image = _image;
}

@end

PhotoCollectionCell.xib

自定义一个UICollectionViewFlowLayout

#import "CustomFlowLayout.h"

@implementation CustomFlowLayout

- (instancetype)init
{
    self = [super init];
    if (self) {

    }
    return self;
}

//collection第一次布局调用，collection刷新的时候也会调用
//作用:计算cell的布局,条件:cell的位置是固定不变
- (void)prepareLayout
{
    [super prepareLayout];


}

// 作用:指定一段区域给你这段区域内cell的尺寸
// 可以一次性返回所有cell尺寸,也可以每隔一个距离返回cell
// UICollectionViewLayoutAttributes 用了确定cell的尺寸
// 拿到UICollectionViewLayoutAttributes相当于拿到cell,可以获得cell的各种属性
/*
 @property (nonatomic) CGRect frame;
 @property (nonatomic) CGPoint center;
 @property (nonatomic) CGSize size;
 @property (nonatomic) CATransform3D transform3D;
 @property (nonatomic) CGRect bounds NS_AVAILABLE_IOS(7_0);
 @property (nonatomic) CGAffineTransform transform NS_AVAILABLE_IOS(7_0);
 @property (nonatomic) CGFloat alpha;
 @property (nonatomic) NSInteger zIndex; // default is 0
 @property (nonatomic, getter=isHidden) BOOL hidden; // As an optimization, UICollectionView might not create a view for items whose hidden attribute is YES
 @property (nonatomic, strong) NSIndexPath *indexPath;

 @property (nonatomic, readonly) UICollectionElementCategory representedElementCategory;
 @property (nonatomic, readonly, nullable) NSString *representedElementKind; // nil when representedElementCategory is UICollectionElementCategoryCell

 + (instancetype)layoutAttributesForCellWithIndexPath:(NSIndexPath *)indexPath;
 + (instancetype)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind withIndexPath:(NSIndexPath *)indexPath;
 + (instancetype)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind withIndexPath:(NSIndexPath *)indexPath;

 */
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    // 设置cell尺寸 => UICollectionViewLayoutAttributes
    // 越靠近中心点,距离越小,缩放越大
    // 求cell与中心点距离

    // 1.获取当前显示cell的布局
    NSArray *attrs = [super layoutAttributesForElementsInRect:self.collectionView.bounds];

    for (UICollectionViewLayoutAttributes *attr in attrs) {

        // 2.计算中心点距离
        CGFloat delta = fabs((attr.center.x - self.collectionView.contentOffset.x) - self.collectionView.bounds.size.width * 0.5);

        // 3.计算比例
        CGFloat scale = 1 - delta / (self.collectionView.bounds.size.width * 0.5) * 0.25;

        attr.transform = CGAffineTransformMakeScale(scale, scale);
    }

    return attrs;


    return attrs;
}

// Invalidate:刷新
// 在滚动的时候是否允许刷新布局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

// 什么时候调用:用户手指一松开就会调用
// 作用:确定最终偏移量
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    // 拖动比较快 最终偏移量 不等于 手指离开时偏移量

    // 最终偏移量
    CGPoint targetFinalP = [super targetContentOffsetForProposedContentOffset:proposedContentOffset withScrollingVelocity:velocity];

    CGPoint targetP = self.collectionView.contentOffset;

    // 获取collectionView偏移量
    NSLog(@"%@ %@",NSStringFromCGPoint(targetFinalP),NSStringFromCGPoint(targetP));

    CGRect targetRect = CGRectMake(targetP.x, 0, self.collectionView.bounds.size.width, MAXFLOAT);

    NSArray *attrs = [super layoutAttributesForElementsInRect:targetRect];

    CGFloat minDelta = MAXFLOAT;
    for(UICollectionViewLayoutAttributes *attr in attrs)
    {
        CGFloat delta = (attr.center.x - self.collectionView.contentOffset.x) - self.collectionView.bounds.size.width * 0.5;
        if(fabs(delta) < fabs(minDelta))
        {
            minDelta = delta;
        }
    }

    NSLog(@"minDelta:%f",minDelta);
    targetP.x += minDelta;

    if(targetP.x < 0)targetP.x = 0;

    return targetP;
}

// 计算collectionView滚动范围
- (CGSize)collectionViewContentSize
{
    return [super collectionViewContentSize];
}

@end

ViewController.m

#import "ViewController.h"
#import "PhotoCollectionCell.h"
#import "CustomFlowLayout.h"

#define SCREENW [UIScreen mainScreen].bounds.size.width

@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>

@property(nonatomic,strong)UICollectionView *collectionView;
@property(nonatomic,strong)CustomFlowLayout *layout;

@end

@implementation ViewController

static NSString *cellId = @"cell";

- (void)viewDidLoad {
    [super viewDidLoad];

    [self setupCollectionView];
}

#pragma mark - 创建流水布局

- (CustomFlowLayout *)layout
{
    if(_layout == nil)
    {
        _layout = [[CustomFlowLayout alloc]init];
        _layout.itemSize = CGSizeMake(150, 150);
        _layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        _layout.minimumLineSpacing = 50;
        CGFloat margin = (SCREENW - 150) * 0.5;
        _layout.sectionInset = UIEdgeInsetsMake(0, margin, 0, margin);
    }
    return _layout;
}

#pragma mark - 创建UICollectionView

- (void)setupCollectionView
{
    self.collectionView = [[UICollectionView alloc]initWithFrame:CGRectZero collectionViewLayout:self.layout];
    self.collectionView.backgroundColor = [UIColor lightGrayColor];
    self.collectionView.center = self.view.center;
    self.collectionView.bounds = CGRectMake(0, 0, SCREENW, 200);
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    self.collectionView.showsHorizontalScrollIndicator = NO;
    [self.view addSubview:self.collectionView];

    [self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([PhotoCollectionCell class])  bundle:nil] forCellWithReuseIdentifier:cellId];
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 25;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    PhotoCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellId forIndexPath:indexPath];

    //cell.backgroundColor = [UIColor redColor];
    NSString *imageName = [NSString stringWithFormat:@"image%ld",indexPath.item];
    cell.image = [UIImage imageNamed:imageName];

    return cell;
}

@end