UICollectionView的使用

来源：互联网发布：淘宝售后在哪里查看编辑：程序博客网时间：2024/05/21 17:50

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

UICollectionView是继承scrollview的子类，功能与UITableView相似

区别在于如下（使用注意事项）：

1、实例化时，多一个设置滚动方向的属性

2、多一个设置UI视图布局的代理协议，以及相关的代理方法

3、每个section中的每个row可以显示多个item

4、一般使用时，使用自定义的UICollectionViewCell视图、UICollectionReusableView页眉、UICollectionReusableView页脚视图（因为系统自带的没有相关字符及图标等的设置方法）

[objc] view plain copy
 
#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

[objc] view plain copy
 
.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)

[objc] view plain copy
 
.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）

[objc] view plain copy
 
.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  

0 0