UICollection的使用

使用瀑布样式列表，即UICollectionView。使用时自定义collectionCell，自定义header，自定义footer。

#import "ViewController.h"

#import "CollectionViewHeader.h"

#import "CollectionViewFooter.h"

#import "CollectionViewCell.h"

#import "CollectionVC.h"

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

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    

    self.title = @"瀑布视图";

    

    [self setUI];

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

- (void)loadView

{

    [super loadView];

    self.view.backgroundColor = [UIColor whiteColor];

}

#pragma mark - 视图

- (void)setUI

{

    // 确定是水平滚动，还是垂直滚动

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

    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];

    

    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];

    collectionView.delegate = self;

    collectionView.dataSource = self;

    collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight;

    [collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:identifierCollectionViewCell];

    collectionView.allowsSelection = YES;

    collectionView.allowsMultipleSelection = NO;

    collectionView.alwaysBounceVertical = YES;

    collectionView.backgroundColor = [UIColor whiteColor];

    

    [collectionView registerClass:[CollectionViewHeader class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:identifierCollectionViewHeader];

    [collectionView registerClass:[CollectionViewFooter class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:identifierCollectionViewFooter];

    

    [self.view addSubview:collectionView];

}

#pragma mark - UICollectionViewDataSource

// 定义展示的Section的个数

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

{

    return 5;

}

// 添加一个补充视图(页眉或页脚)

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

{

    if ([kind isEqual:UICollectionElementKindSectionHeader])

    {

        CollectionViewHeader *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:identifierCollectionViewHeader forIndexPath:indexPath];

        

        headerView.titleLabel.text = [[NSString alloc] initWithFormat:@"%ld Section", indexPath.section];

        

        return headerView;

    }

    else if ([kind isEqual:UICollectionElementKindSectionFooter])

    {

        CollectionViewFooter *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:identifierCollectionViewFooter forIndexPath:indexPath];

        

        footerView.titleLabel.text = [[NSString alloc] initWithFormat:@"%ld Section", indexPath.section];

        

        return footerView;

    }

    

    return nil;

}

// 定义展示的UICollectionViewCell的个数

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

    if (0 == section)

    {

        return 2;

    }

    else if (1 == section)

    {

        return 5;

    }

    else if (2 == section)

    {

        return 1;

    }

    return 10;

}

// 每个UICollectionView展示的内容

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifierCollectionViewCell forIndexPath:indexPath];

    

    NSString *title = [[NSString alloc] initWithFormat:@"%ld个", indexPath.row];

    cell.titlelabel.text = title;

    

    return cell;

}

#pragma mark - UICollectionViewDelegateFlowLayout

// 定义每个UICollectionView 的大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

{

    return CGSizeMake(widthCollectionViewCell, heightCollectionViewCell);

}

// 定义每个UICollectionView 的 margin

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

{

    return UIEdgeInsetsMake(0.0, 10.0, 10.0, 10.0);

}

// 最小行间距

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section

{

    return 10.0;

}

// 最小列间距

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section

{

    return 0.0;

}

// 设定页眉的尺寸

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section

{

    return CGSizeMake(widthCollectionViewHeader, heightCollectionViewHeader);

}

// 设定页脚的尺寸

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section

{

    return CGSizeMake(widthCollectionViewFooter, heightCollectionViewFooter);

}

#pragma mark - UICollectionViewDelegate

// UICollectionView被选中时调用的方法

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

{

    [collectionView deselectItemAtIndexPath:indexPath animated:YES];

}

// 返回这个UICollectionView是否可以被选择

- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath

{

    return YES;

}

自定义UICollectionViewCell

.h文件

#import <UIKit/UIKit.h>

#define widthScreen ([[UIScreen mainScreen] bounds].size.width)

#define widthCollectionViewCell ((widthScreen - 10.0 * 3) / 2)

static CGFloat const heightCollectionViewCell = 100.0;

static NSString *const identifierCollectionViewCell = @"CollectionViewCell";

@interface CollectionViewCell : UICollectionViewCell

@property (nonatomic, strong) UIImageView *imageview;

@property (nonatomic, strong) UILabel *titlelabel;

@property (nonatomic, strong) UILabel *detaillabel;

@end

.m文件

#import "CollectionViewCell.h"

static CGFloat const originXY = 10.0;

static CGFloat const heightImage = 60.0;

static CGFloat const heightLabel = 20.0;

@interface CollectionViewCell ()

@end

@implementation CollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self)

    {

        self.layer.borderWidth = 0.5;

        self.layer.borderColor = [UIColor redColor].CGColor;

        

        [self setUI];

    }

    

    return self;

}

