标签：
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{
//得到每一个item放入集合
NSArray*array = [super layoutAttributesForElementsInRect:rect];
//创建可视化的矩形区域
CGRectvisiabelRect = CGRectZero;//初始化为0
visiabelRect.origin = self.collectionView.contentOffset;//滑动的坐标
visiabelRect.size = self.collectionView.bounds.size;//bounds=frame
//可视化矩形区域的中心点x
CGFloatvisiableRectCenterX = CGRectGetMidX(visiabelRect);
//依次获取系统指定的矩形区域中的每一个item
//的中心点坐标
//将可视化区域的中心点与item的中心点进行
//比对，根据两个中心点的距离产生一个变化的
//比率，并将该比率作为item的缩放比率即可
for(UICollectionViewLayoutAttributes *attributes in array) {
//获取每一个item的中心点
CGFloat itemCenterX =attributes.center.x;
//计算两个中心点的距离
CGFloatdistance = visiableRectCenterX - itemCenterX;
//设定两个中心点的距离在200以内时
//才针对item做放大缩小的操作
if(ABS(distance) < 200) {
//根据distance的大小产生一个变化的zoomFator缩放因子
CGFloat zoomFactor = 1 + 0.5*(1-ABS(distance/200.0));
attributes.transform3D = CATransform3DMakeScale(zoomFactor, zoomFactor,1);
}
}
returnarray;
}
//当滑动改变时重新确定坐标
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
return YES;
}
2.2、自定义的不规则布局
.......Tomower...Duang......Duang.....
补充：
1.frame描述的视图在父视图中的位置以及大小所占区域
2.bounds描述的视图本身的大小
3.屏幕：3.4 宽320 高480
屏幕：4.0 宽320 高568
标签：
原文地址：http://www.cnblogs.com/katydid/p/4304576.html
