iOS中 UICollectionView UI_19

来源:转载

UICollectionView 是UITableView加强版

UITableView 和UICollectionView的设计思想:

1.布局:

UITableView 的布局可以由UITableView本身和UITableViewDelegate完成

UICollectionView的布局由UICollectionLayout的子类UICollectionFlowLayout和UICollectionLayoutDelegate完成

 

2.布局样式

UITableView单列多行

UICollectionView支持多行多列

 

3.数据源:

UITableView的数据源是UITableViewDataSource

UICollectionView的数据源是UICollectionViewDataSource

 

4.cell的样式

UITableViewCell 系统提供的有四种样式

UICollectionViewCell 只自带contentView,但是contentView什么也没有,所有你要显示图片,文字必须要自定义cell

 

5.cell的重用

UITableViewCell 和 UICollectionCell 都可以重用;先注册后重用

 

6.页眉页脚

UITableView 的页眉页脚不可以重用,但是 UICollectionView的页眉页脚是可以重用的

 

7.编辑

UITableView 支持编辑,添加、删除和移动

UICollectionView 不支持编辑

 

8.父类

UITableView 和 UICollectionView 的父类都是UIScrollView

但是UITableView 只能竖直方向滚动,而UICollectionView支持竖直方向和水平方向滚动

——————————————————————————————————————————

 

AppDelegate.m

 

 self.window.rootViewController = [[[UINavigationController alloc]initWithRootViewController:[RootViewController new]]autorelease];

 

=======================UICollectionView系统自带的cell============================

 

RootViewController.m

 

