UI第十九节——UICollectionView

UICollectionView其实就是UITableView的升级版，在布局方面比UITableView更出色。下面，先看代码吧

#import "RootViewController.h"
#import "CollectionViewImageCell.h"
#import "CollectionViewImageXibCell.h"

#define SCREEN_BOUNDS ([[UIScreen mainScreen] bounds])
#define SCREEN_WIDTH (SCREEN_BOUNDS.size.width)
#define SCREEN_HIEGHT (SCREEN_BOUNDS.size.height)

#define kCollectionViewCellReuseID @"kCollectionViewCellReuseID"

@interface RootViewController () <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>

@property (nonatomic, strong) UICollectionView  *collectionView;

@end

@implementation RootViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self createCollectionView];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - Helper Methods

- (void)createCollectionView
{
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    
    _collectionView = [[UICollectionView alloc] initWithFrame:SCREEN_BOUNDS collectionViewLayout:flowLayout];
    _collectionView.dataSource = self;
    _collectionView.delegate = self;
    _collectionView.backgroundColor = [UIColor clearColor];
    

    // 注册的Cell要改成我们自定义的Cell
    [_collectionView registerClass:[CollectionViewImageCell class] forCellWithReuseIdentifier:kCollectionViewCellReuseID];

    [self.view addSubview:_collectionView];
}

#pragma mark - UICollectionViewDataSource

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

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 复用的时候，Cell的类型改成我们自己的Cell
    CollectionViewImageXibCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kCollectionViewCellReuseID forIndexPath:indexPath];
    
    // imageNamed，这个方法会把加载进来的Image缓存在内存中
    // imageWithContentsOfFile 用来加载大图片，不会缓存到内存中
    // imageWithData    这个方法也不会缓存到内存中
    
    NSString *imageName = [NSString stringWithFormat:@"%ld", indexPath.item+1];
    
    // 找到项目中的资源的Path
    NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageName ofType:@"jpg"];
    
    cell.imageView.image = [UIImage imageWithContentsOfFile:imagePath];
    cell.titleLabel.text = @"Test Title";
    
    return cell;
}

#pragma mark - UICollectionViewDelegateFlowLayout

// sizeForItemAtIndexPath Item的Size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGFloat width = (SCREEN_WIDTH-60)/2.0f;
    CGFloat height = width / 0.618;
    return CGSizeMake(width, height);
}

// 水平间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 20;
}

// 垂直间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 20;
}

// Section边距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(20, 20, 20, 20);
}

看一下CollectionViewImageCell的代码

#import <UIKit/UIKit.h>

@interface CollectionViewImageCell : UICollectionViewCell

@property (nonatomic, strong) UIImageView   *imageView;
@property (nonatomic, strong) UILabel       *titleLabel;

@end

#import "CollectionViewImageCell.h"

@implementation CollectionViewImageCell

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        
        // image
        _imageView = [[UIImageView alloc] initWithFrame:self.bounds];
        
        // 让_imageView的宽和高随着父视图的改变而改变
        _imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        _imageView.contentMode = UIViewContentModeScaleAspectFill;
        
        // 切掉超出Bounds的内容
        _imageView.clipsToBounds = YES;
        [self addSubview:_imageView];
        
        // title
        _titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, frame.size.height-21, frame.size.width, 21)];
        _titleLabel.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth;
        _titleLabel.textAlignment = NSTextAlignmentCenter;
        _titleLabel.textColor = [UIColor whiteColor];
        _titleLabel.backgroundColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:0.6];
        [self addSubview:_titleLabel];
    }
    
    return self;
}

@end