#pragma mark - 视图

- (void)setUI

{

    // 60.0 + 20.0 + 20.0

    self.imageview.frame = CGRectMake(0.0, 0.0, (widthScreen - originXY * 3) / 2, heightImage);

    [self.contentView addSubview:self.imageview];

    

    UIView *currentView = self.imageview;

    

    self.titlelabel.frame = CGRectMake(currentView.frame.origin.x, (currentView.frame.origin.y + currentView.frame.size.height), currentView.frame.size.width, heightLabel);

    [self.contentView addSubview:self.titlelabel];

    

    currentView = self.titlelabel;

    

    self.detaillabel.frame = CGRectMake(currentView.frame.origin.x, (currentView.frame.origin.y + currentView.frame.size.height), currentView.frame.size.width, currentView.frame.size.height);

    [self.contentView addSubview:self.detaillabel];

}

#pragma mark - setter

- (UIImageView *)imageview

{

    if (!_imageview)

    {

        _imageview = [[UIImageView alloc] init];

        _imageview.backgroundColor = [UIColor orangeColor];

    }

    

    return _imageview;

}

- (UILabel *)titlelabel

{

    if (!_titlelabel)

    {

        _titlelabel = [[UILabel alloc] init];

        _titlelabel.backgroundColor = [UIColor greenColor];

        _titlelabel.textAlignment = NSTextAlignmentCenter;

    }

    

    return _titlelabel;

}

- (UILabel *)detaillabel

{

    if (!_detaillabel)

    {

        _detaillabel = [[UILabel alloc] init];

        _detaillabel.backgroundColor = [UIColor brownColor];

    }

    

    return _detaillabel;

}

@end

自定义表头header(UICollectionReusableView)

.h文件

#import <UIKit/UIKit.h>

#define widthScreen ([[UIScreen mainScreen] bounds].size.width)

#define widthCollectionViewHeader (widthScreen)

static CGFloat const heightCollectionViewHeader = 30.0;

static NSString *const identifierCollectionViewHeader = @"CollectionViewHeader";

@interface CollectionViewHeader : UICollectionReusableView

/// 标题标签

@property (nonatomic, strong) UILabel *titleLabel;

@end

.m文件

#import "CollectionViewHeader.h"

@interface CollectionViewHeader ()

@end

@implementation CollectionViewHeader

- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self)

    {

        self.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.3];

        

        [self setUI];

    }

    return self;

}

#pragma mark - 视图

- (void)setUI

{

    self.titleLabel.frame = CGRectMake(10.0, 0.0, (widthCollectionViewHeader - 10.0 * 2), heightCollectionViewHeader);

    [self addSubview:self.titleLabel];

}

#pragma mark - setter

- (UILabel *)titleLabel

{

    if (!_titleLabel)

    {

        _titleLabel = [[UILabel alloc] init];

        _titleLabel.backgroundColor = [UIColor clearColor];

        _titleLabel.textColor = [UIColor blackColor];

        _titleLabel.font = [UIFont systemFontOfSize:16.0];

    }

    

    return _titleLabel;

}

@end

自定义表尾footer（UICollectionReusableView）

.h文件

#import <UIKit/UIKit.h>

#define widthScreen ([[UIScreen mainScreen] bounds].size.width)

#define widthCollectionViewFooter (widthScreen)

static CGFloat const heightCollectionViewFooter = 20.0;

static NSString *const identifierCollectionViewFooter = @"CollectionViewFooter";

@interface CollectionViewFooter : UICollectionReusableView

/// 标题标签

@property (nonatomic, strong) UILabel *titleLabel;

@end

.m文件

#import "CollectionViewFooter.h"

@implementation CollectionViewFooter

- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self)

    {

        self.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.1];

        

        [self setUI];

    }

    return self;

}

#pragma mark - 视图

- (void)setUI

{

    self.titleLabel.frame = CGRectMake(10.0, 0.0, (widthCollectionViewFooter - 10.0 * 2), heightCollectionViewFooter);

    [self addSubview:self.titleLabel];

}

#pragma mark - setter

- (UILabel *)titleLabel

{

    if (!_titleLabel)

    {

        _titleLabel = [[UILabel alloc] init];

        _titleLabel.backgroundColor = [UIColor clearColor];

        _titleLabel.textColor = [UIColor redColor];

        _titleLabel.font = [UIFont systemFontOfSize:10.0];

    }

    

    return _titleLabel;

}

@end

转载于:https://my.oschina.net/potato512/blog/647701