#import RootViewController.h#import DetailViewController.h#define kItem @item#define kHead @heaad#define kFooter @[email protected] RootViewController ()//遵循协议@end
- (void)viewDidLoad { [super viewDidLoad]; self.title = @集合视图; self.view.backgroundColor = [UIColor whiteColor]; //调用CollectionView的布局方法 [self configureCollectionView];}

 

CollectionView的布局方法:

 

- (void)configureCollectionView{// UICollectionViewLayout 是所有布局类的基类,是一个抽象的类,一般很少直接使用基类(不是视图),都是使用基类的子类,所有 UICollectionView 的布局我们要使用 UICollectionViewFlowLayout 完成 UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init]; //1.设置Item的大小 flowLayout.itemSize = CGSizeMake(130, 150); //2.设置Item的缩进量 flowLayout.sectionInset = UIEdgeInsetsMake(5, 10, 5, 10); //3.设置最小行间距 flowLayout.minimumLineSpacing = 20.0; //4.设置Item列间距 flowLayout.minimumInteritemSpacing = 20.0; //5.设置CollectionView滚动方向// flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal; //水平滚动// flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical; //默认竖直方向滚动 //6.设置页眉的大小 flowLayout.headerReferenceSize = CGSizeMake(320, 40); //7.设置页脚的大小 flowLayout.footerReferenceSize = CGSizeMake(320, 40); //创建一个UICollectionView对象 UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout]; //配置collectionView的背景颜色 collectionView.backgroundColor = [UIColor greenColor]; //指定数据源代理 collectionView.dataSource = self; //注册Cell [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:kItem]; //注册页眉和页脚 //第一个参数:重用视图的类 //第二个参数:重用是页眉和页脚的种类 //第三个参数:重用的标识 [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHead]; //注册页脚 [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFooter]; //设置业务代理 collectionView.delegate = self; //将collectionView添加到视图控制器上 [self.view addSubview:collectionView]; [flowLayout release]; [collectionView release]; }

 

 

#pragma mark CollectionView 的数据源代理方法

//返回每个分区Item的个数- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ return 20;}//根据indexPath 返回cell- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kItem forIndexPath:indexPath]; //设置cell的颜色 cell.backgroundColor = [UIColor redColor]; NSLog(@%@,NSStringFromCGRect(cell.frame)); return cell; }//返回collectionView分区的个数- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{ return 2;}//返回重用的页眉页脚的方法- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{ UICollectionReusableView *view = nil; //根据种类判断要使用页眉还是页脚 if ([kind isEqualToString:UICollectionElementKindSectionHeader]) { //重用页眉 view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHead forIndexPath:indexPath]; //设置页眉的颜色 view.backgroundColor = [UIColor orangeColor]; }else{ //重用页脚 view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFooter forIndexPath:indexPath]; //设置页脚颜色 view.backgroundColor = [UIColor blackColor]; } return view;}

#pragma mark CollectionView 的业务代理方法:

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{ //打印item的分区下标和item下标 NSLog( @%ld--%ld,indexPath.section,indexPath.item); [self.navigationController pushViewController:[DetailViewController new] animated:YES];}

#pragma mark UICollectionViewFlowLayoutDelegate 的方法

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{ if (0 == indexPath.section % 2) { return CGSizeMake(50, 50); }else{ return CGSizeMake(130,130); } }//返回分区缩进量- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{ if (0 == section % 2) { return UIEdgeInsetsMake(10, 10, 10, 10); }else{ return UIEdgeInsetsMake(20, 20, 20, 20); } }//返回每一行item之间的最小间距- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{ return 30; }//返回item之间的最小列间距- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{ return 20;}//返回页眉的大小- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{ return CGSizeMake(320,100);}//返回页脚的大小- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{ return CGSizeMake(320, 100); }

 

 

===========================学习自定义的cell==================================

新建一个页面在这里学习自定义cell、自定义页眉和页脚:

DetailViewController.m

 

#import NBViewCell.h#import HeaderView.h#import FooterView.h#define kNBcell @nb-cell#define kHeadView @head#define kFootView @[email protected] DetailViewController ()//遵循协议@end

- (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor orangeColor]; //调用配置CollectionView [self configureCollectionView];}

 

 

配置CollectionView:

//配置CollectionView- (void)configureCollectionView{ //创建布局类 UICollectionViewFlowLayout *flowout = [[UICollectionViewFlowLayout alloc]init]; //设置item的大小 flowout.itemSize = CGSizeMake(90, 90); //设置页眉的大小 flowout.headerReferenceSize =CGSizeMake(320, 100); //设置页脚的大小 flowout.footerReferenceSize = CGSizeMake(320, 80); //设置分区缩进量 flowout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5); //创建CollectionView对象 UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowout]; //配置数据源代理 collectionView.dataSource = self; //注册cell [collectionView registerClass:[NBViewCell class] forCellWithReuseIdentifier:kNBcell]; //注册页眉 [collectionView registerClass:[HeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHeadView]; //注册页脚 [collectionView registerClass:[FooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFootView]; //配置背景颜色 collectionView.backgroundColor = [UIColor whiteColor]; //添加到父视图 [self.view addSubview:collectionView]; [collectionView release]; [flowout release];}

#pragma mark 数据源代理方法:

 

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ return 100;}//- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ NBViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kNBcell forIndexPath:indexPath]; cell.label.text = [NSString stringWithFormat:@%ld--%ld,indexPath.section,indexPath.item]; return cell; }- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{ return 2;}- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{ //重用页眉 if ([kind isEqualToString:UICollectionElementKindSectionHeader]) { HeaderView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHeadView forIndexPath:indexPath]; view.photoView.image = [UIImage imageNamed:@2]; return view; }else{ //重用页脚 FooterView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFootView forIndexPath:indexPath]; view.footerLabel.text = [NSString stringWithFormat:@第%ld个分区,indexPath.section]; return view; } }

准备一个自定义cell:

 

 

NBViewCell.h

@interface NBViewCell : [email protected](nonatomic,retain)UILabel *label;@end
NBViewCell.m
@implementation NBViewCell- (void)dealloc{ self.label = nil; [super dealloc ];}//重写初始化方法- (id)initWithFrame:(CGRect)frame{ if (self = [super initWithFrame:frame]) { [self.contentView addSubview:self.label]; } return self;}- (UILabel *)label{ if (_label == nil) { self.label = [[UILabel alloc]initWithFrame:self.bounds]; self.label.textAlignment = NSTextAlignmentCenter; self.label.backgroundColor = [UIColor cyanColor]; } return [[_label retain]autorelease];}@end

准备一个自定义页眉:

实现页眉显示图片

 

HeaderView.h

 

@interface HeaderView : [email protected](nonatomic,retain)UIImageView *photoView;@end
HeaderView.m
@implementation HeaderView- (void)dealloc{ self.photoView = nil; [super dealloc];}- (instancetype)initWithFrame:(CGRect)frame{ if (self = [super initWithFrame:frame]) { [self addSubview:self.photoView]; } return self;}- (UIImageView *)photoView{ if (_photoView == nil) { self.photoView = [[UIImageView alloc]initWithFrame:self.bounds];// self.photoView.image = [UIImage imageNamed:@a.jpg]; self.photoView.backgroundColor = [UIColor yellowColor]; } return [[_photoView retain]autorelease]; }@end
准备一个自定义页脚:

 

实现页脚显示分区

FooterView.h

@interface FooterView : [email protected](nonatomic,retain)UILabel *footerLabel;@end
FooterView.m
@implementation FooterView- (void)dealloc{ self.footerLabel = nil; [super dealloc];}- (instancetype)initWithFrame:(CGRect)frame{ if (self = [super initWithFrame:frame]) { [self addSubview:self.footerLabel]; } return self;}- (UILabel *)footerLabel{ if (_footerLabel == nil) { self.footerLabel = [[UILabel alloc]initWithFrame:self.bounds]; self.footerLabel.backgroundColor = [UIColor redColor]; } return [[_footerLabel retain]autorelease];}@end
页眉图片:

 

最终效果:

 

 



分享给朋友:
您可能感兴趣的文章:
随机阅读: