初始化部分：
private lazy var mCollectionView: UICollectionView = {
var flowLayout = UICollectionViewFlowLayout()
let collectionView = UICollectionView(frame: UIScreen.mainScreen().bounds, collectionViewLayout: flowLayout)
collectionView.backgroundColor = UIColor.clearColor()
collectionView.alwaysBounceVertical = true
collectionView.dataSource = self
collectionView.delegate = self
collectionView.showsHorizontalScrollIndicator = false
collectionView.showsVerticalScrollIndicator = false
collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: String(UICollectionViewCell))
return collectionView
}()
UICollectionViewLayout
UICollectionViewLayout决定了UICollectionView如何显示在界面上，Apple提供了一个最简单的默认layout对象：UICollectionViewFlowLayout。
Flow Layout是一个Cells的线性布局方案，并具有页面和页脚。其可定制的内容如下：
itemSize属性
设定全局的Cell尺寸，如果想要单独定义某个Cell的尺寸，可以使用下面方法：
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, sizeForItemAtIndexPath indexPath:NSIndexPath) -> CGSize
minimumLineSpacing属性
设定全局的行间距，如果想要设定指定区内Cell的最小行距，可以使用下面方法：
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section:Int) -> CGFloat
minimumInteritemSpacing属性
设定全局的Cell间距，如果想要设定指定区内Cell的最小间距，可以使用下面方法：
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section:Int) -> CGFloat
scrollDirection属性
设定滚动方向，有UICollectionViewScrollDirectionVertical和UICollectionViewScrollDirectionHorizontal两个值。
headerReferenceSize属性与footerReferenceSize属性
设定页眉和页脚的全局尺寸，需要注意的是，根据滚动方向不同，header和footer的width和height中只有一个会起作用。如果要单独设置指定区内的页面和页脚尺寸，可以使用下面方法：
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, referenceSizeForHeaderInSection section:Int) -> CGSize
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, referenceSizeForFooterInSection section:Int) -> CGSize
sectionInset属性
设定全局的区内边距，如果想要设定指定区的内边距，可以使用下面方法：
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, insetForSectionAtIndex section:Int) -> UIEdgeInsets
然后需要实现三种类型的委托：UICollectionViewDataSource, UICollectionViewDelagate和UICollectionViewDelegateFlowLayout。
@interface ViewController : UIViewController <UICollectionViewDelegateFlowLayout, UICollectionViewDataSource>
因为UICollectionViewDelegateFlowLayout实际上是UICollectionViewDelegate的一个子协议，它继承了UICollectionViewDelegate，所以只需要在声明处写上UICollectionViewDelegateFlowLayout就行了。
UICollectionViewDataSource
func numberOfSectionsInCollectionView(collectionView:UICollectionView) -> Int
返回collection view里区(section)的个数，如果没有实现该方法，将默认返回1：
func numberOfSectionsInCollectionView(collectionView:UICollectionView) -> Int
{
return2
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
返回指定区(section)包含的数据源条目数(number of items)，该方法必须实现：
func collectionView(collectionView:UICollectionView, numberOfItemsInSection section:Int) -> Int
{
return 7
}
func collectionView(collectionView:UICollectionView, cellForItemAtIndexPath indexPath:NSIndexPath) -> UICollectionViewCell
返回某个indexPath对应的cell，该方法必须实现：
func collectionView(collectionView:UICollectionView, cellForItemAtIndexPath indexPath:NSIndexPath) -> UICollectionViewCell
{
let section = indexPath.section
let item = indexPath.item
switch section {
caseIDX_SUBSRIBE:
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(String(MySubscribeCell1), forIndexPath: indexPath) as! MySubscribeCell1
cell.setModel()
return cell
caseIDX_ITEM:
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(String(MySubscribeCell2), forIndexPath: indexPath) as! MySubscribeCell2
cell.setModel()
return cell
default:
returnUICollectionViewCell()
}
}
}
UICollectionViewCell结构上相对比较简单，由下至上：
- 首先是cell本身作为容器view
- 然后是一个大小自动适应整个cell的backgroundView，用作cell平时的背景
- 再其次是selectedBackgroundView，是cell被选中时的背景
- 最后是一个contentView，自定义内容应被加在这个view上
func collectionView(collectionView:UICollectionView, viewForSupplementaryElementOfKind kind:String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView
为collection view添加一个补充视图(页眉或页脚)
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, referenceSizeForHeaderInSection section:Int) -> CGSize
设定页眉的尺寸
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, referenceSizeForFooterInSection section:Int) -> CGSize
设定页脚的尺寸
collectionView.registerClass(viewClass., forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier:identifier)
添加页眉和页脚以前需要注册类和标识：
添加补充视图的代码示例：
collectionView.registerClass(MyHeadCell.self, forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier:String(MyHeadCell))
collectionView. registerClass ( MyFootCell . self , forSupplementaryViewOfKind: UICollectionElementKindSectionFooter , withReuseIdentifier: String ( MyFootCell ))
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, referenceSizeForHeaderInSection section:Int) -> CGSize
{
returnCGSizeMake(width, height)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize
{
return CGSizeMake(width, height)
}
func collectionView(collectionView:UICollectionView, viewForSupplementaryElementOfKind kind:String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
if(kind == UICollectionElementKindSectionHeader) {
let cell = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier:
String(MyHeadCell), forIndexPath: indexPath) as! MyHeadCell
cell.setModel()
return cell
} else if(kind == UICollectionElementKindSectionFooter) {
let cell = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier:
String(MyFooterCell), forIndexPath: indexPath) as! MyFooterCell
cell.setModel()
return cell
}
returnUICollectionReusableView()
}
在注册Cell和补充视图时，也可以用新建xib文件的方式：
UICollectionViewDelegateFlowLayout
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, sizeForItemAtIndexPath indexPath:NSIndexPath) -> CGSize
设定指定Cell的尺寸
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, sizeForItemAtIndexPath indexPath:NSIndexPath) -> CGSiz
{
if(indexPath.section==0 && indexPath.row==1)
{
return CGSizeMake(50,50);
}
else
{
return CGSizeMake(75,30);
}
}
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, insetForSectionAtIndex section:Int) -> UIEdgeInsets
设定collectionView(指定区)的边距
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, insetForSectionAtIndex section:Int) -> UIEdgeInsets
{
if(section==0)
{
return UIEdgeInsetsMake(35,25, 15,25);
}
else
{
return UIEdgeInsetsMake(15,15, 15,15);
}
}
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section:Int) -> CGFloat
设定指定区内Cell的最小行距，也可以直接设置UICollectionViewFlowLayout的minimumLineSpacing属性
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section:Int) -> CGFloat
{
if(section==0)
{
return10.0;
}
else
{
return20.0;
}
}
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section:Int) -> CGFloat
设定指定区内Cell的最小间距，也可以直接设置UICollectionViewFlowLayout的minimumInteritemSpacing属性
func collectionView(collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section:Int) -> CGFloat
{
if(section==0)
{
return10.0
}
else
{
return20.0
}
}
UICollectionViewDelegate
func collectionView(collectionView:UICollectionView, didSelectItemAtIndexPath indexPath:NSIndexPath)
当指定indexPath处的item被选择时触发
func collectionView(collectionView:UICollectionView, didSelectItemAtIndexPath indexPath:NSIndexPath)
{
[self.myArray removeObjectAtIndex:indexPath.row];
[collectionView deleteItemsAtIndexPaths:[NSArray arrayWithObject:indexPath]];
}
P.s. 当你删除或添加元素时，一定要更新numberOfItemsInSection的返回情况。
func collectionView(collectionView:UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath)
当指定indexPath处的item被取消选择时触发，仅在允许多选时被调用
下面是三个和高亮有关的方法：
func collectionView(collectionView:UICollectionView, shouldHighlightItemAtIndexPath indexPath:NSIndexPath) -> Bool
func collectionView(collectionView:UICollectionView, didHighlightItemAtIndexPath indexPath:NSIndexPath)
func collectionView(collectionView:UICollectionView, didUnhighlightItemAtIndexPath indexPath:NSIndexPath)
事件的处理顺序如下：
- 手指按下
- shouldHighlightItemAtIndexPath (如果返回YES则向下执行，否则执行到这里为止)
- didHighlightItemAtIndexPath (高亮)
- 手指松开
- didUnhighlightItemAtIndexPath (取消高亮)
- shouldSelectItemAtIndexPath (如果返回YES则向下执行，否则执行到这里为止)
- didSelectItemAtIndexPath (执行选择事件)
如果只是简单实现点击后cell改变显示状态，只需要在cellForItemAtIndexPath方法里返回cell时，指定cell的selectedBackgroundView：
func collectionView(collectionView:UICollectionView, cellForItemAtIndexPath indexPath:NSIndexPath) -> UICollectionViewCell
{
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(String(MyCell), forIndexPath: indexPath) as! MyCell
let selectedBGView = UIView(frame: frame)
selectedBGView.backgroundColor = UIColoer.blueColor()
cell.selectedBackgroundView = selectedBGView
return cell
}
如果要实现点击时(手指未松开)的显示状态与点击后(手指松开)的显示状态，则需要通过上面提到的方法来实现：
func collectionView(collectionView: UICollectionView, shouldHighlightItemAtIndexPath indexPath: NSIndexPath) -> Bool
{
return ture
}
func collectionView(collectionView: UICollectionView, didHighlightItemAtIndexPath indexPath: NSIndexPath)
{
let cell =collectionView.cellForItemAtIndexPath(indexPath: indexPath)
cell.setBackgroundColor(UIColor.blueColor(0)
}
func collectionView(collectionView: UICollectionView, didUnhighlightItemAtIndexPath indexPath: NSIndexPath)
{
let cell =collectionView.cellForItemAtIndexPath(indexPath: indexPath)
cell.setBackgroundColor(UIColor.yellowColor(0)
}
扫一扫
4171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
