最近研究了UICollectionview。UICollectionview是ios6新增的一款UI控件。它是一个网格控制器。类似于UITableview控件。UICollectionView 继承了UIScrollView,具有UIScrollView的功能。UIScrollView中封装了UITableview cell的单元格控件。UICollectionview可以默认的进行对单元格的滑动。
我们可以通过代码或者在故事版中创建UICollectionview。我习惯用故事版来创建UICollectionview。通过事件检查器我们可以发现UICollectionview的布局方式有两种一种是Flow一种是CUstomer。如果选择了Flow类型的话,就使用UIcollectionViewFlowLayout布局对象。如果选择Customer的话就会使用自定义的UICollectionViewLayout.
本文主要说的是Flow布局模式
UIcollectionview采用的是流的布局模式管理cell单元格。要么纵向排列要么横向排列。其效果就是一个网格。
在检查器中我们可以看到以下属性
1.Scroll Direction
这个属性主要是用于设置控件的滚动方向。支持Vertical和Horizontal两个属性值。选择了custom的话,该属性便不会出现。
2.Accessories
该属性是否显示UIcollectionview分区的页眉或页脚。
UIcollectionview同样会采用Section来管理多个单元格。同样使用NSIndexPath来封装单元格的位置信息。此方式与UITableview相似。
使用UIcollectionview主要是实现两个协议中的特定的方法。
我们要在。h文件中要使用者两个协议
@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate>
@property(strong,nonatomic)NSMutableArray * _contentArray;//我们这里声明一个存的变量名称
end
在。m文件里我们就要实现方法了。我主要是采用图片形式来描述
<div> </div><div>-(void)setUpCollection{
NSArray * mainDishImages=[NSArray arrayWithObjects:"图片名字" nil];
NSArray *drinkDessertImages=[NSArray arrayWithObjects:@“图片名字”, nil];</div><div>//这里主要用来表示不同的Section简单的定义此方法在viewDidLoad里调用。我习惯性在viewDidload方法中精简代码,使代码分开显示。
_imageArray=[NSArray arrayWithObjects:mainDishImages,drinkDessertImages, nil];
self.mycollectionview.delegate=self;
self.mycollectionview.dataSource=self;
</div><div> }</div><div> </div>
//这里表示有多少items
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return[[_imageArray objectAtIndex:section]count];
}
//这里主要表示有多少section
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{ return [_imageArray count]; }
/展示的内容 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ static NSString * indentifity=@"Cell"; UICollectionViewCell * cell=(UICollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:indentifity forIndexPath:indexPath];//这里的Image主要是因为我们在故事版中引入了线的图片,这里我们展现出来的是四个,要求是我们展现第一个图片的线,这样有延展性 UIImageView * line=(UIImageView *)[cell viewWithTag:108];//这里就是根据我们屏幕显示的cell来获取第一个,让线显示与隐藏,屏幕显示的cell是根据cell的宽度显示的。 if (indexPath.row%4==0) { line.hidden=NO; }else{ line.hidden=YES; }//这里给我们的图片赋值 UIImageView * imageView=(UIImageView *)[cell viewWithTag:100]; imageView.image=[UIImage imageNamed:[_imageArray[indexPath.section]objectAtIndex:indexPath.row]]; return cell; }
页眉我们可以在故事版中设置模板的这里我们设置了一个UILable
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{ if (kind==UICollectionElementKindSectionHeader) { UICollectionReusableView* headViews=[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath]; NSString * title=[[NSString alloc]initWithFormat:@"本周"]; headViews.title.text=title; } return headViews; }
这样我们就做好了