IOS之UIKit_Day13

浏览数：242 / 时间：2015年06月11日

day13

目标：UICollectionViewController集合视图

1.UICollectionViewController的基本使用：

1.1 Code纯代码的方式

a.Cell的简单样式+系统的流式布局

UICollectionViewCell+UICollectionViewFlowLayout

和UITableViewController基本相同实现三问一答，注意一答只能从对列中查找

单元格的冲用可以使用标记：

//从队列中安标是取cell

UICollectionViewCell *cell=[collectionViewdequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];

//设置cell的背景颜色

cell.backgroundColor=[UIColor redColor];

UILabel*lable=(UILabel *)[cell.contentView viewWithTag:1];//注意标记的值 不能为0

if(lable==nil) {

lable=[[UILabel alloc]init];

lable.frame=CGRectMake(0, 0, cell.bounds.size.width,cell.bounds.size.height);

lable.textColor=[UIColor whiteColor];

lable.font=[UIFont boldSystemFontOfSize:26];

lable.textAlignment=UITextAlignmentCenter;

//为lable添加tag标示

lable.tag=1;

[cell.contentView addSubview:lable];

}

lable.text=[NSString stringWithFormat:@"%d",indexPath.row];

returncell;

b.Cell的简单样式+自定义的流式布局

UICollectionViewCell+MyFlowLayout

自定义的流式布局：需要重写类继承自UICollectionViewFlowLayout

并且重写初始化方法：

//布局的自定义

self.itemSize=CGSizeMake(80, 80);//项的大小

self.minimumLineSpacing=10.0;//行间距的大小

self.minimumInteritemSpacing=10.0;//内部项之间的距离

self.scrollDirection=UICollectionViewScrollDirectionHorizontal;//设置水平滚动

//self.scrollDirection=UICollectionViewScrollDirectionVertical;//设置垂直滚动

self.sectionInset=UIEdgeInsetsMake(154, 30, 154, 30);//上左下右

c.自定义Cell+自定义的流式布局

MyCell+MyFlowLayout

自定义cell：需要重写cell继承自UICollectionViewCell

自定义的流式布局：需要重写UICollectionViewFlowLayout

在Cell的类方法中设置Cell的样式

-(id)initWithFrame:(CGRect)frame

{

self =[super initWithFrame:frame];

if (self) {

self.bgImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0,frame.size.width, frame.size.height)];

//设置图片视图为cell的背景视图

self.backgroundView = self.bgImageView;

self.label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0,frame.size.width, frame.size.height)];

self.label.textAlignment = NSTextAlignmentCenter;

self.label.font = [UIFont boldSystemFontOfSize:30];

//将标签添加到cell的内容视图中

[self.contentView addSubview:self.label];

}

return self;

}

1.2 Xib方式：

a、只通过Xib建立

新建视图类继承自UICollectionViewController并勾选Xib 删除自带的Xib视图 新建CollectionView 选择Files Owner把View连线到collectionView，选择collectionView的第六个检查器，把dataSource和Delegate连线到Files Owner

选择第四个检查器 设计collectionView的显示效果

b、cell通过Xib设计自定义流式布局

新建FlowLayout继承自UICollectionViewFlowLayout在a中的Xib文件的第四个检查器中Layout选择Custom Class选择FlowLayout；

在新建的FlowLayout中的-(id)initWithCoder:(NSCoder *)aDecoder{}方法中设计布局

c、自定义Cell自定义流式布局

新建Cell继承于UICollectionViewCell 当前状态下无法勾选Xib，再新建选择interface-选择Empty新建一个Xib名字与继承UICollectionViewCell类的名字相同

在该Xib下拉入一个collectionViewCell 选择第三个检查器 Class选择当前类，在该Xib下实现要设计的显示效果即可。

1.3 StoryBoard方式实现

同Xib方式基本相似

2、使用UICollectionViewController实现复杂的布局

2.1 自定义的复杂的流式布局实现水平波动的缩放

可分为a.、b、c、三种情况

以a纯代码的方式为例：

a、创建MyCollectionViewController继承UICollectionViewController，并设置分区数、每个分区的项数、以及每一项的格式（与UITableViewController相似）

b、创建MyCell继承自UICollectionViewCell，公开一个imageView的接口，在初始化的时候初始化该ImageView的大小，并把ImageView赋给self.backgroundView[可以通过self.contentView.layer.borderWidth=1.0f;设置图片的外边框 self.contentView.layer.borderColor设置外边框的颜色]。

c、创建MyFlowLayout继承UICollectionViewFlowLayout，并在初始化方法（init）中设置self.itemSize的大小、self.scrollDirection设置滑动方向、self.sectionInset =UIEdgeInsetsMake(60, 0, 60, 0)设置item的位置。

关键步骤：在-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{}方法中实现以下几步：

1.得到所有的item

2.创建可视化矩形区域，并求出可视化矩形区域的中心点

3.遍历所有的item

求出每一个item的中心点坐标

计算出两个中心点坐标的差值

判断是否在某一区域{

在就根据差值的大小产生一个ZoomFator缩放因子

对得到的item调用transform3D=CATransform3DMakeScale(zoomFactor,zoomFactor, 1)设置缩放

}

Eg:

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect{