iOS中 UICollectionView UI

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 @"footer"@interface RootViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>//遵循协议@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;}以诚感人者,人亦诚而应。

iOS中 UICollectionView UI

相关文章:

你感兴趣的文章:

标签云: