UICollection的使用

2016/04/04 23:53
阅读数 5

使用瀑布样式列表,即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









展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部