一swift之UICollectionView纯代码cell的复用、footerView的添加

序言

在项目开发中，第一次正式使用swift写UICollectionView，遇到了一些问题，于此想记录下来，以备后续回顾，也希望此记录对一些初学者有帮助。

---

本文完全是在一个UIViewController中创建的，使用系统的UICollectionView和UICollectionViewCell，并没有使用Storyboard或Xib， 也没有子类化UICollectionViewCell。

最终想要的效果

滑到底部有 footerView：

全文 Code

import UIKit class WorksViewController: BaseViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout { var itemID = "itemID" //footerView必须的标识符" let reusedId = "PublishPhotoEditHeaderView" var footerView = UICollectionReusableView() let cellWidth = WidthScreen / 2 let cellHeight = UIScale(11) + UIScale(171) + UIScale(49) var axisX: CGFloat = 0.0 var imageArray = [String]() override func viewWillAppear(animated: Bool) { super.viewWillAppear(true) navigationController?.navigationBar.hidden = true tabBarController?.tabBar.hidden = true } override func viewWillDisappear(animated: Bool) { super.viewWillDisappear(true) navigationController?.navigationBar.hidden = false } override func viewDidLoad() { super.viewDidLoad() imageArray = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"] let fakeViewHeight = HeightScreen / 4 let fakeView = UIView(frame: CGRect(x: 0, y: 0, width: WidthScreen, height: fakeViewHeight)) fakeView.backgroundColor = UIColor.orangeColor() view.addSubview(fakeView) let flowLayout = UICollectionViewFlowLayout() flowLayout.minimumLineSpacing = 0 flowLayout.minimumInteritemSpacing = 0 flowLayout.itemSize = CGSizeMake(cellWidth, cellHeight) flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0) let collectionViewY = CGRectGetMaxY(fakeView.frame) let collectionViewHeight = HeightScreen - fakeViewHeight let worksCollectionView = UICollectionView(frame: CGRectMake(0, collectionViewY, WidthScreen, collectionViewHeight), collectionViewLayout: flowLayout) worksCollectionView.backgroundColor = UIColor.colorWithHexString("#f0f2f5") worksCollectionView.showsVerticalScrollIndicator = false worksCollectionView.showsHorizontalScrollIndicator = false worksCollectionView.dataSource = self worksCollectionView.delegate = self view.addSubview(worksCollectionView) //footView必须注册 worksCollectionView.registerClass(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: reusedId) worksCollectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: itemID) } func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return imageArray.count } //footerView必须的方法 func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView { //判断如果 kind 是footerView类型 if kind == UICollectionElementKindSectionFooter { //创建footerView, 填写footerView类型（kind）、复用标识符、indexPath footerView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: reusedId, forIndexPath: indexPath) //设置footerView背景颜色 footerView.backgroundColor = UIColor.redColor() return footerView } return footerView } //footerView的大小 func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize { let size = CGSizeMake(WidthScreen, UIScale(28)) return size } func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCellWithReuseIdentifier(itemID, forIndexPath: indexPath) cell.contentView.backgroundColor = UIColor.whiteColor() //这是解决cell复用时重叠（比如label）的方法 for subView in cell.contentView.subviews { subView.removeFromSuperview() } if indexPath.row % 2 == 0 { axisX = UIScale(11) }else { axisX = UIScale(5.5) } let imageView = UIImageView(frame: CGRect(x: axisX, y: UIScale(11), width: UIScale(171), height: UIScale(171))) imageView.image = UIImage.init(named: imageArray[indexPath.row]) cell.contentView.addSubview(imageView) let label = UILabel() label.frame = CGRect(x: axisX, y: UIScale(171 + 9 + 11), width: UIScale(171), height: UIScale(20)) label.text = "浪客" label.textColor = UIColor.colorWithHexString("#0x333333") label.font = UIFont.systemFontOfSize(12) label.textAlignment = NSTextAlignment.Center cell.contentView.addSubview(label) return cell } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } }

也就是说，解决cell复用冲突只需：

for subView in cell.contentView.subviews { subView.removeFromSuperview() }

添加footerView

创建标识符 let reusedId = "PublishPhotoEditHeaderView" 注册UICollectionReusableView worksCollectionView.registerClass(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: reusedId) 实现创建 Method //创建footerView func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView { if kind == UICollectionElementKindSectionFooter { footerView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: reusedId, forIndexPath: indexPath) footerView.backgroundColor = UIColor.redColor() return footerView } return footerView } //设置footerView的大小 func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize { let size = CGSizeMake(WidthScreen, UIScale(28)) return size }

后面有更好的解决方法会持续更新、记录，欢迎提出意见和建议！